/* ============================================================
   HUMAN UPRISE — the McCluster social surface (mnet.html).

   Rebuilt in one piece rather than patched: the old sheet had grown
   three layers of overrides (a six-tab bar on a five-column grid, a
   composer row that pushed its own buttons off the left edge, author
   names inheriting a button's centring), and that is what made it look
   broken. References: Garmin Connect and Substack for the single
   scrolling tab row and the slim composer; Life Reset and LinkedIn for
   left-aligned author rows over quiet action rows.

   Phone first. Every rule here works at 390px; wider screens only get
   more room (min-width queries only). Controls are 44px+ and inputs
   16px+ so iOS never zooms.

   Class names are the contract with js/mnet.js and are kept exactly.
   ============================================================ */
.mn {
  --mn-bg: #0a0807;
  --mn-raise: #141110;
  --mn-raise-2: #1c1816;
  --mn-ink: #f4efe6;
  --mn-dim: #ada296;
  --mn-faint: #7a7068;
  --mn-rule: rgba(244, 239, 230, 0.1);
  --mn-rule-2: rgba(244, 239, 230, 0.16);
  --mn-hot: #ff4d3d;
  --mn-hot-ink: #1a0503;
  --mn-gold: #e8c877;
  --mn-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mn-display: var(--sig, "Anton", "Impact", sans-serif);
  --mn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 16px calc(var(--mn-bar-clear, 96px) + 24px);
  color: var(--mn-ink);
  font-family: var(--mn-ui);
}
.mn *, .mn *::before, .mn *::after { box-sizing: border-box; }
html, body { background: #0a0807; }

/* ---------- the bar ---------- */
.mn__top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -16px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
  background: linear-gradient(180deg, rgba(10, 8, 7, 0.96), rgba(10, 8, 7, 0.82));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  transition: padding 0.35s var(--mn-ease), box-shadow 0.35s var(--mn-ease);
}
.mn__top.is-scrolled { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; box-shadow: 0 1px 0 var(--mn-rule), 0 12px 30px -18px rgba(0, 0, 0, 0.9); }
.mn__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin-right: auto; color: inherit; text-decoration: none; }
/* the supplied M artwork, scaled whole */
.mn__brand-mark { flex: none; width: 34px; height: 34px; object-fit: contain; display: block; transition: transform 0.35s var(--mn-ease); }
.mn__top.is-scrolled .mn__brand-mark { transform: scale(0.88); }
.mn__brand strong, .mn__brand small { display: block; white-space: nowrap; }
.mn__brand strong {
  font-family: var(--mn-display); font-weight: 400; font-size: 1.55rem; line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
  transition: font-size 0.35s var(--mn-ease);
}
.mn__top.is-scrolled .mn__brand strong { font-size: 1.3rem; }
.mn__brand small { margin-top: 3px; color: var(--mn-faint); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; }
.mn__bell, .mn__avatar-btn { flex: none; position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); transition: transform 0.2s var(--mn-ease), background 0.2s; }
.mn__bell:active, .mn__avatar-btn:active { transform: scale(0.92); }
.mn__bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mn__avatar-btn { overflow: hidden; }
.mn__avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.mn__avatar-btn span { font-weight: 800; font-size: 0.82rem; }
.mn__mini-avatar, .mn__profile-avatar { overflow: hidden; border-radius: 50%; background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
/* display rules above would otherwise beat the hidden attribute */
.mn [hidden] { display: none !important; }

/* ---------- signed out / profile gate ---------- */
.mn__gate { padding: 40px 0 24px; }
.mn__eyebrow { margin: 0; color: var(--mn-hot); font-weight: 800; font-size: 0.7rem; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; }
/* the gate and onboarding titles are <h2> (the World's one <h1> is its feed headline); the same look */
.mn__gate > h2, .mn__gate h2.mn__onboard-h {
  max-width: 14ch; margin: 10px 0 0;
  font-family: var(--mn-display); font-weight: 400; font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: 0.92;
  letter-spacing: 0; text-transform: uppercase; overflow-wrap: anywhere;
}
.mn__lede { max-width: 38rem; margin: 14px 0 0; color: var(--mn-dim); font-weight: 500; font-size: 1rem; line-height: 1.6; }

.mn__panel, .mn__composer, .mn__profile-card, .mn__notification {
  border-radius: 20px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule);
}
.mn__panel { margin-top: 24px; padding: 16px; }
.mn__auth-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--mn-bg); }
.mn__auth-tab { min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--mn-dim); font-family: inherit; font-weight: 800; font-size: max(16px, 0.9rem); }
.mn__auth-tab.is-active { background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mn__label { display: block; margin: 14px 0 6px; color: var(--mn-dim); font-weight: 800; font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.mn__label:first-child { margin-top: 0; }
.mn__label span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mn-faint); }
.mn__input, .mn__composer textarea, .mn__reply-box textarea {
  width: 100%; min-height: 48px; border: 0; outline: 0; border-radius: 14px; padding: 12px 14px;
  background: var(--mn-bg); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2);
  font-family: inherit; font-weight: 500; font-size: max(16px, 1rem); line-height: 1.45; resize: vertical;
}
.mn__input:focus, .mn__reply-box textarea:focus { box-shadow: inset 0 0 0 2px var(--mn-gold); }
.mn__input::placeholder, .mn__composer textarea::placeholder, .mn__reply-box textarea::placeholder { color: var(--mn-faint); opacity: 1; }
.mn__textarea { min-height: 8rem; }
.mn__handle-row { display: flex; align-items: center; gap: 8px; color: var(--mn-dim); font-weight: 800; }
.mn__handle-row .mn__input { margin: 0; }
.mn__hint { margin: 6px 0 0; color: var(--mn-faint); font-size: 0.8rem; line-height: 1.5; }
.mn__hint a { color: var(--mn-dim); text-decoration: underline; text-underline-offset: 3px; }
.mn__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--mn-hot); }
/* the one privacy box on Create account, for someone who only saw the notice: a thumb-sized row */
.mn__check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; color: var(--mn-dim); font-size: 0.9rem; line-height: 1.4; cursor: pointer; }
.mn__check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--mn-hot); }
.mn__check input[aria-invalid="true"] { outline: 2px solid var(--mn-hot); outline-offset: 2px; }
.mn__check span { flex: 1; min-width: 0; }
.mn__check a { color: var(--mn-ink); text-decoration: underline; text-underline-offset: 3px; }
.mn__primary, .mn__post {
  min-height: 48px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--mn-hot); color: var(--mn-hot-ink); font-family: inherit; font-weight: 800; font-size: max(16px, 0.95rem);
}
.mn__primary { display: block; width: 100%; margin-top: 16px; padding: 12px 16px; }
.mn__primary:disabled, .mn__post:disabled { opacity: 0.55; cursor: default; }
.mn__secondary {
  display: block; width: 100%; min-height: 48px; margin: 10px 0 0; padding: 12px 16px; cursor: pointer;
  border: 0; border-radius: 14px; background: transparent; color: var(--mn-ink);
  box-shadow: inset 0 0 0 1px var(--mn-rule-2); font-family: inherit; font-weight: 800; font-size: max(16px, 0.92rem);
}
.mn__secondary:hover { background: rgba(244, 239, 230, 0.05); }
a.mn__secondary { text-align: center; text-decoration: none; line-height: 24px; }
.mn__secondary:disabled { opacity: 0.55; cursor: default; }
.mn__text-button { display: block; margin: 12px auto 0; padding: 6px; border: 0; background: none; color: var(--mn-dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: max(16px, 0.85rem); }
.mn__text-button:disabled { opacity: 0.55; cursor: default; }
.mn__text-link { display: block; margin-top: 14px; color: var(--mn-dim); text-align: center; font-weight: 700; font-size: 0.85rem; }
.mn__or { position: relative; margin: 18px 0 10px; text-align: center; color: var(--mn-faint); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.mn__or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--mn-rule); }
.mn__or span { position: relative; padding: 0 10px; background: var(--mn-raise); }
.mn__provider { display: block; width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 14px; cursor: pointer; background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule); font-family: inherit; font-weight: 700; font-size: max(16px, 0.95rem); }
.mn__status { min-height: 1.2em; margin: 8px 0 0; color: var(--mn-dim); font-size: 0.85rem; line-height: 1.45; }
.mn__status:empty { min-height: 0; margin: 0; }
.mn__status.is-error { color: #ff9a91; }
.mn__status.is-ok { color: #9fdaa9; }
.mn__status--center { text-align: center; }
.mn__back, .mn__quiet { min-height: 40px; border: 0; background: none; color: var(--mn-dim); cursor: pointer; font-family: inherit; font-weight: 700; font-size: max(16px, 0.85rem); }
.mn__back { padding: 0; margin-bottom: 18px; }

/* ---------- the tabs: a pill track with a thumb that slides ---------- */
.mn__tabs {
  position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 15;
  display: flex; gap: 0; margin: 4px 0 18px; padding: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: 999px; background: rgba(24, 20, 18, 0.96); box-shadow: inset 0 0 0 1px var(--mn-rule), 0 10px 24px -14px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.mn__tabs::-webkit-scrollbar { display: none; }
.mn__tabs button {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--mn-dim); font-family: inherit; font-weight: 800; font-size: 0.9rem; white-space: nowrap;
  transition: color 0.3s var(--mn-ease);
}
.mn__tabs button.is-active { color: var(--mn-bg); }
/* the thumb: one shape that travels, instead of a highlight that blinks */
.mn__tabs-thumb { position: absolute; z-index: 0; top: 4px; left: 0; height: 40px; width: 0; border-radius: 999px; background: var(--mn-ink); opacity: 0; transition: transform 0.45s var(--mn-spring), width 0.45s var(--mn-spring), opacity 0.2s; pointer-events: none; }
.mn__tabs-thumb.is-on { opacity: 1; }
.mn__tabs { position: sticky; }
.mn__tabs > .mn__tabs-thumb { position: absolute; }
.mn__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mn-hot); color: #fff; font-weight: 800; font-size: 0.7rem; }

.mn__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mn-hot); }
.mn__live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--mn-hot); animation: mn-ping 1.8s var(--mn-ease) infinite; }

/* ---------- the composer: one line until it is used ---------- */
.mn__composer { padding: 10px 12px; border-radius: 26px; transition: border-radius 0.35s var(--mn-ease), box-shadow 0.35s var(--mn-ease), padding 0.35s var(--mn-ease); }
.mn__composer.is-open { border-radius: 22px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(232, 200, 119, 0.35), 0 20px 50px -30px rgba(255, 77, 61, 0.45); }
.mn__composer-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mn__composer.is-open .mn__composer-head { align-items: start; }
.mn__mini-avatar { width: 40px; height: 40px; display: grid; place-items: center; background-size: cover; background-position: center; font-weight: 800; font-size: 0.8rem; }
.mn__composer textarea { min-height: 40px; padding: 9px 0; background: transparent; box-shadow: none; resize: none; field-sizing: content; max-height: 16rem; font-size: max(16px, 1rem); }
.mn__composer textarea:focus { box-shadow: none; }
.mn__composer.is-open textarea { min-height: 84px; }
.mn__composer-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-height: 0; margin-top: 0; padding-top: 0; overflow: hidden; opacity: 0; border-top: 1px solid transparent; visibility: hidden;
  transition: max-height 0.4s var(--mn-ease), opacity 0.3s var(--mn-ease), margin 0.4s var(--mn-ease), padding 0.4s var(--mn-ease), border-color 0.4s, visibility 0s linear 0.4s;
}
.mn__composer.is-open .mn__composer-actions { max-height: 12rem; margin-top: 12px; padding-top: 12px; opacity: 1; border-top-color: var(--mn-rule); visibility: visible; transition-delay: 0s; }
/* Create, one tap from the folded composer */
.mn__create { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); text-decoration: none; }
.mn__create svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mn__composer.is-open .mn__create { display: none; }
.mn__composer-actions > label { min-width: 0; }
.mn__attach, .mn__composer select {
  display: inline-flex; align-items: center; min-height: 40px; max-width: 100%; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mn-raise-2); color: var(--mn-dim); box-shadow: inset 0 0 0 1px var(--mn-rule);
  font-family: inherit; font-weight: 700; font-size: max(16px, 0.85rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn__attach::before { content: "+"; margin-right: 6px; color: var(--mn-hot); font-weight: 800; }
.mn__composer select { -webkit-appearance: none; appearance: none; }
.mn__composer .mn__track-pick { max-width: 11rem; }
.mn__post { margin-left: auto; padding: 0 22px; min-height: 40px; border-radius: 999px; transition: transform 0.2s var(--mn-ease), filter 0.2s; }
/* the house owner's newsroom tick: under the actions, only while the composer is open */
.mn__newsroom { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin-top: 10px; color: var(--mn-dim); font-size: max(16px, 0.9rem); line-height: 1.4; cursor: pointer; }
.mn__newsroom input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mn-hot); }
.mn__newsroom[hidden], .mn__composer:not(.is-open) .mn__newsroom { display: none; }
.mn__post:active { transform: scale(0.95); }
.mn__media-queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.mn__media-chip { position: relative; min-height: 76px; overflow: hidden; display: grid; place-items: center; padding: 6px; border-radius: 12px; background: var(--mn-raise-2); color: var(--mn-dim); font-size: 0.72rem; text-align: center; }
.mn__media-chip img, .mn__media-chip video { width: 100%; height: 100%; max-height: 7rem; object-fit: cover; }
.mn__media-chip button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.75); color: #fff; cursor: pointer; }
/* a video in the composer: its picture and a play mark, never a black box */
.mn__media-play { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff; pointer-events: none; }
.mn__media-play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }

/* ---------- the feed: cards that arrive, hearts that pop ---------- */
.mn__feed { display: grid; gap: 10px; margin-top: 14px; }
.mn__post-card {
  padding: 16px; border-radius: 22px;
  background: linear-gradient(180deg, #161210, #120f0d);
  box-shadow: inset 0 0 0 1px var(--mn-rule);
}
.mn__post-card.is-new { animation: mn-rise 0.55s var(--mn-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.mn__post-card.is-pinned { box-shadow: inset 0 0 0 1px rgba(255, 77, 61, 0.45), 0 20px 50px -34px rgba(255, 77, 61, 0.7); }
.mn__pin { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--mn-hot); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.mn__post-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mn__post-head > .mn__author-sub { flex: none; margin: 0 0 0 auto; align-self: flex-start; padding-top: 3px; }
.mn__author-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
/* a ring in the member's own colour around the face or initials */
.mn__author-avatar {
  --hue: 10;
  flex: none; position: relative; width: 44px; height: 44px; overflow: hidden; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, hsla(var(--hue), 60%, 40%, 0.9), hsla(calc(var(--hue) + 40), 55%, 18%, 1));
  box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3.5px hsla(var(--hue), 80%, 60%, 0.75);
  color: #fff; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em;
}
.mn__author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mn__author-meta { flex: 1; min-width: 0; text-align: left; }
.mn__author-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-ink); font-weight: 800; font-size: 0.98rem; line-height: 1.25; }
.mn__author-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-faint); font-weight: 600; font-size: 0.82rem; }
.mn__post-body { margin: 12px 0 0; color: var(--mn-ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.55; }
.mn__post-media { display: grid; gap: 6px; margin: 12px 0 0; }
.mn__post-media.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn__post-media-item { overflow: hidden; border-radius: 16px; background: #050505; }
.mn__post-media-item img, .mn__post-media-item video { display: block; width: 100%; max-height: min(70vh, 34rem); object-fit: contain; background: #050505; }
.mn__post-media.is-grid .mn__post-media-item { aspect-ratio: 1; }
.mn__post-media.is-grid .mn__post-media-item img, .mn__post-media.is-grid .mn__post-media-item video { height: 100%; object-fit: cover; }
.mn__post-media-item audio { display: block; width: 100%; }
.mn__post-media-loading { min-height: 8rem; display: grid; place-items: center; color: var(--mn-faint); font-size: 0.8rem; }
/* a video this device cannot play: its picture, and a plain line that says so */
.mn__post-media-item.is-unplayable { position: relative; min-height: 6rem; }
.mn__video-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 10px; background: rgba(5, 5, 7, 0.8); color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.35; text-align: center; }
.mn__post-actions { display: flex; align-items: center; gap: 2px; margin: 10px -8px -6px; }
.mn__action {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--mn-dim); cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.88rem;
  transition: color 0.2s, background 0.2s, transform 0.15s var(--mn-ease);
}
.mn__action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: fill 0.2s, transform 0.3s var(--mn-spring); }
@media (hover: hover) { .mn__action:hover { background: rgba(244, 239, 230, 0.06); color: var(--mn-ink); } }
.mn__action:active { transform: scale(0.9); }
.mn__action--save { margin-left: auto; }
.mn__count { font-variant-numeric: tabular-nums; }
.mn__count:empty { display: none; }
.mn__action--like.is-active { color: var(--mn-hot); }
.mn__action--like.is-active svg { fill: var(--mn-hot); }
.mn__action--save.is-active { color: var(--mn-gold); }
.mn__action--save.is-active svg { fill: var(--mn-gold); }
/* THE EMBLEM OR FUND IT: the owner's emblem is the join, shown complete and as
   supplied (no rounding, no crop) on its own white ground, never written out
   beside it; the pill is the tap target. Fund is a plain pill; the fund line
   says whether the campaign's support rail is open. */
.mn__eup { width: 28px; height: 28px; object-fit: contain; flex: none; }
/* the join is the mark alone on the same material as its neighbours: no white plate (owner, 2026-10-15) */
.mn__primary--eup, .mn__world-go--eup { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-width: 44px; }
.mn__fund { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--mn-rule-2); border-radius: 999px; background: transparent; color: var(--mn-ink); font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.mn__fund svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mn__actcard-stats { margin: 6px 0 0; color: var(--mn-dim); font-size: 0.78rem; font-weight: 700; }
.mn__fund-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(244, 239, 230, 0.06); box-shadow: inset 0 0 0 1px var(--mn-rule-2); color: var(--mn-dim); font-size: 0.85rem; line-height: 1.4; }
.mn__fund-line span { flex: 1 1 14rem; min-width: 0; }
.mn__fund-line small { flex-basis: 100%; color: var(--mn-faint); font-size: 0.78rem; }
.mn__fund-go { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--mn-hot); color: var(--mn-hot-ink); font-size: 0.82rem; font-weight: 800; text-decoration: none; }
.mn__action.is-pop svg { animation: mn-pop 0.5s var(--mn-spring); }
.mn__danger { color: #ff9a91 !important; }
.mn__action--thumb { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
.mn__more { display: block; width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 999px; background: transparent; color: var(--mn-dim); box-shadow: inset 0 0 0 1px var(--mn-rule-2); cursor: pointer; font-family: inherit; font-weight: 800; font-size: max(16px, 0.9rem); }
/* an empty room says so at once, in its final colours: it never fades up through grey (owner, 2026-10-20: no flashes) */
.mn__empty { padding: 40px 16px; border-radius: 22px; color: var(--mn-dim); text-align: center; font-size: 0.98rem; line-height: 1.6; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }

/* loading: shapes of posts that shimmer, not a sentence */
.mn__skel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 22px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mn__skel i { display: block; height: 12px; margin-bottom: 10px; border-radius: 999px; background: linear-gradient(90deg, #1d1816 0%, #2a2421 40%, #1d1816 80%); background-size: 240% 100%; animation: mn-shimmer 1.4s linear infinite; }
.mn__skel i.is-short { width: 55%; }
.mn__skel .mn__skel-av { width: 44px; height: 44px; margin: 0; border-radius: 50%; }

/* the track on a post: plays where it is read */
.mn__track { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 12px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--mn-raise-2); box-shadow: inset 0 0 0 1px var(--mn-rule); transition: transform 0.2s var(--mn-ease); }
.mn__track:active { transform: scale(0.98); }
.mn__track-art { flex: none; display: block; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--mn-raise); }
.mn__track-meta { flex: 1; min-width: 0; display: block; }
.mn__track-meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.mn__track-meta small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-faint); font-size: 0.8rem; }
.mn__track-play { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--mn-hot); color: var(--mn-hot-ink); font-size: 0.8rem; }

/* ---------- motion ---------- */
@keyframes mn-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes mn-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes mn-ping { 0% { opacity: 0.8; transform: scale(0.6); } 80%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes mn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes mn-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* NO BLANK FRAMES BETWEEN ROOMS (owner, 2026-10-20: "I see a lot of shit flashing in between moving screens"). The room you
   open is on screen, whole, in the same frame the last one leaves. It used to fade up from nothing, so every switch showed
   the bare page first; and the World's own room, which ships open, would have faded in on every arrival. */
.mn__view:not([hidden]) { animation: none; }
/* before js/mnet.js has run: ?signin=1 asked for the sign-in form, so the World waits under it rather than showing first
   (showGate drops the class). (Inside the Music page's World frame the Music page keeps the one bar: css/style.css.) */
.mn-boot-signin #mnApp { display: none !important; }
/* a member's room asked for by address (?view=profile, set by the head of mnet.html) is the room painted first, never the
   World and then the room; js/mnet.js takes it over at once (peekView, setView and showGate drop the attribute).
   !important: .mn [hidden] (above) is itself important, and these are the few hidden things shown before the script runs */
html[data-boot-view] #mnFeedView { display: none !important; }
html[data-boot-view="live"] #mnLiveView, html[data-boot-view="clips"] #mnClipsView, html[data-boot-view="discover"] #mnDiscoverView,
html[data-boot-view="groups"] #mnGroupsView, html[data-boot-view="messages"] #mnMessagesView, html[data-boot-view="profile"] #mnProfileView { display: block !important; }
html[data-boot-view] #mnToWorld { display: inline-flex !important; }
/* loading lists keep the shape of what is coming (skeletons, below), never a sentence that the answer then replaces */
.mn__skel--row { grid-template-columns: 44px minmax(0, 1fr) 72px; align-items: center; padding: 12px 14px; border-radius: 16px; }
.mn__skel--row > div i:last-child { margin-bottom: 0; }
.mn__skel--row .mn__skel-pill { width: 72px; height: 32px; margin: 0; }
.mn__skel--card { grid-template-columns: minmax(0, 1fr); min-height: 132px; align-content: end; border-radius: 18px; }

/* ---------- section heads, discover, messages, alerts ---------- */
.mn__section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.mn__section-head h2 { margin: 4px 0 0; font-family: var(--mn-display); font-weight: 400; font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1; text-transform: uppercase; }
.mn__search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 14px; }
.mn__search-row .mn__input { margin: 0; }
.mn__search-row .mn__post { margin: 0; min-height: 48px; border-radius: 14px; }
.mn__people, .mn__conversations, .mn__notifications { display: grid; gap: 8px; }
.mn__person-row, .mn__conversation-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mn__person-row button, .mn__conversation-row button { border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.mn__person-copy, .mn__conversation-copy { min-width: 0; }
.mn__person-name, .mn__conversation-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 0.95rem; }
.mn__person-sub, .mn__conversation-sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-faint); font-size: 0.82rem; }
.mn__follow { min-height: 36px; padding: 0 14px !important; border-radius: 999px !important; background: var(--mn-ink) !important; color: var(--mn-bg) !important; font-weight: 800 !important; font-size: 0.85rem !important; }
.mn__follow.is-active { background: transparent !important; color: var(--mn-dim) !important; box-shadow: inset 0 0 0 1px var(--mn-rule-2) !important; }
/* NOTIFICATIONS DROP DOWN FROM THE BELL (owner, 2026-10-20): a panel under the header, the page left where it was.
   Phone first: 16px from each edge; wider screens keep it a column at the right. It stops above the bottom bar. */
.mn__alerts { position: fixed; z-index: 45; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 16px; right: 16px; margin-left: auto; box-sizing: border-box; width: auto; max-width: 26rem; max-height: min(34rem, calc(100dvh - env(safe-area-inset-top, 0px) - 180px)); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border-radius: 18px; background: var(--mn-raise); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2), 0 24px 48px -18px rgba(0, 0, 0, 0.9); pointer-events: auto; }
.mn__alerts[hidden] { display: none; }
.mn__alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.mn__alerts-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.mn__alerts-head .mn__quiet { min-height: 44px; }
.mn-world-on .mn__alerts { background: #121418; color: #f2f1ed; box-shadow: var(--w-edge, inset 0 0 0 1px rgba(255, 255, 255, 0.12)), 0 24px 48px -18px rgba(0, 0, 0, 0.95); }
/* alerts on this device: one line of why, one button */
.mn__push { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--mn-raise-2); }
.mn__push p { margin: 0; min-width: 0; font-size: 0.88rem; line-height: 1.4; color: var(--mn-dim); }
.mn__push b { display: block; color: var(--mn-ink); }
.mn__push button { min-height: 44px; }
.mn__push[hidden] { display: none; }
.mn__notification { padding: 14px 16px; }
.mn__notification strong { display: block; font-size: 0.95rem; }
.mn__notification-action { display: inline-flex; margin-top: 8px; font-weight: 750; text-decoration: none; }
/* a connection request is answered where it is read: Accept, Decline, View profile */
.mn__notification-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Made together: the card under a joint post, and the projects published with me inside Level 3 */
.mn__actcard--collab .mn__actcard-eyebrow { color: #7fe0a3; }
.mn__collab-by { margin: 2px 0 8px; font-size: 0.86rem; color: var(--mn-dim, rgba(255, 255, 255, 0.7)); }
.mn__collab-credit { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 750; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); cursor: pointer; }
.mn__withme { display: grid; gap: 4px; margin: 8px 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.mn__withme > b { font-size: 1rem; }
.mn__withme > span, .mn__withme-state { font-size: 0.86rem; color: var(--mn-dim, rgba(255, 255, 255, 0.7)); }
.mn__withme > a { font-weight: 750; }
.mn__withme .mn__primary { justify-self: start; margin-top: 6px; }
button.mn__notification-action { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--mn-accent, #e5383b); color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
button.mn__notification-action--quiet { background: rgba(255, 255, 255, 0.1); color: inherit; }
button.mn__notification-action:disabled { opacity: 0.55; cursor: default; }
.mn__notification p { margin: 4px 0 0; color: var(--mn-faint); font-size: 0.82rem; line-height: 1.45; }
.mn__notice { padding: 12px 14px; border-radius: 12px; background: var(--mn-raise); color: var(--mn-dim); font-size: 0.85rem; line-height: 1.5; }

/* ---------- profile ---------- */
.mn__profile-card { overflow: hidden; }
.mn__profile-banner { --hue: 10; min-height: 120px; background: radial-gradient(120% 140% at 100% 0%, hsla(var(--hue), 70%, 45%, 0.45), transparent 60%), linear-gradient(135deg, rgba(255, 77, 61, 0.22), rgba(20, 17, 16, 0.6)); background-size: cover; background-position: center; }
.mn__profile-card-body { position: relative; padding: 52px 16px 18px; }
.mn__profile-avatar { --hue: 10; position: absolute; top: -44px; left: 16px; width: 88px; height: 88px; display: grid; place-items: center; border: 4px solid var(--mn-raise); background: radial-gradient(circle at 30% 25%, hsla(var(--hue), 60%, 42%, 0.95), hsla(calc(var(--hue) + 40), 55%, 18%, 1)); background-size: cover; background-position: center; color: #fff; font-weight: 900; font-size: 1.4rem; box-shadow: 0 0 0 3px hsla(var(--hue), 80%, 60%, 0.7); animation: mn-rise 0.5s var(--mn-ease) both; }
.mn__profile-card .mn__quiet { position: absolute; top: 12px; right: 12px; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
.mn__profile-card .mn__tour-again { position: static; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 16px; }
.mn__profile-card h2 { margin: 0; font-weight: 800; font-size: 1.5rem; line-height: 1.15; }
.mn__handle { margin: 4px 0 0; color: var(--mn-faint); font-size: 0.9rem; }
.mn__profile-headline { margin: 12px 0 0; font-weight: 700; }
.mn__profile-bio { margin: 8px 0 0; color: var(--mn-dim); white-space: pre-wrap; line-height: 1.55; }
.mn__profile-link { display: inline-block; max-width: 100%; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-hot); font-weight: 700; font-size: 0.9rem; }
.mn__profile-counts { display: flex; gap: 16px; margin-top: 10px; color: var(--mn-faint); font-size: 0.85rem; }
.mn__profile-counts strong { color: var(--mn-ink); }
.mn__profile-security { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mn-rule); }
.mn__profile-security h2 { margin: 0 0 4px; font-weight: 800; font-size: 1.1rem; }
.mn__avatar-pick { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.mn__ghost { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); font-family: inherit; font-weight: 800; font-size: max(16px, 0.88rem); }
#mnAvatarPreview { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
.mn__tour-cta { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0; padding: 0 16px; border-radius: 999px; background: var(--mn-hot); color: var(--mn-hot-ink); font-weight: 800; font-size: 0.92rem; text-decoration: none; white-space: nowrap; }

/* ---------- dialogs: a thread, a person, a conversation ---------- */
.mn__thread {
  width: calc(100% - 16px); max-width: 42rem; max-height: min(84vh, 48rem); margin: auto auto calc(5.5rem + env(safe-area-inset-bottom, 0px));
  padding: 0; border: 0; border-radius: 22px; color: var(--mn-ink); background: var(--mn-raise);
  box-shadow: inset 0 0 0 1px var(--mn-rule-2), 0 28px 80px rgba(0, 0, 0, 0.55); font-family: var(--mn-ui);
}
.mn__thread::backdrop { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mn__thread-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mn-rule); background: var(--mn-raise); }
.mn__thread-head button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mn-raise-2); color: var(--mn-ink); cursor: pointer; font-size: 1.3rem; }
.mn__thread .mn__post-card { padding: 16px; border-radius: 0; }
.mn__replies { border-top: 1px solid var(--mn-rule); }
.mn__replies .mn__post-card { padding-left: 32px; }
.mn__reply-box { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px; border-top: 1px solid var(--mn-rule); background: var(--mn-raise); }
.mn__reply-box textarea { max-height: 8rem; resize: none; }
.mn__reply-box .mn__post { margin: 0; min-height: 48px; }
.mn__thread > .mn__status { padding: 0 14px 8px; }
/* THE THUMBNAIL editor (owner, 2026-10-20): one column at every width, the frame as large as the sheet allows */
.mn__thumb-dialog { overflow-y: auto; }
.mn__thumb-dialog .mn__thread-head button { width: 44px; height: 44px; }
.mn__thumb-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 16px 16px; }
.mn__thumb-which { display: flex; flex-wrap: wrap; gap: 8px; }
.mn__thumb-which[hidden], .mn__thumb-pick[hidden] { display: none; }
.mn__thumb-which button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); font-family: inherit; font-weight: 800; font-size: max(16px, 0.88rem); }
.mn__thumb-which button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mn-gold); }
.mn__thumb-stage { display: grid; place-items: center; min-height: 10rem; border-radius: 14px; overflow: hidden; background: #000; }
.mn__thumb-stage video, .mn__thumb-stage img { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; }
.mn__thumb-stage [hidden] { display: none; }
.mn__thumb-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mn__thumb-range { color: var(--mn-dim); font-size: 0.8rem; font-weight: 800; }
.mn__thumb-pick input[type="range"] { width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--mn-hot); }
.mn__thumb-pick .mn__primary { margin-top: 4px; }
.mn__thumb-upload { margin: 0; box-sizing: border-box; text-align: center; line-height: 24px; }
.mn__thumb-upload[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.mn__person-sheet { padding: 14px; }
.mn__person-hero { min-height: 120px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 77, 61, 0.28), rgba(232, 200, 119, 0.08) 60%, rgba(244, 239, 230, 0.03)); background-size: cover; background-position: center; }
.mn__person-main { position: relative; padding: 52px 2px 6px; }
.mn__person-main .mn__profile-avatar { left: 2px; border-color: var(--mn-raise); }
.mn__person-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.mn__person-actions button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); font-family: inherit; font-weight: 800; font-size: max(16px, 0.85rem); }
.mn__person-actions .is-primary { background: var(--mn-hot); color: var(--mn-hot-ink); box-shadow: none; }
.mn__person-posts { display: grid; margin-top: 8px; }
.mn__messages { display: grid; align-content: start; gap: 8px; min-height: 10rem; max-height: 55vh; padding: 14px; overflow: auto; }
.mn__message { max-width: 82%; padding: 10px 12px; border-radius: 18px 18px 18px 6px; background: var(--mn-raise-2); }
.mn__message.is-mine { margin-left: auto; border-radius: 18px 18px 6px 18px; background: var(--mn-hot); color: var(--mn-hot-ink); }
.mn__message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.45; }
.mn__message small { display: block; margin-top: 4px; opacity: 0.7; font-size: 0.72rem; }
.mn__message-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mn__accept { width: calc(100% - 28px); margin: 12px 14px 0; }
.mn__conversation-dialog .mn__reply-box { position: sticky; bottom: 0; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ============================================================
   GROUPS — the rooms inside the network. The cover is a gradient
   derived from the slug: abstract colour, never a mark.
   ============================================================ */
.mng__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 14px; background: var(--mn-raise); }
.mng__seg { min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--mn-dim); font-family: inherit; font-weight: 800; font-size: max(16px, 0.9rem); }
.mng__seg.is-on { background: var(--mn-raise-2); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mng__grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.mng__card.is-target { box-shadow: inset 0 0 0 2px var(--mn-hot, #ff4d3d); }
.mng__card { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; overflow: hidden; border-radius: 18px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mng__cover { position: relative; height: 80px; }
.mng__cover b { position: absolute; left: 14px; bottom: -20px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--mn-ink); color: var(--mn-bg); font-weight: 900; font-size: 1.05rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.mng__body { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 4px; align-content: start; padding: 28px 16px 16px; }
.mng__name { margin: 0; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.mng__purpose { margin: 0; color: var(--mn-dim); font-size: 0.88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mng__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; align-self: end; }
.mng__count { color: var(--mn-faint); font-weight: 600; font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mng__join { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--mn-hot); color: var(--mn-hot-ink); font-family: inherit; font-weight: 800; font-size: max(16px, 0.85rem); }
.mng__join:disabled { opacity: 0.6; cursor: default; }
.mng__join.is-in { background: transparent; color: var(--mn-dim); box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
.mng__back { min-height: 44px; margin-bottom: 10px; padding: 0 4px; border: 0; background: none; cursor: pointer; color: var(--mn-dim); font-family: inherit; font-weight: 700; font-size: max(16px, 0.88rem); }
.mng__head { overflow: hidden; margin-bottom: 16px; border-radius: 20px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mng__banner { height: 120px; }
.mng__headin { display: grid; gap: 6px; padding: 16px; }
.mng__headin h2 { margin: 0; font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.15; }
.mng__meta { color: var(--mn-faint); font-weight: 600; font-size: 0.82rem; }
.mng__headin p { margin: 0; color: var(--mn-dim); font-size: 0.92rem; line-height: 1.55; }
.mng__headin .mng__join { justify-self: start; margin-top: 4px; min-height: 44px; padding: 0 20px; }
.mng__composer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 18px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mng__composer-in { display: grid; gap: 8px; min-width: 0; }
.mng__composer textarea { width: 100%; min-width: 0; min-height: 48px; resize: vertical; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--mn-bg); color: var(--mn-ink); box-shadow: inset 0 0 0 1px var(--mn-rule-2); font-family: inherit; font-weight: 500; font-size: max(16px, 0.95rem); line-height: 1.5; }
.mng__composer textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mn-gold); }
.mng__composer-go { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mng__post { flex: none; width: auto; min-height: 40px; margin: 0; padding: 0 20px; border-radius: 999px; }
.mng__empty { margin: 0; padding: 16px; border-radius: 16px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); color: var(--mn-dim); font-size: 0.92rem; line-height: 1.6; }
.mng__empty b { display: block; margin-bottom: 4px; color: var(--mn-ink); font-weight: 800; }

.mn button:focus-visible, .mn a:focus-visible, .mn__thread button:focus-visible { outline: 2px solid var(--mn-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mn *, .mn *::before, .mn *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .mn__tabs-thumb { transition: none !important; }
}

/* ---------- more room: tablet and up only ADD space ---------- */
@media (min-width: 600px) {
  .mn { padding-left: 24px; padding-right: 24px; }
  .mn__top { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .mn__gate { padding-top: 64px; }
  .mn__composer { padding: 16px 18px; }
  .mng__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .mn { max-width: 46rem; }
  .mn__tabs { justify-content: flex-start; }
}


/* ---------- motion polish: tactile, not noisy ---------- */
.mn__composer:focus-within {
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--mn-rule-2), 0 14px 42px -26px rgba(255,77,61,.55);
  transform: translateY(-1px);
}
.mn__composer { transform: translateY(0); }
.mn__composer-head textarea { transition: color .2s, opacity .2s, transform .3s var(--mn-ease); }
.mn__composer:focus-within .mn__composer-head textarea { transform: translateX(2px); }

.mn__post-card.is-just-posted { animation: mn-post-arrive .8s var(--mn-spring) both; }
.mn__post-card.is-just-posted::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,77,61,.7);
  animation: mn-post-glow 1.4s var(--mn-ease) both;
}
.mn__post-card { position: relative; }

.mn__post-media-item > img,
.mn__post-media-item > video { animation: mn-media-reveal .5s var(--mn-ease) both; }
.mn__post-media-loading { position: relative; overflow: hidden; }
.mn__post-media-loading::after {
  content:""; position:absolute; inset:0; transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(244,239,230,.08),transparent);
  animation:mn-sweep 1.25s ease-in-out infinite;
}

.mn__badge:not([hidden]), .mn__bell-count:not([hidden]) { animation: mn-badge-in .45s var(--mn-spring) both; }
.mn__count { display:inline-block; transform-origin:center; }
.mn__action.is-pop .mn__count { animation: mn-count-pop .42s var(--mn-spring); }

.mn__thread[open] { animation: mn-dialog-in .38s var(--mn-spring) both; }
.mn__thread[open]::backdrop { animation: mn-backdrop-in .3s ease both; }
.mn__thread::backdrop { background: rgba(4,3,3,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.mn__track, .mn__person, .mng__card {
  will-change: transform;
}
@media (hover:hover) {
  .mn__track:hover, .mn__person:hover, .mng__card:hover {
    transform: translateY(-2px);
  }
  .mn__brand:hover .mn__brand-mark { transform: rotate(-5deg) scale(1.06); }
  .mn__post-card:hover { box-shadow: inset 0 0 0 1px var(--mn-rule-2), 0 18px 44px -38px rgba(244,239,230,.35); }
}
.mn__primary:active, .mn__secondary:active, .mn__quiet:active, .mn__follow:active, .mng__seg:active {
  transform: scale(.97);
}

@keyframes mn-post-arrive {
  0% { opacity:0; transform:translateY(-10px) scale(.975); }
  55% { opacity:1; transform:translateY(2px) scale(1.006); }
  100% { transform:none; }
}
@keyframes mn-post-glow {
  0% { opacity:0; }
  25% { opacity:1; }
  100% { opacity:0; }
}
@keyframes mn-media-reveal {
  from { opacity:0; transform:scale(1.018); filter:blur(5px); }
  to { opacity:1; transform:none; filter:none; }
}
@keyframes mn-sweep { to { transform:translateX(110%); } }
@keyframes mn-badge-in {
  from { opacity:0; transform:scale(.45) rotate(-12deg); }
  to { opacity:1; transform:none; }
}
@keyframes mn-count-pop {
  0%,100% { transform:none; }
  45% { transform:translateY(-2px) scale(1.2); }
}
@keyframes mn-dialog-in {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to { opacity:1; transform:none; }
}
@keyframes mn-backdrop-in { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  .mn__composer, .mn__composer:focus-within { transform:none !important; }
}

/* Human Uprise identity: action is the product, not generic social posting. */
.mn__manifesto{margin:18px 0 20px;padding:24px 20px 20px;border:1px solid var(--mn-rule-2);border-radius:24px;background:radial-gradient(circle at 92% 0,rgba(255,77,61,.22),transparent 38%),linear-gradient(145deg,#191310,#0b0908 72%);overflow:hidden}
.mn__manifesto p{margin:0;color:var(--mn-hot);font-size:.64rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.mn__manifesto h1{max-width:9ch;margin:7px 0 18px;font-family:var(--mn-display);font-size:clamp(2.7rem,12vw,4.8rem);font-weight:400;line-height:.88;text-transform:uppercase}
.mn__manifesto div{display:flex;gap:7px;overflow:auto;scrollbar-width:none}.mn__manifesto div::-webkit-scrollbar{display:none}.mn__manifesto span{flex:none;padding:8px 11px;border:1px solid var(--mn-rule-2);border-radius:999px;color:var(--mn-dim);font-size:.72rem;font-weight:800}
.mn__post{padding-inline:16px}
@media(min-width:700px){.mn__manifesto{padding:30px}.mn__manifesto h1{font-size:4.8rem}}

/* the brand mark is the supplied artwork alone (no plate; CLAUDE.md rule 10) */
.mn__actionboard,.mn__understand{margin:0 0 20px;padding:20px;border:1px solid var(--mn-rule-2);border-radius:22px;background:var(--mn-panel)}
.mn__actionboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.mn__actionboard-head p,.mn__mission-strip p,.mn__understand p{margin:0;color:var(--mn-hot);font-size:.62rem;font-weight:900;letter-spacing:.18em}.mn__actionboard-head h2,.mn__understand h2{margin:4px 0 0;font-family:var(--mn-display);font-weight:400;text-transform:uppercase}.mn__actionboard-head>strong{font-size:1.15rem;white-space:nowrap}
.mn__actionboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.mn__actionboard-grid article{padding:13px;border:1px solid var(--mn-rule);border-radius:14px}.mn__actionboard-grid span,.mn__actionboard-grid small{display:block;color:var(--mn-dim);font-size:.68rem}.mn__actionboard-grid b{display:block;margin:4px 0;font-size:1.25rem}
.mn__mission-strip{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--mn-rule)}.mn__mission-strip h3{margin:3px 0 0;font-size:.9rem}.mn__mission-strip a,.mn__understand>a{color:var(--mn-hot);font-weight:800;text-decoration:none;white-space:nowrap}
.mn__understand{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,rgba(4,45,82,.32),var(--mn-panel))}.mn__understand small{display:block;max-width:62ch;margin-top:7px;color:var(--mn-dim);line-height:1.45}


.mn__demographics{margin:20px 0;padding:16px;border:1px solid var(--mn-rule);border-radius:16px}.mn__demographics legend{padding:0 6px;font-weight:900}.mn__demographics legend span{color:var(--mn-hot);font-size:.7rem;text-transform:uppercase}.mn__demo-grid{display:grid;gap:9px;margin-top:12px}.mn__demo-grid label{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;line-height:1.35}.mn__demo-grid input{margin-top:2px;accent-color:var(--mn-hot)}

.mn__frontpage{margin-top:16px;border:1px solid var(--mn-rule);border-radius:18px;overflow:hidden;background:var(--mn-panel)}
.mn__frontpage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--mn-rule)}
.mn__frontpage-stage{position:relative;min-height:420px;background:#fff}.mn__frontpage-stage iframe{display:block;width:100%;height:560px;border:0}.mn__frontpage-fallback{padding:18px}
.mn__actionboard,.mn__understand{margin:0 0 20px;padding:20px;border:1px solid var(--mn-rule-2);border-radius:22px;background:var(--mn-panel)}
.mn__actionboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.mn__actionboard-head p,.mn__mission-strip p,.mn__understand p{margin:0;color:var(--mn-hot);font-size:.62rem;font-weight:900;letter-spacing:.18em}.mn__actionboard-head h2,.mn__understand h2{margin:4px 0 0;font-family:var(--mn-display);font-weight:400;text-transform:uppercase}.mn__actionboard-head>strong{font-size:1.15rem;white-space:nowrap}
.mn__actionboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:16px}.mn__actionboard-grid article{padding:13px;border:1px solid var(--mn-rule);border-radius:14px}.mn__actionboard-grid span,.mn__actionboard-grid small{display:block;color:var(--mn-dim);font-size:.68rem}.mn__actionboard-grid b{display:block;margin:4px 0;font-size:1.25rem}
.mn__mission-strip,.mn__understand{display:flex;align-items:center;justify-content:space-between;gap:12px}.mn__mission-strip{margin-top:14px;padding-top:14px;border-top:1px solid var(--mn-rule)}.mn__mission-strip h3{margin:3px 0 0;font-size:.9rem}.mn__mission-strip a,.mn__understand>a{color:var(--mn-hot);font-weight:800;text-decoration:none}.mn__understand{background:linear-gradient(135deg,rgba(4,45,82,.32),var(--mn-panel));flex-wrap:wrap}.mn__understand small{display:block;max-width:62ch;margin-top:7px;color:var(--mn-dim);line-height:1.45}

/* ---------- the Action Record (Missions tab) ----------
   Verified work first, what it unlocks second, points last. */
.mn__record { margin: 0 0 18px; padding: 16px; border-radius: 22px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); animation: mn-rise 0.45s var(--mn-ease) both; }
.mn__record-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mn__record-head h2 { margin: 2px 0 0; font-family: var(--mn-display); font-weight: 400; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.mn__record-head strong { flex: none; color: var(--mn-gold); font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
/* the next mission, right under the count: one line and one button */
.mn__record-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin: 12px 0 0; padding: 12px; border-radius: 14px; background: var(--mn-raise-2); }
.mn__record-next .mn__eyebrow { grid-column: 1 / -1; margin: 0; }
.mn__record-next b { min-width: 0; color: var(--mn-ink); line-height: 1.3; overflow-wrap: anywhere; }
.mn__record-next .mn__primary { min-height: 44px; }
.mn__record-unlock { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--mn-raise-2); color: var(--mn-dim); font-size: 0.88rem; line-height: 1.45; }
.mn__record-unlock b { color: var(--mn-ink); }
.mn__record-unlock.is-open { background: rgba(232, 200, 119, 0.12); box-shadow: inset 0 0 0 1px rgba(232, 200, 119, 0.4); }
.mn__record-skills, .mn__record-cohorts, .mn__record-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mn__record-skills li { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.85rem; }
.mn__record-skills span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-dim); text-transform: capitalize; }
.mn__record-skills i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--mn-hot) var(--pct), var(--mn-raise-2) var(--pct)); }
.mn__record-skills b { font-variant-numeric: tabular-nums; }
.mn__record-cohorts li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--mn-raise-2); }
.mn__record-cohorts span { color: var(--mn-dim); font-size: 0.82rem; }
.mn__record-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 4px 4px 4px 0; border-top: 1px solid var(--mn-rule); }
.mn__record-item button { min-height: 48px; display: grid; justify-items: start; gap: 2px; padding: 6px 0; border: 0; background: none; color: var(--mn-ink); text-align: left; cursor: pointer; font: inherit; }
.mn__record-item button b { font-weight: 800; }
.mn__record-item button span { color: var(--mn-dim); font-size: 0.8rem; }
.mn__record-item.is-verified button span { color: #8fe0a8; }
.mn__record-item.is-rejected button span { color: #ff9b8f; }
.mn__record-item small { grid-column: 1 / -1; color: var(--mn-dim); font-size: 0.8rem; }
.mn__record-receipt { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--mn-hot); color: var(--mn-hot-ink); font-weight: 800; font-size: 0.82rem; text-decoration: none; }
.mn__record-empty { margin: 12px 0 0; color: var(--mn-dim); font-size: 0.88rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .mn__record { animation: none; } }
.mn__record-unlock span { display: block; }
.mn__fellow-note { margin-top: 6px; color: var(--mn-dim); font-size: 0.85rem; }
.mn__fellow-open { margin-top: 10px; }
.mn__fellow-form { margin-top: 12px; display: grid; gap: 6px; }

/* Verified actions on the feed, the share choice, and open missions under a
   thin feed. Phone first; nothing here needs a breakpoint. */
.mn__actcard { margin: 12px 0 4px; padding: 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,77,61,.16), rgba(255,77,61,.03)); box-shadow: inset 0 0 0 1px rgba(255,77,61,.35); }
.mn__actcard-eyebrow { margin: 0; color: var(--mn-hot); font-size: .66rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.mn__actcard-title { margin: 6px 0 4px; font-family: var(--mn-display); font-weight: 400; font-size: clamp(1.5rem, 7vw, 2rem); line-height: .98; text-transform: uppercase; overflow-wrap: anywhere; }
.mn__actcard-foot { margin: 0; color: var(--mn-dim); font-size: .78rem; font-weight: 700; }
.mn__actcard-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mn__actcard-row .mn__primary { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 10px 16px; text-decoration: none; }
.mn__actcard-row .mn__quiet { display: inline-flex; align-items: center; padding: 0 10px; text-decoration: underline; }
.mn__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 14px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--mn-rule-2); cursor: pointer; }
.mn__check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mn-hot); }
.mn__check span { display: grid; gap: 2px; color: var(--mn-dim); font-size: max(14px, .85rem); line-height: 1.4; }
.mn__check b { color: var(--mn-ink); }
.mn__feedmissions { margin-top: 28px; }
.mn__feedmission { display: grid; gap: 4px; width: 100%; margin-top: 10px; padding: 14px; border: 0; border-radius: 14px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); color: var(--mn-ink); font: inherit; text-align: left; cursor: pointer; }
.mn__feedmission b { font-size: 1.05rem; }
.mn__feedmission > span:last-child { color: var(--mn-dim); font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn__record-share { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--mn-hot); color: var(--mn-ink); font: 800 .8rem/1 var(--mn-ui); cursor: pointer; }
.mn__record-shared { color: var(--mn-dim); font-size: .78rem; font-weight: 700; }

/* Live: the strip above the feed, the watch screen and the studio. */
.mn__onair { margin: 0 0 18px; padding: 14px; border-radius: 18px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.mn__live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mn__live-k { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--mn-hot); font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.mn__live-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--mn-hot); box-shadow: 0 0 0 0 rgba(255,77,61,.6); animation: mnLivePulse 1.6s ease-out infinite; }
@keyframes mnLivePulse { to { box-shadow: 0 0 0 8px rgba(255,77,61,0); } }
@media (prefers-reduced-motion: reduce) { .mn__live-k i { animation: none; } }
.mn__golive { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mn-hot); color: var(--mn-hot-ink); font: 800 .9rem/1 var(--mn-ui); cursor: pointer; }
.mn__live-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 78%); gap: 10px; margin-top: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mn__livecard { display: grid; gap: 4px; min-height: 76px; padding: 12px 14px; border: 0; border-radius: 14px; background: linear-gradient(150deg, rgba(255,77,61,.22), rgba(255,77,61,.05)); box-shadow: inset 0 0 0 1px rgba(255,77,61,.4); color: var(--mn-ink); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.mn__livecard b { font-size: 1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn__livecard > span:last-child { color: var(--mn-dim); font-size: .8rem; }
.mn__livecard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mn-hot); }
.mn__live-empty { margin: 10px 0 0; color: var(--mn-dim); font-size: .9rem; }
.mn__livevideo { position: relative; background: #000; aspect-ratio: 16 / 9; }
.mn__livevideo video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mn__studio .mn__livevideo video { transform: scaleX(-1); }
.mn__livevideo-note { position: absolute; inset: auto 12px 12px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.6); color: var(--mn-ink); font-size: .85rem; }
.mn__livevideo-note[hidden] { display: none; }
.mn__livehost { margin: 0; padding: 10px 16px 0; color: var(--mn-dim); font-size: .9rem; font-weight: 700; }
.mn__livechat { max-height: 34vh; margin: 8px 0 0; padding: 0 16px; overflow-y: auto; list-style: none; }
.mn__livechat li { padding: 6px 0; border-bottom: 1px solid var(--mn-rule); font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.mn__livechat li b { margin-right: 4px; }
.mn__livechat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 16px; }
.mn__livechat-form .mn__primary { width: auto; margin: 0; }
.mn__livechat-form .mn__input { font-size: max(16px, 1rem); }
.mn__livewatch-foot { display: flex; justify-content: space-between; padding: 0 12px; }
.mn__studio-form { padding: 12px 16px 4px; }
.mn__studio-form .mn__input { font-size: max(16px, 1rem); }
.mn__studio-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 14px; }
.mn__studio-row .mn__primary { margin: 0; }
.mn__danger-fill { background: #b3261e !important; color: #fff !important; }
.mn__studio-rules { margin: 12px 0 0; color: var(--mn-dim); font-size: .82rem; line-height: 1.45; }
.mn__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 48rem) { .mn__live-track { grid-auto-columns: minmax(0, 40%); } }

/* Governed live directory: Live is a browse surface, not a decorative rail. */
.mn__onair--directory { padding: 16px; }
.mn__live-title { margin: 5px 0 0; max-width: 18ch; font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.02; letter-spacing: -.03em; }
.mn__live-filters { display: grid; gap: 8px; margin-top: 14px; }
.mn__live-filterrow { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: none; }
.mn__live-filterrow::-webkit-scrollbar { display: none; }
.mn__live-filterrow button {
  flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px;
  background: var(--mn-bg); box-shadow: inset 0 0 0 1px var(--mn-rule);
  color: var(--mn-dim); font: 800 .78rem/1 var(--mn-ui); cursor: pointer;
}
.mn__live-filterrow button.is-on { background: var(--mn-ink); color: var(--mn-bg); box-shadow: none; }
.mn__onair--directory .mn__live-track {
  display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0,1fr);
  overflow: visible; scroll-snap-type: none; gap: 10px;
}
.mn__onair--directory .mn__livecard { min-height: 154px; gap: 7px; align-content: start; }
.mn__livecard-top { display: flex; align-items: center; gap: 7px; }
.mn__livebadge { padding: 4px 7px; border-radius: 999px; background: rgba(255,77,61,.16); color: var(--mn-hot); font-size: .63rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mn__livebadge.is-soft { background: var(--mn-bg); color: var(--mn-dim); }
.mn__livecard strong { color: var(--mn-dim); font-size: .88rem; font-weight: 700; line-height: 1.35; }
.mn__livecard-host,.mn__livecard-metrics { color: var(--mn-dim); font-size: .78rem; }
.mn__livecard-object { display: grid; gap: 2px; margin-top: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(244,239,230,.055); font-size: .82rem; line-height: 1.3; }
.mn__livecard-object em { color: var(--mn-faint); font-size: .62rem; font-style: normal; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mn__live-empty { display: grid; gap: 4px; padding: 18px 4px 4px; }
.mn__live-empty b { color: var(--mn-ink); }
.mn__live-empty span { color: var(--mn-dim); font-size: .86rem; line-height: 1.45; }

.mn__live-context { display: grid; gap: 8px; padding: 10px 16px 0; }
.mn__live-object { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule); color: var(--mn-ink); text-decoration: none; }
.mn__live-object > span { color: var(--mn-hot); font-size: .66rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.mn__live-object b { font-size: 1rem; }
.mn__live-object p { margin: 0; color: var(--mn-dim); font-size: .83rem; line-height: 1.4; }
.mn__live-object em { color: var(--mn-gold); font-size: .8rem; font-style: normal; font-weight: 800; }
.mn__live-object .mn__primary { margin: 5px 0 0; }
.mn__live-roomline { margin: 0; color: var(--mn-faint); font-size: .75rem; font-weight: 700; }

.mn__studio-access,.mn__studio-stage-note { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--mn-bg); box-shadow: inset 0 0 0 1px var(--mn-rule); color: var(--mn-dim); font-size: .82rem; line-height: 1.45; }
.mn__studio-access b { color: var(--mn-ink); }
.mn__studio-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
.mn__studio-form > .mn__label,.mn__studio-grid .mn__label { margin-top: 10px; }
.mn__studio-form select.mn__input { min-height: 46px; appearance: auto; }
.mn__studio-stage-note { margin-top: 12px; margin-bottom: 0; }

@media (min-width: 44rem) {
  .mn__onair--directory .mn__live-track { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mn__studio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 70rem) {
  .mn__onair--directory .mn__live-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

.mn__delete h3 { margin: 0 0 6px; font-size: 1rem; }
.mn__delete p { color: var(--mn-dim); font-size: .9rem; line-height: 1.5; }
.mn__delete-go summary { min-height: 44px; display: flex; align-items: center; color: #ff9a91; font-weight: 800; cursor: pointer; }


/* ---------- cinematic depth pass ----------
   Keep the product architecture quiet and readable, but let major surfaces
   feel like places rather than flat panels. Existing first-party campaign
   artwork is used as atmosphere, never as content that must be read. */
.mn__manifesto,.mn__actionboard,.mn__understand,#mnMissionsView{position:relative;isolation:isolate;overflow:hidden}
.mn__manifesto::before,.mn__actionboard::before,.mn__understand::before,#mnMissionsView::before{
  content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;
  opacity:.28;filter:saturate(.8) contrast(1.08);transform:scale(1.035);
  transition:transform .9s var(--mn-ease),opacity .6s var(--mn-ease)
}
.mn__manifesto::after,.mn__actionboard::after,.mn__understand::after,#mnMissionsView::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,rgba(10,8,7,.97) 5%,rgba(10,8,7,.76) 54%,rgba(10,8,7,.38)),
             linear-gradient(0deg,rgba(10,8,7,.88),transparent 65%)
}
.mn__manifesto::before{background-image:url("../assets/img/equity-uprise-logo.webp");background-size:58%;background-repeat:no-repeat;background-position:88% 50%;opacity:.18;filter:grayscale(.15) saturate(1.15)}
.mn__actionboard::before{background-image:url("../assets/img/heal-the-3-cover.jpg");background-position:68% 45%;opacity:.22}
.mn__understand::before{background-image:url("../assets/img/cia-mind-control-cover.jpg");background-position:74% 50%;opacity:.24}
#mnMissionsView::before{background-image:url("../assets/img/equity-uprise-logo.webp");background-size:70%;background-repeat:no-repeat;background-position:115% 8%;opacity:.09}
.mn__manifesto,.mn__actionboard,.mn__understand{
  box-shadow:inset 0 0 0 1px rgba(244,239,230,.12),0 24px 70px -42px rgba(0,0,0,.95);
  transition:transform .35s var(--mn-ease),box-shadow .35s var(--mn-ease)
}
.mn__actionboard-grid article{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s var(--mn-spring),border-color .3s,background .3s
}
.mn__actionboard-grid article:active{transform:scale(.97)}
.mn__mission-strip a,.mn__understand>a{position:relative}
.mn__mission-strip a::after,.mn__understand>a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--mn-ease)}
.mn__mission-strip a:hover::after,.mn__understand>a:hover::after{transform:scaleX(1)}
.mn__post-card{transition:transform .28s var(--mn-ease),box-shadow .28s var(--mn-ease),border-color .28s}
.mn__post-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--mn-rule-2),0 22px 54px -38px rgba(0,0,0,.95)}
.mn__primary,.mn__post,.mn__follow.is-active{box-shadow:0 10px 28px -16px rgba(255,77,61,.72)}
@media (hover:hover){
  .mn__manifesto:hover::before,.mn__actionboard:hover::before,.mn__understand:hover::before{transform:scale(1.07);opacity:.32}
}
@media (prefers-reduced-motion:reduce){
  .mn__manifesto::before,.mn__actionboard::before,.mn__understand::before,#mnMissionsView::before,
  .mn__manifesto,.mn__actionboard,.mn__understand,.mn__actionboard-grid article,.mn__post-card{transition:none!important;animation:none!important}
}

/* Organization-grade group fronts */
.mng__org{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--mn-bg);box-shadow:inset 0 0 0 1px var(--mn-rule)}
.mng__org span,.mng__campaign span{color:var(--mn-faint);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mng__org strong{font-size:.9rem}.mng__org b{padding:4px 7px;border-radius:999px;background:var(--mn-ink);color:var(--mn-bg);font-size:.65rem}
.mng__campaigns{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
.mng__campaign{display:grid;gap:4px;padding:14px;border-radius:14px;background:var(--mn-raise-2);color:var(--mn-ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--mn-rule-2)}
.mng__campaign strong{font-size:1.05rem}.mng__campaign em{color:var(--mn-gold);font-size:.8rem;font-style:normal;font-weight:800}
@media (min-width:700px){.mng__campaigns{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mn__fbi-link { margin: 0 0 12px; }


/* Mission execution: description -> camera -> review -> proof. */
.mn__mission-camera{
  margin:1rem 0;padding:1rem;border-radius:18px;
  background:linear-gradient(145deg,rgba(255,77,61,.15),rgba(244,239,230,.055));
  box-shadow:inset 0 0 0 1px rgba(244,239,230,.16);
}
.mn__mission-camera .mn__eyebrow{margin:0 0 .55rem}
.mn__camera-go{
  width:100%;min-height:64px;border:0;border-radius:16px;cursor:pointer;
  background:#f4efe6;color:#15110f;font:900 max(17px,1.05rem)/1.1 var(--mn-ui,Manrope,system-ui,sans-serif);
  letter-spacing:-.01em;
}
.mn__camera-go::before{content:"●";display:inline-block;margin-right:.55rem;color:#d92d20;font-size:.9rem}
.mn__capture-preview{
  margin-top:.75rem;overflow:hidden;border-radius:14px;background:#050404;
  aspect-ratio:9/16;max-height:62svh;
}
.mn__capture-preview img,.mn__capture-preview video{
  display:block;width:100%;height:100%;object-fit:contain;background:#050404;
}
.mn__proof-more{margin:.85rem 0 1rem;padding:.75rem .85rem;border-radius:14px;background:rgba(244,239,230,.055)}
.mn__proof-more summary{cursor:pointer;font-weight:800;color:var(--mn-dim,#b8aca0)}
.mn__proof-more[open] summary{margin-bottom:.8rem}
@media(min-width:700px){
  .mn__capture-preview{aspect-ratio:16/10}
}

/* Clips: paid music clipping (js/mnet-clips.js). Phone first; wider screens only add room. */
.mn__clipstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0; }
.mn__clipstats div { display: grid; gap: .1rem; padding: .6rem; border-radius: .6rem; background: rgba(127, 127, 127, .12); min-width: 0; }
.mn__clipstats b { font-size: clamp(.9rem, 3.6vw, 1.1rem); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mn__clipstats small { opacity: .75; }
.mn__cliplist { margin: .5rem 0; padding-left: 1.1rem; display: grid; gap: .35rem; overflow-wrap: anywhere; }
.mn__cliplist code { font-size: .95em; }
.mn__cliprow { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .5rem; }
.mn__cliprow .mn__input, .mn__clipclaimed .mn__input { width: 100%; min-width: 0; font-size: max(16px, 1rem); }
.mn__clipsong { font-weight: 600; margin: .1rem 0 .4rem; }
.mn__clipclaimed { border-top: 1px solid rgba(127, 127, 127, .25); margin-top: .75rem; padding-top: .75rem; display: grid; gap: .4rem; min-width: 0; }
@media (min-width: 40rem) {
  .mn__cliprow { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; align-items: center; }
  .mn__cliprow:has(select + input + select) { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 11rem) auto; }
}

/* Human Uprise four-tab primary navigation; secondary destinations remain accessible. */
.mn__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;overflow:visible}
.mn__tabs>button{min-width:0;white-space:nowrap}
.mn__quicklinks{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 0 1rem}
.mn__quicklinks button{font:inherit;font-size:.8rem;border:0;background:transparent;color:inherit;opacity:.7;padding:.35rem .5rem;cursor:pointer}
.mn__quicklinks button:hover,.mn__quicklinks button:focus-visible{opacity:1;text-decoration:underline}
.mn__action--share{font:inherit;font-size:.85rem;cursor:pointer}

/* ---------- the World screen ----------
   Owner's contract (docs/action-network/WORLD-SCREEN-UX-HANDOFF-20261014.md):
   one persistent screen with the globe on top (45-50%), a context strip
   (~15%) and the real member feed (30-35%) that scrolls on its own, all on
   screen at first load. js/mnet.js sizes the view to the room between the
   header and the app bar (--mn-world-h) and adds .mn-world-fit when that
   room is tall enough; otherwise (a phone on its side) the same pieces
   stack and the page scrolls. Phone first; wider screens only add room. */
.mn__world-home { position: relative; height: clamp(240px, 56dvh, 520px); margin: 0 -16px; overflow: hidden; background: #050912; border-block: 1px solid var(--mn-rule); }
.mn__world-frame { display: block; width: 100%; height: 100%; border: 0; background: #050912; }
.mn__world-expand { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 77, 61, 0.7); border-radius: 999px; background: rgba(10, 8, 7, 0.86); color: var(--mn-ink); font-size: 0.8rem; font-weight: 800; text-decoration: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* the strip: what the globe is showing and what you can do about it */
.mn__world-context { display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: 10px 0; border-bottom: 1px solid var(--mn-rule); }
.mn__world-idle .mn__eyebrow, .mn__world-focus .mn__eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn__world-caption { margin: 6px 0 0; color: var(--mn-dim); font-size: 0.85rem; line-height: 1.4; }
.mn__world-focus-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mn__world-focus h2 { margin: 2px 0 8px; font-size: 1.05rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn__world-focus-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mn__world-go, .mn__world-filter, .mn__world-close { min-height: 36px; border-radius: 999px; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.mn__world-go { padding: 0 16px; border: 0; background: var(--mn-hot); color: var(--mn-hot-ink); }
.mn__world-filter { padding: 0 14px; border: 1px solid var(--mn-rule-2); background: transparent; color: var(--mn-ink); }
.mn__world-filter[aria-pressed="true"] { border-color: var(--mn-hot); background: rgba(255, 77, 61, 0.14); }
.mn__world-close { flex: none; width: 36px; padding: 0; border: 1px solid var(--mn-rule-2); background: transparent; color: var(--mn-dim); }
.mn__world-feed { padding-top: 12px; }
/* the post's door back to the map */
.mn__globe-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--mn-rule-2); border-radius: 999px; background: transparent; color: var(--mn-ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.mn__globe-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mn-hot); box-shadow: 0 0 0 3px rgba(255, 77, 61, 0.25); }

/* one screen: nothing but the feed scrolls, so dragging the Earth never
   scrolls the page and reading the feed never turns the Earth */
html.mn-world-fit, html.mn-world-fit body { overflow: hidden; overscroll-behavior: none; }
.mn-world-fit .mn { padding-bottom: 0; }
/* the bar settles into its slim state, as it does once a page scrolls,
   so the Earth gets the room */
.mn-world-fit .mn__top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.mn-world-fit .mn__top .mn__brand-mark { transform: scale(0.88); }
.mn-world-fit .mn__top .mn__brand strong { font-size: 1.3rem; }
.mn-world-fit #mnFeedView:not([hidden]) { display: flex; flex-direction: column; height: var(--mn-world-h, 70dvh); }
.mn-world-fit .mn__world-home { flex: 49 1 0; min-height: 0; height: auto; }
.mn-world-fit .mn__world-context { flex: none; min-height: clamp(92px, 14dvh, 150px); }
/* the feed runs to the bottom of the screen, under the floating bar; its own padding keeps the last post reachable (owner, 2026-10-15) */
.mn-world-fit .mn__world-feed { flex: 30 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--mn-bar-clear, 96px) + 4px); }
@media (min-width: 600px) {
  .mn__world-home { margin: 0; border: 1px solid var(--mn-rule); border-radius: 22px; }
}
/* desktop: the Earth and its strip on the left, the feed beside it */
@media (min-width: 1100px) {
  .mn-world-fit .mn { max-width: 76rem; }
  .mn-world-fit #mnFeedView:not([hidden]) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 24px; }
  .mn-world-fit .mn__world-home { grid-column: 1; grid-row: 1; }
  .mn-world-fit .mn__world-context { grid-column: 1; grid-row: 2; border-bottom: 0; }
  .mn-world-fit .mn__world-feed { grid-column: 2; grid-row: 1 / span 2; padding-top: 0; }
}

/* ---------- the account menu ----------
   Three destinations in the bar, one small account menu, everything else
   in context (owner, 2026-10-14): whose account, View profile, Messages,
   Settings & account, Sign out. Alerts are the bell. */
.mn__avatar-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--mn-hot); box-shadow: 0 0 0 2px var(--mn-bg); }
.mn__menu { position: absolute; z-index: 30; top: calc(100% - 4px); right: 12px; display: grid; width: min(17rem, calc(100vw - 24px)); max-height: min(70dvh, 32rem); overflow-y: auto; padding: 6px; border-radius: 18px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule-2), 0 24px 48px -18px rgba(0, 0, 0, 0.9); }
.mn__menu[hidden] { display: none; }
.mn__menu button, .mn__menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--mn-ink); font: inherit; font-size: max(16px, 0.95rem); font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.mn__menu button:hover, .mn__menu a:hover, .mn__menu button:focus-visible, .mn__menu a:focus-visible { background: var(--mn-raise-2); }
.mn__menu-who { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--mn-rule); }
.mn__menu-face { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--hue, 350) 70% 42%) center / cover no-repeat; color: #fff; font-weight: 800; }
.mn__menu-id { display: grid; min-width: 0; }
.mn__menu-id strong, .mn__menu-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn__menu-id small { color: var(--mn-dim); font-size: 0.82rem; }
.mn__menu-id small:empty { display: none; }
.mn__menu .mn__menu-out { margin-top: 6px; border-top: 1px solid var(--mn-rule); border-radius: 0 0 12px 12px; color: var(--mn-dim); }
.mn__bell-count { position: absolute; top: -3px; right: -4px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--mn-hot); color: #fff; font-size: 0.66rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--mn-bg); }
.mn__bell-count[hidden] { display: none; }
.mn__to-world { display: inline-flex; align-items: center; min-height: 40px; margin: 4px 0 10px; padding: 0 14px; border: 1px solid var(--mn-rule-2); border-radius: 999px; background: transparent; color: var(--mn-ink); font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; }
.mn__to-world[hidden] { display: none; }
@media (min-width: 600px) {
  .mn__menu { right: 24px; }
}

/* On a phone the bar floats over the top of the Earth (starfield, never the
   planet: the frame centres it lower), so the globe gets the room the
   header would take. js/mnet.js adds .mn-world-overlay below 600px only;
   wider screens keep the bar in its own row. */
.mn-world-overlay .mn__top { position: fixed; top: 0; left: 0; right: 0; margin: 0; background: linear-gradient(180deg, rgba(5, 9, 18, 0.88), rgba(5, 9, 18, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.mn-world-overlay .mn__world-expand { top: calc(64px + env(safe-area-inset-top, 0px)); }

/* posts about the mission picked on the Earth */
.mn__post-card.is-on-globe { box-shadow: inset 0 0 0 1px rgba(255, 77, 61, 0.65); }
.mn__post-card[data-post-id] { cursor: default; }

/* ---------- guests on the World ----------
   Same screen, read-only: public posts, Share works, everything else is a
   door to sign in. The composer is replaced by a plain invitation. */
.mn__guest-bar { display: flex; gap: 6px; align-items: center; }
.mn__guest-bar[hidden] { display: none; }
/* a guest's way in is in the header from the first paint: the head of mnet.html already knows a guest (html.mn-guest) before
   js/mnet.js unhides it, so the header does not shift when it does (owner, 2026-10-20: no flashes) */
html.mn-guest .mn__guest-bar[hidden] { display: flex !important; }
.mn__guest-in, .mn__guest-join { min-height: 40px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.mn__guest-in { border: 1px solid var(--mn-rule-2); background: rgba(10, 8, 7, 0.6); color: var(--mn-ink); }
.mn__guest-join { border: 0; background: var(--mn-hot); color: var(--mn-hot-ink); }
.mn__guest-card { display: none; padding: 14px 16px; border-radius: 20px; background: var(--mn-raise); box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
.mn__guest-card p { margin: 0 0 10px; color: var(--mn-dim); font-size: 0.9rem; line-height: 1.45; }
.mn__guest-card strong { color: var(--mn-ink); }
.mn__guest-card-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mn__finish-card:not([hidden]) { display: block; }
/* a member whose sign-in ended is a guest with one card: the sign-in-again card, not the guest card beside it */
.mn-stall-signin #mnGuestCard { display: none; }
#mnStallSignIn[hidden] { display: none; }
.mn__finish-card.is-nudged { animation: mn-nudge 0.5s var(--mn-ease); }
@keyframes mn-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .mn__finish-card.is-nudged { animation: none; } }
/* THE DATA LAYERS' LINE over the Earth: the counts, and the Vaunt lead with Flights */
.mn__world-layers { position: absolute; z-index: 4; left: 12px; bottom: 82px; max-width: min(74%, 440px); margin: 0; padding: 8px 10px; border-radius: 12px; background: rgba(5, 5, 7, 0.74); color: #f4efe6; font-size: 0.78rem; font-weight: 600; line-height: 1.35; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mn__world-layers[hidden] { display: none; }
.mn__world-layers a.mn__world-lead { color: #ffb347; font-weight: 800; text-decoration: none; }
.mn__world-layers a.mn__world-lead:hover, .mn__world-layers a.mn__world-lead:focus-visible { text-decoration: underline; }
.mn-guest .mn__guest-card { display: block; }
.mn-guest #mnComposer, .mn-guest .mn__post-actions [data-action="delete"] { display: none; }
.mn__media-locked { display: block; width: 100%; min-height: 72px; margin-top: 10px; border: 1px dashed var(--mn-rule-2); border-radius: 14px; background: var(--mn-raise-2); color: var(--mn-dim); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }

/* a phone on its side: the Earth on the left, the strip and the feed on the
   right, one screen (js/mnet.js adds .mn-world-side when the room is short
   and wide) */
.mn-world-side .mn { max-width: none; }
.mn-world-side #mnFeedView:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 16px; }
.mn-world-side .mn__world-home { grid-column: 1; grid-row: 1 / span 2; }
.mn-world-side .mn__world-context { grid-column: 2; grid-row: 1; min-height: 0; padding-top: 0; }
.mn-world-side .mn__world-feed { grid-column: 2; grid-row: 2; padding-top: 8px; }

/* ---------- comments, inside the post they belong to ----------
   The thread opens in the feed region (js/mnet.js builds it); the globe
   stays put. Inputs at 16px+ so iOS never zooms the page. */
.mn__comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mn-rule); }
.mn__comments-list { display: grid; gap: 6px; margin-bottom: 8px; color: var(--mn-dim); font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.mn__comments-list p { margin: 0; }
.mn__comments-list strong { color: var(--mn-ink); }
.mn__comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mn__comment-form input { min-width: 0; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--mn-raise-2); color: var(--mn-ink); font: inherit; font-size: max(16px, 0.95rem); box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
.mn__comment-form button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mn-ink); color: var(--mn-bg); font: inherit; font-weight: 800; cursor: pointer; }
.mn__comment-form button:disabled { opacity: 0.55; }

/* the header already says who you are on the World screen, so the
   house's floating signed-in chip stays off the feed */
.mn-world-on .mcc-auth-chip, .mn-gate-on .mcc-auth-chip { display: none; }

/* a guest's header: two short pills that never wrap, and a brand that
   gives way first */
.mn__brand > span:last-child { min-width: 0; overflow: hidden; }
.mn__brand strong, .mn__brand small { overflow: hidden; text-overflow: ellipsis; }
.mn__guest-in, .mn__guest-join { flex: none; white-space: nowrap; padding: 0 12px; }
.mn__gate-why { display: grid; gap: 8px; margin: 4px 0 18px; }
.mn__gate-why[hidden] { display: none; }
.mn__gate-why p { margin: 0; color: var(--mn-gold); font-weight: 700; }
.mn__gate-why p:empty { display: none; }

/* ================================================================
   THE WORLD LOOK (owner's mockups, 2026-10-14)
   Graphite and one red: brushed-steel panels, dark glass pills with a
   faint red rim, chrome type for the wordmark, the Earth in a bezel from
   tablet width. Scoped to the World screen (.mn-world-on); every other
   room keeps the house look. Phone first; wider screens only add room.
   ================================================================ */
html.mn-world-on, html.mn-world-on body { background: #050507; }
.mn-world-on .mn {
  --mn-bg: #07080a; --mn-raise: #121418; --mn-raise-2: #1b1e24;
  --mn-ink: #f5f6f8; --mn-dim: #a6abb5; --mn-faint: #6d727c;
  --mn-rule: rgba(255, 255, 255, 0.08); --mn-rule-2: rgba(255, 255, 255, 0.14);
  --mn-hot: #ff2a4d; --mn-hot-ink: #ffffff;
  /* the material: steel panels, dark glass, a red rim and its glow */
  --w-steel: linear-gradient(180deg, #181b21, #0d0f13);
  --w-steel-2: linear-gradient(180deg, #1f2329, #121419);
  --w-glass: rgba(13, 14, 18, 0.8);
  --w-edge: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --w-rim: 0 0 0 1px rgba(255, 42, 77, 0.3), 0 0 16px -6px rgba(255, 42, 77, 0.55);
  --w-glow: 0 14px 34px -16px rgba(255, 42, 77, 0.6);
  --w-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.95);
}
.mn-world-on.mn-world-overlay .mn__top { background: linear-gradient(180deg, rgba(5, 5, 7, 0.92), rgba(5, 5, 7, 0)); }

/* header: HUMAN UPRISE, and only that (owner, 2026-10-14), in chrome type
   with a red rule under it (no drawn mark), the search bar, and round glass
   buttons. The name is set in type; a mark is the owner's to supply. */
.mn-world-on .mn__brand-mark, .mn-world-on .mn__brand small { display: none; }
.mn-world-on .mn__top .mn__brand strong { display: block; font-family: var(--mn-display); font-weight: 400; font-size: 1.45rem; line-height: 0.9; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #ffffff 0%, #dfe2e7 55%, #9ba1ab 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mn-world-on .mn__top .mn__brand strong::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--mn-hot); box-shadow: 0 0 12px rgba(255, 42, 77, 0.85); }
.mn-world-on .mn__brand { flex: none; margin-right: 0; }
.mn-world-on .mn__bell, .mn-world-on .mn__avatar-btn { background: var(--w-glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--w-rim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mn-world-on .mn__avatar-dot, .mn-world-on .mn__bell-count { box-shadow: 0 0 0 2px #0a0b0e, 0 0 10px rgba(255, 42, 77, 0.8); }

/* search: a bar in the header row at every width (owner's iPhone mockup:
   "a search bar up there on top"), between the wordmark and the bell */
.mn__search { display: none; }
.mn-world-on .mn__search { display: flex; flex: 1 1 auto; min-width: 0; }
.mn__search svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mn__search { align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--w-glass); box-shadow: var(--w-edge), 0 10px 30px -14px rgba(0, 0, 0, 0.9); color: var(--mn-dim); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mn__search input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--mn-ink); font: inherit; font-size: max(16px, 0.92rem); outline: none; text-overflow: ellipsis; }
/* a guest's phone header keeps Sign in; Create account is in the card just below, and Join joins the row from 600px */
.mn-world-on .mn__guest-join { display: none; }
.mn-world-on .mn__guest-in { background: var(--w-glass); box-shadow: var(--w-edge); border: 0; }
.mn__search input::placeholder { color: var(--mn-faint); opacity: 1; }
.mn__search:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), var(--w-rim), 0 10px 30px -14px rgba(0, 0, 0, 0.9); }

/* the Earth: black space, a bezel from tablet width, glass pills over it */
.mn-world-on .mn__world-home, .mn-world-on .mn__world-frame { background: #050507; }
.mn-world-on .mn__world-home { border-color: var(--mn-rule); }
.mn-world-on .mn__world-expand { border: 0; background: var(--w-glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--w-rim); }
/* the corner tag has room from tablet width; on a phone the credit line owns that edge */
.mn__world-tag { display: none; position: absolute; z-index: 2; left: 12px; bottom: 10px; align-items: center; gap: 7px; margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.mn__world-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-hot); box-shadow: 0 0 8px rgba(255, 42, 77, 0.9); }
.mn__world-tag b { color: #fff; }
.mn__world-tag b:empty { display: none; }

/* the mission card in the context strip: a steel panel with a red rim */
.mn-world-on .mn__world-context { border-bottom: 0; padding: 6px 0; }
.mn-world-fit.mn-world-on .mn__world-context { min-height: 0; }
.mn__mission-card { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 10px 40px 10px 10px; border-radius: 20px; background: var(--w-steel); box-shadow: var(--w-edge), 0 0 0 1px rgba(255, 42, 77, 0.22), var(--w-glow), var(--w-shadow); }
.mn__mission-card[hidden] { display: none; }
.mn__mission-art { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: radial-gradient(circle at 50% 50%, rgba(255, 42, 77, 0.38), rgba(255, 42, 77, 0) 62%), repeating-radial-gradient(circle at 50% 50%, rgba(255, 42, 77, 0.16) 0 1px, transparent 1px 9px), #121419; color: #ff6680; box-shadow: inset 0 0 0 1px rgba(255, 42, 77, 0.4); }
.mn__mission-art svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mn__mission-body { min-width: 0; }
.mn__mission-meta { display: flex; gap: 10px; margin: 0; overflow: hidden; color: var(--mn-dim); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.mn__mission-meta > span { flex: none; }
.mn__mission-meta > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mn__mission-where::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--mn-hot); box-shadow: 0 0 0 3px rgba(255, 42, 77, 0.2), 0 0 8px rgba(255, 42, 77, 0.8); vertical-align: 1px; }
.mn__mission-kind { padding: 1px 8px; border: 1px solid rgba(72, 199, 142, 0.5); border-radius: 999px; color: #8be3b7; text-transform: capitalize; }
.mn__mission-card h2 { margin: 3px 0 0; color: var(--mn-ink); font-size: 1.02rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn__mission-desc { display: none; margin: 4px 0 0; color: var(--mn-dim); font-size: 0.86rem; line-height: 1.45; }
.mn__mission-desc:empty { display: none !important; }
.mn__mission-stats { color: var(--mn-faint); }
.mn__mission-stats[hidden] { display: none; }
.mn__mission-actions { grid-column: 1 / -1; display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mn__world-go, .mn__world-locate, .mn__mission-card .mn__world-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.mn__world-go svg, .mn__world-locate svg, .mn__world-filter svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mn__world-go { border: 0; background: linear-gradient(180deg, #ff3d5e, #c4102c); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px -10px rgba(255, 42, 77, 0.95); }
.mn__world-go--eup, .mn-world-on .mn__world-go--eup { background: var(--w-glass); color: var(--mn-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--w-rim); }
.mn__mission-card .mn__fund-line { grid-column: 1 / -1; margin-top: 2px; }
.mn__world-locate, .mn__mission-card .mn__world-filter { border: 0; background: var(--w-glass); color: var(--mn-ink); box-shadow: var(--w-edge); }
.mn__mission-card .mn__world-filter[aria-pressed="true"] { background: rgba(255, 42, 77, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 42, 77, 0.6); }
.mn__mission-card .mn__world-close { position: absolute; top: 8px; right: 8px; width: 30px; min-height: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--w-glass); box-shadow: var(--w-edge); font-size: 0.8rem; }

/* the feed band starts a breath below the strip (the tab row that used to make that room is gone) */
.mn-world-on .mn__world-feed { padding-top: 10px; }


/* posts on the World: steel cards, picture on the right, heart and counts */
.mn-world-on #mnFeed .mn__post-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; padding: 14px; border-radius: 18px; background: var(--w-steel); box-shadow: var(--w-edge), var(--w-shadow); }
.mn-world-on #mnFeed .mn__post-card.is-on-globe { box-shadow: var(--w-edge), 0 0 0 1px rgba(255, 42, 77, 0.55), var(--w-glow), var(--w-shadow); }
.mn-world-on #mnFeed .mn__post-card > * { grid-column: 1; min-width: 0; }
.mn-world-on #mnFeed .mn__post-card:has(> .mn__post-media), .mn-world-on #mnFeed .mn__post-card:has(> .mn__media-locked) { grid-template-columns: minmax(0, 1fr) 104px; }
.mn-world-on #mnFeed .mn__post-card > .mn__post-media, .mn-world-on #mnFeed .mn__post-card > .mn__media-locked { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: relative; margin: 0; }
.mn-world-on #mnFeed .mn__post-card > .mn__post-media { display: block; cursor: zoom-in; }
.mn-world-on #mnFeed .mn__post-media > .mn__post-media-item:not(:first-child) { display: none; }
.mn-world-on #mnFeed .mn__post-media .mn__post-media-item { aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.mn-world-on #mnFeed .mn__post-media .mn__post-media-item img, .mn-world-on #mnFeed .mn__post-media .mn__post-media-item video { height: 100%; object-fit: cover; }
.mn-world-on #mnFeed .mn__post-media[data-count]:not([data-count="1"])::after { content: "1/" attr(data-count); position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(5, 5, 7, 0.8); color: #fff; font-size: 0.68rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
/* a tap on the picture opens all of them across the card */
.mn-world-on #mnFeed .mn__post-card.is-media-open { grid-template-columns: minmax(0, 1fr); }
.mn-world-on #mnFeed .mn__post-card.is-media-open > .mn__post-media { grid-column: 1; grid-row: auto; display: grid; margin-top: 10px; cursor: zoom-out; }
.mn-world-on #mnFeed .mn__post-card.is-media-open .mn__post-media > .mn__post-media-item:not(:first-child) { display: block; }
.mn-world-on #mnFeed .mn__post-card.is-media-open .mn__post-media::after { content: none; }
.mn-world-on #mnFeed .mn__media-locked { min-height: 104px; margin: 0; font-size: 0.72rem; padding: 8px; }
.mn-world-on #mnFeed .mn__post-head { gap: 10px; }
.mn-world-on #mnFeed .mn__author-avatar { width: 40px; height: 40px; }
.mn-world-on #mnFeed .mn__post-body { margin: 8px 0 0; color: #e3e6ec; font-size: 0.95rem; line-height: 1.5; }
.mn-world-on #mnFeed .mn__post-actions { grid-column: 1 / -1; margin: 8px -6px -4px; }
.mn-world-on .mn__fund-line { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--mn-rule-2); }
.mn-world-on #mnFeed .mn__actcard .mn__fund { background: var(--w-glass); border: 0; box-shadow: var(--w-edge); }
.mn-world-on #mnFeed .mn__actcard-stats { color: #f3d7dc; }
/* MISSION ATTACHED: the red banner inside a post that carries a mission */
.mn-world-on #mnFeed .mn__actcard { border-radius: 16px; background: linear-gradient(120deg, rgba(196, 16, 44, 0.6), rgba(70, 10, 22, 0.72) 55%, rgba(16, 11, 13, 0.92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 42, 77, 0.45); }
.mn-world-on #mnFeed .mn__actcard-eyebrow { color: #ffb3c0; }
.mn-world-on #mnFeed .mn__actcard-title { font-size: clamp(1.3rem, 5.5vw, 1.7rem); color: #fff; }
.mn-world-on #mnFeed .mn__actcard-foot { color: #f3d7dc; }
.mn-world-on #mnFeed .mn__actcard-row .mn__primary { min-height: 40px; border-radius: 999px; background: var(--w-glass); color: var(--mn-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--w-rim); }
.mn-world-on #mnFeed .mn__actcard-row .mn__primary::after { content: "\203A"; margin-left: 4px; font-size: 1.1em; line-height: 1; }
  .mn-world-on #mnFeed .mn__actcard-row .mn__primary--eup::after { content: none; } /* the emblem stands alone */
.mn-world-on #mnFeed .mn__globe-chip { border: 0; background: var(--w-glass); box-shadow: var(--w-edge); }
.mn-world-on .mn__composer { background: var(--w-glass); box-shadow: var(--w-edge); }
.mn-world-on .mn__create { background: var(--w-glass); box-shadow: var(--w-edge); }
.mn-world-on .mn__guest-card { position: relative; overflow: hidden; margin-bottom: 12px; padding: 18px 16px 16px; background: linear-gradient(100deg, rgba(7, 8, 10, 0.94) 30%, rgba(7, 8, 10, 0.55)), url("../assets/img/rally/rally-01.jpg") 70% 40% / cover no-repeat, #0d0f13; box-shadow: var(--w-edge), var(--w-shadow); }
.mn-world-on .mn__guest-card p { color: #d6d9e0; }
.mn-world-on .mn__guest-card strong { display: block; margin-bottom: 4px; color: #fff; font-size: 1.12rem; }
.mn-world-on .mn__empty { background: var(--w-steel); box-shadow: var(--w-edge); }
.mn-world-on .mn__menu { background: #121418; box-shadow: var(--w-edge), 0 24px 48px -18px rgba(0, 0, 0, 0.95); }

@media (min-width: 600px) {
  .mn-world-on .mn__search { max-width: 26rem; margin: 0 8px 0 auto; padding: 0 16px; }
  .mn-world-on .mn__top .mn__brand strong { font-size: 1.9rem; }
  .mn-world-on .mn__guest-join { display: inline-flex; align-items: center; }
  /* the Earth in a bezel, with its corner tag */
  .mn-world-on .mn__world-home { margin: 0; border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px #000, 0 0 44px -18px rgba(255, 42, 77, 0.55), var(--w-shadow); }
  .mn__world-tag { display: inline-flex; }
  .mn__mission-card { grid-template-columns: 92px minmax(0, 1fr) auto; padding: 14px 40px 14px 14px; gap: 6px 14px; }
  .mn__mission-meta { flex-wrap: wrap; white-space: normal; }
  .mn__mission-art { width: 92px; height: 100%; min-height: 96px; grid-row: 1; border-radius: 16px; }
  .mn__mission-art svg { width: 38px; height: 38px; }
  .mn__mission-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* two lines of title from tablet width; the three action rows beside it set the card's height anyway */
  .mn__mission-card h2 { font-size: 1.2rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mn__mission-actions { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); grid-auto-flow: dense; gap: 6px; align-self: center; }
  .mn__mission-actions > * { min-width: 0; }
  /* the emblem and the posts filter span the column; Fund, Locate and All missions share a row, so the card stays three rows tall */
  #mnWorldFocusJoin, #mnWorldFocusFilter { grid-column: 1 / -1; min-width: 9.5rem; }
  .mn__mission-card .mn__fund-line { grid-column: 1 / -1; grid-row: 2; }
  .mn-world-on #mnFeed .mn__post-card:has(> .mn__post-media), .mn-world-on #mnFeed .mn__post-card:has(> .mn__media-locked) { grid-template-columns: minmax(0, 1fr) 180px; }
  .mn-world-on #mnFeed .mn__post-card { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .mn__mission-card { transition: none; } }

/* a phone on its side: the strip keeps to one tight card so the feed keeps
   its half of the right column */
.mn-world-side .mn__mission-card { grid-template-columns: minmax(0, 1fr); padding: 8px 36px 8px 10px; gap: 6px; }
.mn-world-side .mn__mission-art { display: none; }
.mn-world-side .mn__mission-card h2 { display: block; white-space: nowrap; font-size: 0.95rem; }
.mn-world-side .mn__mission-actions .mn__world-filter span { display: none; }
.mn-world-side .mn__mission-actions { grid-column: 1; grid-row: auto; display: flex; flex-direction: row; align-self: auto; }
.mn-world-side .mn__mission-actions > *, .mn-world-side #mnWorldFocusJoin, .mn-world-side #mnWorldFocusFilter { min-width: 0; }
.mn-world-side .mn__mission-desc { display: none; }
.mn-world-side .mn__mission-meta { flex-wrap: nowrap; white-space: nowrap; }

/* the card's meta on a phone: Latest, the place, the counts; the kind is
   already the art. Labels: short on a phone, whole from 600px. */
.mn__mission-flag { flex: none; padding: 1px 7px; border: 1px solid rgba(255, 42, 77, 0.7); border-radius: 999px; background: rgba(255, 42, 77, 0.08); color: #ff5c78; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mn__mission-flag[hidden] { display: none; }
.mn__mission-meta > .mn__mission-where { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
.mn__mission-meta > .mn__mission-stats { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mn__mission-kind { display: none; }
.mn__label-long { display: none; }
.mn__world-go, .mn__world-locate, .mn__mission-card .mn__world-filter { padding: 0 11px; }
/* on a phone the action row may use the room the ✕ keeps free above it */
.mn__mission-actions { gap: 6px; margin-right: -30px; }
@media (min-width: 600px) { .mn__mission-actions { gap: 8px; margin-right: 0; } }
@media (min-width: 600px) {
  .mn__mission-kind { display: inline; }
  .mn__label-long { display: inline; }
  .mn__label-short { display: none; }
  .mn__mission-meta > .mn__mission-where { max-width: none; }
}
.mn__mission-meta > span.mn__mission-flag { flex: none; overflow: visible; }
.mn__stats-more { display: none; }
@media (min-width: 600px) { .mn__stats-more { display: inline; } }

.mn__empty-row { margin: 14px 0 0; }

/* LIVE over the Earth: shown only while something is on air; opens the
   live rooms. Top left of the globe, clear of "Full world ↗" on the right. */
.mn__world-live { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ff3d5e, #c4102c); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px -12px rgba(255, 42, 77, 0.95); }
.mn__world-live[hidden] { display: none; }
.mn__world-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: mnLivePulse 1.6s ease-out infinite; }
.mn__world-live b:empty { display: none; }
.mn-world-overlay .mn__world-live { top: calc(64px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { .mn__world-live i { animation: none; } }
.mn__attach[hidden] { display: none; }
/* the Clips door, one quiet line at the top of the feed while campaigns are open (it used to be a card under the Music tab; the tabs are gone) */
.mn__clipdoor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: var(--w-glass); box-shadow: var(--w-edge); }
.mn__clipdoor[hidden] { display: none; }
.mn__clipdoor p { flex: 1 1 200px; min-width: 0; margin: 0; color: var(--mn-dim); font-size: 0.82rem; line-height: 1.4; }
.mn__clipdoor b { color: var(--mn-ink); }
.mn__clipdoor .mn__world-go { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font-size: 0.78rem; white-space: nowrap; }

/* the search suggestions: under the field, never wider than it, rows a
   thumb tall, its own scroll so the keyboard never pushes it off screen */
.mn__search { position: relative; }
/* on a phone the panel spans the screen under the floating header, not just the field */
.mn-world-overlay .mn__suggest { position: fixed; left: 12px; right: 12px; top: calc(62px + env(safe-area-inset-top, 0px)); }
.mn__suggest { position: absolute; z-index: 32; top: calc(100% + 6px); left: 0; right: 0; display: grid; max-height: min(52dvh, 26rem); overflow-y: auto; padding: 6px; border-radius: 18px; background: #121418; box-shadow: var(--w-edge), 0 24px 48px -18px rgba(0, 0, 0, 0.95); }
.mn__suggest[hidden] { display: none; }
.mn__suggest-k { margin: 8px 10px 2px; color: var(--mn-faint); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mn__suggest button { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--mn-ink); font: inherit; font-size: max(16px, 0.92rem); font-weight: 700; text-align: left; cursor: pointer; }
.mn__suggest button span, .mn__suggest button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn__suggest button small { color: var(--mn-dim); font-size: 0.78rem; font-weight: 600; }
.mn__suggest button:hover, .mn__suggest button:focus-visible, .mn__suggest button.is-hl { background: var(--mn-raise-2); }
.mn__suggest-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--mn-rule); }
#mnSuggestRows:empty + .mn__suggest-foot { margin-top: 0; border-top: 0; }
.mn__suggest-foot button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mn-rule-2); font-size: max(16px, 0.84rem); }
.mng__query { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--mn-ink); font-weight: 700; }
.mng__query[hidden] { display: none; }
.mng__query button { min-height: 36px; padding: 0 12px; border: 1px solid var(--mn-rule-2); border-radius: 999px; background: transparent; color: var(--mn-ink); font: inherit; font-size: 0.85rem; cursor: pointer; }

/* EXPLORE THE WORLD: the idle strip (a guest's first view), compact enough
   to stay inside the context band on a phone; the chips scroll sideways
   inside the strip, never the page */
.mn__world-idle[hidden] { display: none; }
.mn-world-on .mn__world-idle { min-width: 0; padding: 12px 14px; border-radius: 20px; background: var(--w-steel); box-shadow: var(--w-edge), var(--w-shadow); }
.mn__world-idle-h { margin: 3px 0 0; color: var(--mn-ink); font-size: 1.02rem; line-height: 1.25; }
.mn-world-on .mn__world-caption { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.mn__world-chips { display: flex; gap: 6px; margin: 8px -14px -2px; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; }
.mn__world-chips::-webkit-scrollbar { display: none; }
.mn__world-chips > * { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--w-glass); box-shadow: var(--w-edge); color: var(--mn-ink); font: inherit; font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mn__world-chips [aria-pressed="true"] { background: rgba(255, 42, 77, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 42, 77, 0.6); }
.mn__world-chips b { color: var(--mn-dim); font-weight: 800; }
.mn__world-chips b:empty { display: none; }
.mn-world-side .mn__world-idle-h, .mn-world-side .mn__world-caption { display: none; }
@media (min-width: 600px) {
  .mn-world-on .mn__world-idle { padding: 16px 18px; }
  .mn__world-idle-h { font-size: 1.2rem; }
  .mn-world-on .mn__world-caption { white-space: normal; }
  .mn__world-chips { flex-wrap: wrap; overflow: visible; margin: 10px 0 0; padding: 0; }
}

/* ============================================================
   THE ONBOARDING, THREE PAGES (owner, 2026-10-15; the reference: dark
   brushed steel, one red, big sentence-case headline with a red period,
   tall rounded fields with an icon cell and a state at the right, one
   red pill with the arrow in a darker circle, a lock note under it).
   Mobile first; wider screens centre the column. The mark is the supplied
   artwork, never a drawn one.
   ============================================================ */
.mn__onboard { position: relative; isolation: isolate; padding: 18px 0 calc(var(--mn-bar-clear, 96px) + 16px); }
/* while a gate is up the page reserves nothing for the bar (the body's padding was the black band the owner saw): the page is a
   column the gate fills to the bottom edge, and the gate carries the bar's clearance itself */
.mn-gate-on .mn, .mn-gate-on body { padding-bottom: 0; }
.mn-gate-on .mn { display: flex; flex-direction: column; min-height: 100dvh; }
.mn-gate-on .mn__gate:not([hidden]) { flex: 1 0 auto; }
.mn__onboard::before { content: ""; position: absolute; z-index: -1; inset: -40px -16px 0; pointer-events: none;
  background:
    radial-gradient(70% 36% at 88% -4%, rgba(255, 42, 77, 0.42), transparent 65%),
    radial-gradient(60% 30% at 50% 108%, rgba(196, 16, 44, 0.45), transparent 62%),
    linear-gradient(165deg, #17181c 0%, #0c0c0f 42%, #09090b 100%);
  background-color: #0b0b0d; }
/* the bleed stops at the screen's edge and the slanted line stays inside the box: anything wider than the phone makes mobile Chromium zoom the whole page out (found by the door run) */
.mn__onboard::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 58px; height: 2px; pointer-events: none; transform: rotate(-14deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 42, 77, 0.0) 30%, rgba(255, 72, 100, 0.9) 60%, rgba(255, 42, 77, 0.0) 100%); filter: blur(0.6px); }
.mn__steps-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 26px; }
.mn__steps { display: flex; flex: 1 1 auto; gap: 10px; max-width: 260px; margin: 0; padding: 0; list-style: none; }
.mn__steps li { flex: 1 1 0; height: 5px; border-radius: 999px; background: rgba(244, 239, 230, 0.16); transition: background 0.3s var(--mn-ease); }
.mn__steps li.is-done { background: rgba(255, 42, 77, 0.55); }
.mn__steps li.is-current { background: var(--mn-hot); box-shadow: 0 0 14px -2px rgba(255, 42, 77, 0.9); }
.mn__steps-count { margin-left: auto; color: var(--mn-dim); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; }
.mn__onboard-h { max-width: 12ch; margin: 0; font-family: var(--mn-ui); font-weight: 900; font-size: clamp(2.5rem, 11.5vw, 4.4rem); line-height: 0.98; letter-spacing: -0.035em; text-transform: none; overflow-wrap: anywhere; }
.mn__onboard-h em { font-style: normal; color: var(--mn-hot); }
.mn__onboard .mn__lede { margin-top: 10px; font-size: 1.05rem; }
.mn__onboard .mn__label { margin-top: 22px; letter-spacing: 0.14em; }
.mn__onboard .mn__label span { color: var(--mn-faint); }
.mn__field { position: relative; display: flex; align-items: stretch; min-height: 62px; margin-top: 2px; border-radius: 18px; background: rgba(8, 8, 10, 0.82); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.14), 0 10px 30px -22px rgba(0, 0, 0, 0.9); transition: box-shadow 0.2s var(--mn-ease); }
.mn__field:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255, 77, 61, 0.85), 0 0 0 4px rgba(255, 42, 77, 0.14); }
.mn__field .mn__input { min-height: 62px; margin: 0; padding: 0 16px; border-radius: 18px; background: transparent; box-shadow: none; font-weight: 600; font-size: max(16px, 1.1rem); }
.mn__field .mn__input:focus { box-shadow: none; }
.mn__field--plain .mn__input { padding: 0 18px; }
.mn__field .mn__textarea { min-height: 8rem; padding: 14px 16px; }
/* the phone: the country code in its own cell, then the number (people from anywhere, owner 2026-10-15) */
.mn__field--phone .mn__dial { flex: none; width: 84px; padding: 0 8px; text-align: center; border-right: 1px solid rgba(244, 239, 230, 0.1); border-radius: 0; }
.mn__field-ico, .mn__field-at { display: grid; place-items: center; flex: none; width: 56px; color: var(--mn-dim); border-right: 1px solid rgba(244, 239, 230, 0.1); font-weight: 800; font-size: 1.15rem; }
.mn__field-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mn__field-state { display: none; place-items: center; flex: none; width: 56px; color: var(--mn-dim); font-weight: 800; font-size: 0.8rem; }
.mn__field-state.is-ok, .mn__field-state.is-bad, .mn__field-state.is-busy { display: grid; }
.mn__field-state.is-ok::before { content: ""; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px #38d996; background: linear-gradient(135deg, transparent 0, transparent 100%); position: relative; }
.mn__field-state.is-ok::after { content: ""; position: absolute; width: 11px; height: 6px; border-left: 2.5px solid #38d996; border-bottom: 2.5px solid #38d996; transform: translateY(-2px) rotate(-45deg); }
.mn__field-state.is-bad { color: var(--mn-hot); }
.mn__field-state.is-busy::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(244, 239, 230, 0.2); border-top-color: var(--mn-ink); animation: mnspin 0.8s linear infinite; }
@keyframes mnspin { to { transform: rotate(360deg); } }
.mn__field.is-locked .mn__input { color: var(--mn-dim); }
.mn__field.is-bad { box-shadow: inset 0 0 0 1.5px rgba(255, 77, 61, 0.8); }
.mn__grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
.mn__about { margin-top: 22px; border-radius: 18px; background: rgba(8, 8, 10, 0.82); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.14); }
.mn__about summary { display: flex; align-items: center; min-height: 64px; cursor: pointer; list-style: none; }
.mn__about summary::-webkit-details-marker { display: none; }
.mn__about summary .mn__field-ico { align-self: stretch; }
.mn__about-t { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; min-width: 0; }
.mn__about-t strong { font-size: 1.05rem; }
.mn__about-t small { color: var(--mn-faint); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.mn__about-chev { margin-left: auto; margin-right: 20px; width: 10px; height: 10px; border-right: 2px solid var(--mn-dim); border-bottom: 2px solid var(--mn-dim); transform: rotate(-45deg); transition: transform 0.25s var(--mn-ease); }
.mn__about[open] .mn__about-chev { transform: rotate(45deg); }
.mn__about .mn__demographics { margin: 0 14px 14px; }
.mn__onboard-actions { margin-top: 26px; }
.mn__cta { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 66px; padding: 0 76px 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #ff3d5e 0%, #c4102c 100%); color: #fff; font-family: inherit; font-weight: 800; font-size: max(16px, 1.15rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 44px -16px rgba(255, 42, 77, 0.95), 0 0 0 1px rgba(255, 77, 100, 0.35); }
.mn__cta:disabled { opacity: 0.6; cursor: progress; }
.mn__cta-arrow { position: absolute; right: 7px; top: 7px; bottom: 7px; display: grid; place-items: center; width: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mn__cta-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mn__onboard .mn__text-button { font-weight: 800; }
.mn__onboard-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--mn-dim); font-weight: 600; font-size: 0.9rem; }
.mn__onboard-note svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mn__onboard .mn__profile-security { margin-top: 0; padding: 0; border: 0; }
.mn__onboard .mn__profile-security h2 { margin-top: 22px; }
.mn__onboard .mn__secondary { margin-top: 12px; }
.mn__onboard .mn__hint { margin-top: 8px; }
@media (min-width: 600px) {
  .mn__onboard { padding-top: 32px; }
  .mn__onboard::before { inset: -40px -24px 0; }
  .mn__onboard-form { max-width: 560px; }
  .mn__grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mn__onboard-h { font-size: clamp(3rem, 6vw, 4.6rem); }
}

/* ============================================================
   WORLD NEWS IN THE FEED (owner, 2026-10-15): one member post to one
   news item, ingested from GDELT into the plane. A news card wears the
   World's card; it carries words only (no pictures, no publisher marks),
   and its violet dot is the news colour (the gold is
   the business pins'). Phone first:
   one column, every line truncates inside the card.
   ============================================================ */
.mn__news-credit { margin: 14px 2px 0; color: var(--mn-faint); font-size: 0.78rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.mn__news-credit a { color: var(--mn-dim); text-decoration: underline; text-underline-offset: 2px; }
.mn__news-credit:not([hidden]) + .mn__feed { margin-top: 8px; }
.mn__news-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; color: var(--mn-faint); font-weight: 600; font-size: 0.82rem; line-height: 1.3; }
.mn__news-meta::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #b49cff; box-shadow: 0 0 0 3px rgba(180, 156, 255, 0.18); }
.mn__news-meta > span { flex: none; }
.mn__news-meta > .mn__news-domain { flex: 0 0 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; color: var(--mn-dim); font-weight: 800; }
/* the publisher keeps its name up to 60% of the row (a longer one truncates there); the place gives way */
.mn__news-meta > .mn__news-place { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mn__news-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; color: var(--mn-ink); font-weight: 700; font-size: 1rem; line-height: 1.42; overflow-wrap: anywhere; text-decoration: none; }
.mn__news-title::after { content: "\00a0\2197"; color: var(--mn-faint); font-weight: 600; }
.mn__news-title:hover, .mn__news-title:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mn__news-chip { justify-self: start; max-width: 100%; }
.mn__news-chip::before { background: #b49cff; box-shadow: 0 0 0 3px rgba(180, 156, 255, 0.22); }
.mn-world-on #mnFeed .mn__news-title { color: #e9ecf1; font-size: 0.97rem; }

/* ============================================================
   THE SCREEN IS THE WHOLE SCREEN (owner, 2026-10-15): the bar floats over
   the page; whatever is last carries the bar's clearance itself. Last in
   the sheet so nothing above overrides it.
   ============================================================ */
body.has-appbar { padding-bottom: 0; }
.mn-gate-on .mn__gate:not([hidden]) { padding-bottom: calc(var(--mn-bar-clear, 96px) + 16px); }
@media (min-width: 1100px) {
  .mn-world-fit.mn-world-on .mn__world-context { padding-bottom: var(--mn-bar-clear, 96px); }
}

/* ================================================================
   THE BUTTON SYSTEM ON THE WORLD (owner, 2026-10-15: "These buttons
   look like shit. There's no animations.")
   The house grammar from css/style.css (THE BUTTON SYSTEM), applied to
   the classes js/mnet.js already renders: one press, one hover lift on
   pointer devices, 44px reach, and fills that carry their labels at AA.
   Class names stay the contract; nothing here renames markup.
   ================================================================ */
/* the World's hot red (#ff2a4d) carries white type at 3.7:1, under AA for
   a 13-16px label. Filled controls lean to the same red's deeper end so
   every stop clears 4.5:1; red TEXT keeps --mn-hot, which reads at 5:1 on
   the night ground. */
.mn-world-on :is(.mn__primary, .mn__post, .mn__guest-join, .mn__fund-go, .mn__tour-cta, .mng__join, .mn__golive, .mn__record-receipt, .mn__person-actions .is-primary, .mn__world-go:not(.mn__world-go--eup), .mn__world-live) {
  background: linear-gradient(180deg, #e01a42, #c4102c); color: #fff;
}

/* reach: 44px for every pill a thumb is meant to hit. The context strip's
   chips and mission actions take 40px (WCAG 2.5.8 asks 24): the owner's
   portrait split gives that strip ~15% of the screen, and 44px rows pushed
   the globe under its 44% floor on an upright iPad. */
.mn__world-chips > *, .mn__world-go, .mn__world-locate, .mn__mission-card .mn__world-filter { min-height: 40px; }
.mn__clipdoor .mn__world-go,
.mn__guest-in, .mn__guest-join, .mn__world-expand, .mn__world-live, .mn__fund, .mng__join,
.mn__record-receipt, .mn__record-share, .mn__golive { min-height: 44px; }

/* motion: transform/opacity/shadow only, 120-250ms, ease-out */
.mn :is(.mn__primary, .mn__post, .mn__secondary, .mn__ghost, .mn__world-go, .mn__world-locate, .mn__world-filter, .mn__world-close, .mn__world-chips > *, .mn__guest-in, .mn__guest-join, .mn__fund, .mn__fund-go, .mn__tour-cta, .mng__join, .mn__golive, .mn__record-receipt, .mn__record-share, .mn__world-expand, .mn__world-live, .mn__clipdoor .mn__world-go),
.mn__world-expand, .mn__world-live {
  touch-action: manipulation;
  transition: transform 0.2s var(--mn-ease), box-shadow 0.25s var(--mn-ease), background-color 0.2s var(--mn-ease), color 0.2s var(--mn-ease), opacity 0.2s var(--mn-ease);
}
.mn :is(.mn__post, .mn__ghost, .mn__world-go, .mn__world-locate, .mn__world-filter, .mn__world-close, .mn__world-chips > *, .mn__guest-in, .mn__guest-join, .mn__fund, .mn__fund-go, .mn__tour-cta, .mng__join, .mn__golive, .mn__record-receipt, .mn__record-share, .mn__world-expand, .mn__world-live):active:not(:disabled) {
  transform: scale(0.96); transition-duration: 0.12s;
}
@media (hover: hover) and (pointer: fine) {
  .mn :is(.mn__primary, .mn__post, .mn__guest-join, .mn__fund-go, .mn__tour-cta, .mng__join, .mn__golive, .mn__record-receipt, .mn__world-go:not(.mn__world-go--eup), .mn__world-live):hover:not(:disabled) {
    transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 34px -14px rgba(255, 42, 77, 0.85);
  }
  .mn :is(.mn__secondary, .mn__ghost, .mn__world-locate, .mn__world-filter, .mn__world-chips > *, .mn__guest-in, .mn__fund, .mn__record-share, .mn__world-expand, .mn__world-go--eup):hover:not(:disabled) {
    transform: translateY(-1px); background-color: rgba(255, 255, 255, 0.1);
  }
  .mn .mn__world-close:hover { color: var(--mn-ink); background-color: rgba(255, 255, 255, 0.1); }
}
.mn :is(.mn__primary, .mn__post, .mn__secondary, .mn__ghost, .mn__guest-join, .mng__join):is(.is-loading, [aria-busy="true"]) {
  position: relative; color: transparent !important; pointer-events: none;
}
.mn :is(.mn__primary, .mn__post, .mn__secondary, .mn__ghost, .mn__guest-join, .mng__join):is(.is-loading, [aria-busy="true"])::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: mn-spin 0.7s linear infinite;
}
@keyframes mn-spin { to { transform: rotate(360deg); } }

/* sheets enter instead of snapping: the account menu and search suggestions */
.mn__menu:not([hidden]), .mn__suggest:not([hidden]) { animation: mn-sheet-in 0.22s var(--mn-ease) both; transform-origin: top right; }
.mn__suggest:not([hidden]) { transform-origin: top center; }
@keyframes mn-sheet-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* the mission card arrives when a pin is tapped */
.mn__mission-card:not([hidden]) { animation: mn-card-in 0.3s var(--mn-ease) both; }
@keyframes mn-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the emblem on a mission card is the join: give the artwork room */
.mn__mission-card .mn__eup, #mnWorldFocusJoin .mn__eup { width: 32px; height: 32px; }
#mnWorldFocusJoin { min-width: 52px; }

/* ================================================================
   THE EMBLEM OVER THE EARTH: "do something about it" (owner,
   2026-10-15, addendum 8). The Equity Uprise artwork IS the control
   (CLAUDE.md rule 10): the supplied white mark, complete and scaled
   proportionally only. No plate, no tile, no ring, no caption, no name
   beside it. The button is invisible; what you see is the owner's
   artwork, a soft shadow so it reads over a bright Earth, and a slow
   breath. Its accessible name says what it does. It opens missions.
   ================================================================ */
.mn__world-eup {
  position: absolute; z-index: 3; left: 50%; bottom: 14px;
  display: grid; place-items: center;
  width: 100px; height: 100px; margin: 0 0 0 -50px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  animation: mn-eup-arrive 0.6s var(--mn-spring) 0.35s both, mn-eup-breathe 3.4s ease-in-out 1.4s infinite;
}
.mn__world-eup img {
  display: block; width: 92px; height: 92px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
  transition: transform 0.25s var(--mn-ease);
}
.mn__world-eup:active img { transform: scale(0.92); transition-duration: 0.12s; }
.mn .mn__world-eup:focus-visible { outline: 2px solid var(--mn-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mn__world-eup:hover img { transform: scale(1.1); }
}
@media (min-width: 600px) {
  .mn__world-eup { width: 128px; height: 128px; margin-left: -64px; bottom: 22px; }
  .mn__world-eup img { width: 120px; height: 120px; }
}
@keyframes mn-eup-arrive { from { opacity: 0; transform: translateY(14px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes mn-eup-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  .mn__world-eup, .mn__world-eup img, .mn__menu, .mn__suggest, .mn__mission-card,
  .mn__world-expand, .mn__world-live { animation: none !important; transition: none !important; }
  .mn__world-eup:hover img, .mn__world-eup:active img { transform: none !important; }
  .mn :is(.mn__primary, .mn__post, .mn__secondary, .mn__ghost, .mn__world-go, .mn__world-locate, .mn__world-filter, .mn__world-close, .mn__world-chips > *, .mn__guest-in, .mn__guest-join, .mn__fund, .mn__fund-go, .mn__tour-cta, .mng__join, .mn__golive, .mn__record-receipt, .mn__record-share, .mn__world-expand, .mn__world-live):is(:hover, :active) { transform: none !important; }
}

/* Put your Black business on the map: the listing form inside the mission dialog (js/mnet.js businessListingForm) */
.mn__business-listing { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mn-rule-2); min-width: 0; }
.mn__business-listing .mn__primary { margin-top: 14px; }
.mn__panel [data-focus="business"] { margin-top: 8px; max-width: 100%; white-space: normal; }

/* Unified timeline: replies render inside the same card for posts and news.
   GDELT remains visibly attributed once, without explanatory banners. */
.mn-world-on #mnFeed .mn__comments{grid-column:1/-1;min-width:0;margin-top:13px;padding:15px;border-top:1px solid rgba(220,233,245,.13);background:rgba(9,16,25,.44);border-radius:14px}
.mn__comments[hidden]{display:none!important}
.mn__comments-list{display:grid;gap:11px;margin-bottom:14px}
.mn__comment{min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.025)}
.mn__comment strong{font-weight:750;color:#f4f1ea;font-size:13px}
.mn__comment time{margin-left:9px;color:#95a6b7;font-size:11px;font-weight:600}
.mn__comment p{margin:5px 0 0;white-space:pre-wrap;color:#dbe1e9;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.mn__comments-empty{font-size:14px;color:#a7b3c1}
.mn__comment-status{font-size:12px;color:#b2c0ce;margin:9px 0 0}
.mn__comment-status.is-error{color:#ffb1a6}
.mn__comment-status.is-ok{color:#b7e7cd}
.mn__action--comment[aria-expanded="true"]{color:#e9c796}
.mn__news-meta::before{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#f6e2bf,#a9895e);border:1px solid rgba(255,255,255,.55);box-shadow:0 0 11px rgba(205,163,105,.18)}
.mn__news-chip::before{background:#d2b283;box-shadow:0 0 0 2px rgba(210,178,131,.12)}
@media(prefers-reduced-motion:reduce){.mn__comment,.mn__comments{animation:none!important;transition:none!important}}

/* News cards never let the new comment row push beyond the mobile column.
   Other kinds of post retain their original button gutter. */
.mn-world-on #mnFeed .mn__news-card .mn__post-actions{margin:9px 0 0;max-width:100%;min-width:0;box-sizing:border-box;flex-wrap:wrap}
.mn-world-on #mnFeed .mn__news-card .mn__action--comment{max-width:100%;box-sizing:border-box}

/* Live character controls inherit the host studio's house styling. */
.mn__actor-controls { min-width:0; margin:18px 0 0; padding:14px; border:1px solid var(--mn-rule); border-radius:12px; display:grid; gap:12px; }
.mn__actor-controls[hidden] { display:none; }
.mn__actor-controls legend { padding:0 6px; font-weight:700; font-size:1rem; }
.mn__actor-controls label { display:flex; align-items:flex-start; gap:10px; font-size:1rem; line-height:1.4; }
.mn__actor-controls input[type="checkbox"] { flex:0 0 auto; width:20px; height:20px; margin:2px 0; }
.mn__actor-controls p { margin:0; color:var(--mn-dim); font-size:.85rem; line-height:1.5; overflow-wrap:anywhere; }
.mn__actor-controls button { justify-self:start; min-height:44px; font-size:16px; }
.mn__actor-controls textarea { resize:vertical; }
/* THE PLACE CARD (js/mnet.js paintPlaceCard; owner, 2026-10-21: "only in the middle" of the top, with the place's counts):
   centred, never the full width; below the page's bar; the globe's buttons step down while it shows (--mn-place-push) */
.mn__place-card{position:absolute;z-index:4;top:10px;left:0;right:0;margin:0 auto;width:min(300px,calc(100% - 32px));box-sizing:border-box;display:grid;gap:4px;padding:6px 6px 8px 12px;border-radius:14px;background:rgba(13,14,18,.92);color:#eef0f4;font:500 13px/1.35 Inter,system-ui,sans-serif;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 26px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:mn-place-in .22s ease-out}
.mn__place-card[hidden]{display:none}
.mn__place-head{display:flex;align-items:center;gap:8px;min-width:0}
.mn__place-name{min-width:0;flex:1;display:flex;flex-direction:column}
.mn__place-name b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.mn__place-name small{color:#c7d0e0;font-size:12px;line-height:1.3}
.mn__place-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;text-align:center}
.mn__place-stat{display:grid;gap:1px;min-width:0}
.mn__place-stat b{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
.mn__place-stat small{color:#c7d0e0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn__place-close{flex:none;width:44px;height:44px;margin:-4px -2px -8px 0;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;font:400 22px/1 system-ui,sans-serif;cursor:pointer}
.mn__place-close:focus-visible{outline:2px solid #fff;outline-offset:-6px}
#mnWorld :is(#mnWorldStack,#mnWorldLive){translate:0 var(--mn-place-push,0px)}
.place-card-over-headline .wt-headline{visibility:hidden}
html[data-world-mode="travel"] .mn__place-card{display:none}
@keyframes mn-place-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mn__place-card{animation:none}}