/* ==========================================================================
   Earde · Cartographic Civic — design tokens
   Source of truth: Earde.dc.html (approved mockup). Values are exact.
   ========================================================================== */
:root {
  /* ---- Surfaces (warm mineral paper) ---- */
  --paper:    #F5F1E8;  /* app background, auth surfaces */
  --surface:  #FBF8F2;  /* cards, main column, top bar */
  --surface2: #EEE7DA;  /* sidebars, asides, inset fields, hover fill */
  --surface3: #E6DECE;  /* pressed/segment fill, avatar wells */

  /* ---- Lines ---- */
  --line:     #D8CFBF;  /* hairlines inside cards, table rules */
  --line2:    #C7BBA6;  /* control borders, pane dividers */

  /* ---- Ink ---- */
  --ink:      #1F2421;  /* primary text */
  --muted:    #59615C;  /* secondary text, mono metadata */

  /* ---- Accents ---- */
  --moss:     #556B57;  /* primary action, verified, live sigil # § */
  --forest:   #3E5143;  /* top-bar bottom rule, member avatars */
  --clay:     #A15E3B;  /* promotion / provenance / unread */
  --ochre:    #B39352;  /* projects, GitHub-verified outline, pending */
  --slate:    #4D6A73;  /* links, quiet informational actions */
  --danger:   #A14D45;  /* destructive */
  --rail:     #2E362F;  /* icon rail background */

  /* ---- Type families ---- */
  --sans:  'IBM Plex Sans', system-ui, sans-serif;   /* UI + body */
  --mono:  'IBM Plex Mono', ui-monospace, monospace; /* metadata, slugs, labels */
  --serif: 'Spectral', Georgia, serif;               /* page & community titles */

  /* ---- Type scale (px, as used) ---- */
  --fs-9:    9px;    /* MOD / seed micro badge */
  --fs-10:   10px;   /* kickers, atlas legend */
  --fs-10-5: 10.5px; /* section kickers, mono meta */
  --fs-11:   11px;   /* mono meta, row meta */
  --fs-11-5: 11.5px; /* breadcrumbs, chips */
  --fs-12:   12px;   /* tabs, small mono UI */
  --fs-12-5: 12.5px; /* aside body, small prose */
  --fs-13:   13px;   /* dense body, table cells */
  --fs-13-5: 13.5px; /* nav items, list titles, inputs (secondary) */
  --fs-14:   14px;   /* base body, chat message, inputs */
  --fs-15:   15px;   /* thread body, entry lead */
  --fs-15-5: 15.5px; /* feed row title */
  --fs-16:   16px;   /* card title, channel name */
  --fs-19:   19px;   /* settings panel h2, section title */
  --fs-22:   22px;   /* settings page title, inspector title */
  --fs-23:   23px;   /* members page title */
  --fs-24:   24px;   /* page titles (Feed, Discover, Notifications), thread h1 */
  --fs-26:   26px;   /* auth title, onboarding home step */
  --fs-27:   27px;   /* community name, project name, done title */
  --fs-32:   32px;   /* Bring entry hero */

  --lh-tight: 1.25;  /* h1 */
  --lh-title: 1.35;  /* row titles */
  --lh-ui:    1.5;   /* default */
  --lh-prose: 1.55;  /* descriptions */
  --lh-body:  1.62;  /* comments */
  --lh-read:  1.72;  /* thread body */

  --ls-kicker: .09em; /* uppercase mono kickers */
  --ls-badge:  .06em;

  /* ---- Spacing scale (px) ---- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px;
  --sp-9: 18px; --sp-10: 20px; --sp-11: 22px; --sp-12: 26px;
  --sp-13: 30px; --sp-14: 34px; --sp-15: 60px;

  /* ---- Radii (deliberately tight — civic, not consumer) ---- */
  --r-1: 2px;  /* badges, outline tags */
  --r-2: 3px;  /* buttons, inputs, nav items — the default */
  --r-3: 4px;  /* cards, panels, avatars 26-32px */
  --r-4: 5px;  /* onboarding cards, 44px avatars */
  --r-5: 6px;  /* home-choice cards, GitHub tile */
  --r-6: 8px;  /* 56-62px community avatars, pill counters */
  --r-pill: 50%;

  /* ---- Borders ---- */
  --bw: 1px;             /* every border in the system */
  --bw-accent: 2px;      /* provenance left rule, active tab underline */
  --bw-accent-3: 3px;    /* pending-request left rule */

  /* ---- Elevation: the system is FLAT. Depth = 1px borders + surface steps. ---- */
  --shadow-none: none;
  --shadow-overlay: 0 2px 6px rgba(31,36,33,.10); /* ONLY for real overlays (menus, atlas cards) */

  /* ---- Fixed chrome ---- */
  --topbar-h: 54px;
  --rail-w: 64px;
  --sidebar-w: 244px;
  --aside-w: 300px;
  --aside-w-chat: 236px;
  --aside-w-atlas: 340px;
  --settings-nav-w: 216px;
  --content-feed: 1040px;
  --content-list: 840px;
  --content-form: 820px;
  --content-auth: 392px;
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-14); line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--slate); text-decoration: none; }
a:hover { color: #3b525a; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: var(--r-6); }
::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; }

/* ==========================================================================
   APP SHELL — 4 panes: rail · sidebar · main · aside
   ========================================================================== */
.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.shell { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--surface);
}
.main--paper { background: var(--paper); }
.scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.container { max-width: var(--content-feed); margin: 0 auto; padding: 0 var(--sp-12) var(--sp-15); }
.container--list { max-width: var(--content-list); }
.container--form { max-width: var(--content-form); margin: 0 auto; padding: var(--sp-13) var(--sp-13) 80px; }

/* ---- Page head (sticky, non-scrolling band above the scroller) ---- */
.page__head {
  flex: none; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
  padding: var(--sp-8) var(--sp-13) 0;
}
.page__head--tight { padding-bottom: var(--sp-7); }
.page__head-inner { max-width: var(--content-feed); margin: 0 auto; }
.page__head-inner--list { max-width: var(--content-list); }
.page__title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-24); color: var(--ink); }
.page__title--sm { font-size: var(--fs-22); }
.page__sub { color: var(--muted); font-size: var(--fs-13); margin-top: var(--sp-1); }
.breadcrumb { font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted); }
.breadcrumb b { color: var(--ink); }

/* ---- Section header / kicker ---- */
.kicker {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
}
.section-head {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8); border-bottom: var(--bw) solid var(--line);
}
.section-head__spacer { flex: 1; }
.section-head__note { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); }
.count-pill {
  font-family: var(--mono); font-size: var(--fs-11); color: #fff;
  background: var(--ochre); border-radius: var(--r-6); padding: 0 7px;
}

/* ==========================================================================
   TOP BAR (application) — 54px, 3-track grid
   ========================================================================== */
.topbar {
  flex: none; height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(0, 380px) minmax(230px, 1fr);
  align-items: center; gap: var(--sp-12);
  padding: 0 var(--sp-9);
  background: var(--surface);
  border-bottom: var(--bw) solid var(--forest);
}
.topbar__brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start; }
.topbar__brand img { display: block; }
.topbar__mark { height: 30px; width: 30px; }
.topbar__wordmark { height: 22px; }

/* command / search field */
.search {
  display: flex; align-items: stretch; width: 100%; min-width: 0;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); overflow: hidden;
}
.search__sigil {
  flex: none; display: grid; place-items: center; padding: 0 11px;
  font-family: var(--mono); font-size: var(--fs-13); color: var(--muted);
  border-right: var(--bw) solid var(--line);
}
.search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: var(--fs-13-5); color: var(--ink); padding: var(--sp-4) var(--sp-5);
}
.search__enter {
  border: 0; border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px; cursor: pointer;
}
.topbar__actions {
  display: flex; align-items: center; gap: var(--sp-5);
  justify-self: end; min-width: 0;
}
.topbar__actions--anon { gap: 9px; }

/* Persistent GitHub-connect action. Scoped to the top bar so no generic button
   or other topbar control inherits it. The colour treatment is .btn--dark's,
   value for value — the same --ink fill and border, the same white foreground
   the inlined mark picks up through fill='currentColor', the same
   brightness-lift hover, and no focus rule of its own so the global
   :focus-visible ring applies exactly as it does on /bring's CTA. Only the
   *dimensions* stay compact and topbar-native: mono at --fs-11-5, the tight
   default .btn radius, and 6px/14px padding rather than .btn--dark's larger
   type, --r-3 radius and 11px/22px box. So the two controls read as the same
   black GitHub action at two scales, and /bring's full-label CTA stays the
   more prominent one. */
.topbar__actions .btn--connect-github {
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-11-5);
  color: #fff; background: var(--ink); border-color: var(--ink);
  padding: var(--sp-3) var(--sp-7);
}
.topbar__actions .btn--connect-github svg { display: block; flex: none; }
.topbar__actions .btn--connect-github:hover { filter: brightness(1.15); color: #fff; }

/* bell */
.bell {
  position: relative; display: flex; align-items: center; color: var(--muted);
  background: none; border: var(--bw) solid transparent; border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
}
.bell:hover { background: var(--surface2); color: var(--ink); }
.bell__count {
  position: absolute; top: -2px; right: -3px;
  background: var(--clay); color: #fff;
  font-family: var(--mono); font-size: var(--fs-9); font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: var(--r-6);
}
/* user chip */
.userchip {
  display: flex; align-items: center; gap: 7px;
  padding: 3px var(--sp-4) 3px var(--sp-2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2); cursor: pointer;
  background: none;
}
.userchip:hover { background: var(--surface2); }
.userchip__name { font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted); }

/* ==========================================================================
   ICON RAIL (col 1)
   ========================================================================== */
.rail {
  flex: none; width: var(--rail-w); background: var(--rail);
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 11px 0; overflow-y: auto;
}
.rail__spacer { flex: 1; }
.rail__item {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-3); cursor: pointer; color: #D8D2C4;
  background: rgba(255,255,255,.05); border: var(--bw) solid rgba(255,255,255,.09);
  text-decoration: none;
}
.rail__item:hover { background: rgba(255,255,255,.10); color: #fff; }
.rail__item--community {
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-13); color: #fff;
  border-color: rgba(255,255,255,.12);
}
.rail__item--community:hover { filter: brightness(1.12); }
.rail__item--add {
  color: #B7B0A0; background: transparent; font-size: 20px; font-weight: 300;
  border: var(--bw) dashed rgba(255,255,255,.22);
}
.rail__item--add:hover { background: rgba(255,255,255,.08); color: #fff; }
/* active marker: 3px stub bleeding off the left edge */
.rail__marker {
  position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px; background: var(--moss); border-radius: 0 var(--r-1) var(--r-1) 0;
}
.rail__marker--community { height: 26px; background: #fff; }
.rail__marker--atlas { background: var(--clay); }
.rail__divider { width: 30px; height: 1px; background: rgba(255,255,255,.12); margin: var(--sp-2) 0; }

/* ==========================================================================
   COMMUNITY SIDEBAR (col 2)
   ========================================================================== */
.sidebar {
  flex: none; width: var(--sidebar-w); background: var(--surface2);
  border-right: var(--bw) solid var(--line2);
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar__head {
  padding: var(--sp-6) var(--sp-7); border-bottom: var(--bw) solid var(--line2);
  background: var(--surface); display: flex; align-items: center; gap: var(--sp-5);
  cursor: pointer; text-decoration: none;
}
.sidebar__name {
  /* Long names get up to two lines instead of a one-line ellipsis; the clamp
     (not free wrapping) caps the header height, and overflow-wrap keeps a
     single over-long token from bursting the fixed sidebar width. */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink);
  overflow: hidden; overflow-wrap: anywhere;
}
.sidebar__slug {
  /* The /c/slug line stays one line: an ellipsis beats wrapping mid-token. */
  display: block; font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-4); scrollbar-width: thin; }
.sidebar__group { padding: var(--sp-6) 9px var(--sp-2); }
.navitem {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 5px 9px; border-radius: var(--r-2);
  font-size: var(--fs-13-5); color: var(--muted);
  border: var(--bw) solid transparent; cursor: pointer; text-decoration: none;
}
.navitem:hover { background: var(--surface3); color: var(--ink); }
.navitem--pad { padding: var(--sp-3) 9px; margin-bottom: var(--sp-1); }
.navitem--active {
  color: var(--ink); background: var(--surface); border-color: var(--line2); font-weight: 600;
}
.navitem--active:hover { background: var(--surface); }
.navitem__sigil { font-family: var(--mono); color: var(--muted); }
.navitem--active .navitem__sigil, .navitem__sigil--live { color: var(--moss); }
.navitem__sigil--box { width: 15px; text-align: center; font-family: inherit; }
.navitem__sigil--project { color: var(--ochre); }
.navitem__sigil--atlas { color: var(--clay); }
.navitem__trail { margin-left: auto; font-family: var(--mono); font-size: var(--fs-10); color: var(--muted); }
.navitem__lock { margin-left: auto; font-size: var(--fs-10); color: var(--ochre); }

/* ==========================================================================
   ASIDE (col 4)
   ========================================================================== */
.aside {
  flex: none; width: var(--aside-w); background: var(--surface2);
  border-left: var(--bw) solid var(--line2); overflow-y: auto; scrollbar-width: thin;
}
.aside--chat { width: var(--aside-w-chat); }
.aside__block { padding: var(--sp-8) var(--sp-8); border-bottom: var(--bw) solid var(--line); }
.aside__block:last-child { border-bottom: 0; }
.aside__text { font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose); margin: 0 0 var(--sp-6); }
.aside__kicker { margin-bottom: 9px; }
.kv { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.kv td { padding: var(--sp-2) 0; color: var(--muted); }
.kv td + td { text-align: right; font-family: var(--mono); color: var(--ink); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-13);
  border-radius: var(--r-2); border: var(--bw) solid transparent;
  padding: 9px var(--sp-9); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn--primary { color: #fff; background: var(--moss); border-color: var(--moss); }
.btn--primary:hover { filter: brightness(1.06); color: #fff; }
.btn--accent  { color: #fff; background: var(--clay); border-color: var(--clay); }
.btn--accent:hover { filter: brightness(1.05); color: #fff; }
.btn--project { color: #fff; background: var(--ochre); border-color: var(--ochre); }
.btn--project:hover { filter: brightness(1.05); color: #fff; }
.btn--slate   { color: #fff; background: var(--slate); border-color: var(--slate); }
.btn--dark    { color: #fff; background: var(--ink); border-color: var(--ink); border-radius: var(--r-3); padding: 11px var(--sp-11); font-size: var(--fs-14); }
.btn--dark:hover { filter: brightness(1.15); color: #fff; }
.btn--secondary {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-12);
  color: var(--muted); background: var(--surface); border-color: var(--line2);
}
.btn--secondary:hover { background: var(--surface2); color: var(--ink); }
.btn--outline-ochre {
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-11-5);
  color: var(--clay); background: var(--surface); border-color: var(--ochre);
  padding: var(--sp-3) 11px;
}
.btn--outline-ochre:hover { background: var(--surface2); color: var(--clay); }
.btn--danger { color: var(--danger); background: var(--surface); border-color: var(--line2); }
.btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.btn--link {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-11);
  color: var(--slate); background: none; border: 0; padding: 0;
}
.btn--link:hover { text-decoration: underline; color: var(--slate); }
.btn--quiet {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-12-5);
  color: var(--muted); background: none; border: 0;
}
.btn--quiet:hover { color: var(--ink); }
.btn--block { width: 100%; }
.btn--auth { padding: 7px var(--sp-7); font-size: var(--fs-12); min-height: 0; }
.btn--auth.btn--primary { font-size: var(--fs-12-5); }
.btn--sm { font-size: var(--fs-12); padding: var(--sp-4) var(--sp-6); }
.btn--xs { font-family: var(--mono); font-size: var(--fs-11); font-weight: 400; padding: var(--sp-2) var(--sp-6); }
.btn[disabled], .btn--disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: var(--sp-5); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { margin-bottom: var(--sp-8); }
.label {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: 5px;
}
.input, .textarea, .select {
  width: 100%; font-family: var(--sans); font-size: var(--fs-14); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 9px var(--sp-6); outline: none;
}
.input--inset, .textarea--inset { background: var(--surface2); }
.input--mono { font-family: var(--mono); font-size: var(--fs-13); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--moss); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; }
.textarea { min-height: 70px; resize: vertical; font-size: var(--fs-13-5); line-height: var(--lh-prose); }
.select {
  font-family: var(--mono); font-size: var(--fs-13);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: var(--sp-13);
}
/* prefix group: /c/ + slug */
.input-group {
  display: flex; align-items: center; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); overflow: hidden;
}
.input-group__prefix {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--muted);
  padding: 9px 2px 9px var(--sp-6); flex: none;
}
.input-group .input { border: 0; border-radius: 0; padding: 9px var(--sp-4); min-width: 0; }
.hint { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); margin-top: 5px; }
.hint--error { color: var(--danger); }
.check {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted); cursor: pointer;
}
.check input { accent-color: var(--moss); margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-9); }

/* ==========================================================================
   CARDS / PANELS
   ========================================================================== */
.card {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface);
}
.card--pad { padding: var(--sp-8); }
.card--interactive { display: flex; flex-direction: column; gap: var(--sp-5); }
.card__title { font-weight: 700; font-size: var(--fs-16); color: var(--ink); }
.card__blurb { font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-ui); }
.card__foot {
  display: flex; align-items: center; gap: var(--sp-7);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: auto; padding-top: var(--sp-3); border-top: var(--bw) solid var(--line);
}
.panel { border: var(--bw) solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.panel__body { padding: var(--sp-8); }
.panel__foot {
  padding: var(--sp-5) var(--sp-8); border-top: var(--bw) solid var(--line);
  display: flex; align-items: center; gap: var(--sp-5);
}
.rows { border: var(--bw) solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.rows > * { border-bottom: var(--bw) solid var(--line); }
.rows > *:last-child { border-bottom: 0; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-7); }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) var(--aside-w); gap: var(--sp-11); align-items: start; }
.two-col--wide { grid-template-columns: minmax(0,1fr) 320px; }
.stack { display: flex; flex-direction: column; gap: var(--sp-11); min-width: 0; }
.stack--sm { gap: var(--sp-8); }

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  border: var(--bw) solid currentColor; border-radius: var(--r-1); padding: 1px 5px;
}
.badge--verified { color: var(--moss); }
.badge--network  { color: var(--ochre); }
.badge--project  { color: var(--ochre); }
.badge--promoted { color: var(--clay); }
.badge--draft    { color: var(--clay); font-size: var(--fs-11); padding: 1px 6px; }
.badge--mod      { color: var(--moss); font-size: var(--fs-9); font-weight: 700; padding: 0 var(--sp-2); }
.badge--top      { color: var(--forest); font-size: var(--fs-9); font-weight: 700; padding: 0 var(--sp-2); }
.badge--steward  { color: var(--ochre); font-size: var(--fs-9); font-weight: 700; padding: 0 var(--sp-2); }
.badge--seed {
  color: var(--clay); font-size: var(--fs-9); font-weight: 700;
  letter-spacing: var(--ls-badge); text-transform: uppercase; padding: 0 var(--sp-2);
}
.badge--plain { color: var(--muted); border-color: var(--line2); }
.badge--lg { font-size: var(--fs-10-5); padding: 2px 7px; }
/* inline "✓ verified" — text, not a chip */
.verified-note { font-family: var(--mono); font-size: 9.5px; color: var(--moss); font-weight: 400; }

/* ==========================================================================
   NOTICES  (flat, 1px, tinted with color-mix — never a shadowed alert)
   ========================================================================== */
.notice {
  border: var(--bw) solid var(--line); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-body);
}
.notice b { color: var(--ink); }
.notice--success { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 9%, var(--surface)); color: var(--ink); font-size: var(--fs-13); padding: 13px var(--sp-8); }
.notice--pending {
  border: var(--bw) solid var(--ochre); border-left: var(--bw-accent-3) solid var(--ochre);
  border-radius: var(--r-3); background: color-mix(in srgb, var(--ochre) 8%, var(--surface));
  padding: var(--sp-8); color: var(--muted);
}
.notice--warn { border-color: var(--ochre); background: color-mix(in srgb, var(--ochre) 8%, var(--surface)); }
.notice--dashed { background: var(--surface); border-style: dashed; border-color: var(--line2); padding: 11px 13px; }
.notice--rejected { border-color: var(--line2); background: var(--surface2); font-size: var(--fs-13); padding: 13px var(--sp-8); }
/* provenance block: promoted-conversation quote */
.provenance {
  border: var(--bw) solid var(--line2); border-left: var(--bw-accent) solid var(--clay);
  background: var(--surface2); border-radius: var(--r-1); padding: 13px var(--sp-8);
}
.provenance__kicker {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--clay);
}
.provenance__msg { border-top: var(--bw) solid var(--line); padding-top: 9px; }
.provenance__text { margin-top: 3px; font-size: var(--fs-13); line-height: var(--lh-ui); color: var(--muted); white-space: pre-wrap; }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty { padding: 46px var(--sp-3); text-align: center; }
.empty__title { font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted); }
.empty__body { font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-3); line-height: var(--lh-prose); }
.empty--inline { padding: var(--sp-7) var(--sp-8); text-align: left; font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); }

/* ==========================================================================
   TABS / CHIPS / SEGMENTS
   ========================================================================== */
.tabs { display: flex; gap: var(--sp-1); }
.tab {
  font-family: var(--mono); font-size: var(--fs-12); padding: var(--sp-4) 13px;
  color: var(--muted); border-bottom: var(--bw-accent) solid transparent;
  cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--ink); }
.tab--active { color: var(--ink); border-bottom-color: var(--moss); }
.tabbar { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-7); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip {
  font-family: var(--mono); font-size: var(--fs-11-5); padding: var(--sp-2) 9px;
  border-radius: var(--r-2); color: var(--muted); border: var(--bw) solid transparent;
  background: none; cursor: pointer; text-decoration: none;
}
.chip:hover { color: var(--ink); }
.chip--active { color: var(--ink); background: var(--surface2); border-color: var(--line2); }
.chip--outline { border-color: var(--line2); }
.chip--filter-on { color: #fff; background: var(--moss); border-color: var(--moss); }
.chip--type-on { color: #fff; background: var(--slate); border-color: var(--slate); font-size: var(--fs-11); }
.chip--static {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  background: var(--surface2); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 5px var(--sp-5); cursor: default;
}

/* ==========================================================================
   AVATARS
   ========================================================================== */
.avatar {
  flex: none; display: grid; place-items: center; color: #fff;
  font-family: var(--mono); font-weight: 700; border-radius: var(--r-2);
}
.avatar--20 { width: 20px; height: 20px; font-size: var(--fs-10); border-radius: var(--r-2); }
.avatar--22 { width: 22px; height: 22px; font-size: var(--fs-10); }
.avatar--24 { width: 24px; height: 24px; font-size: var(--fs-11); }
.avatar--26 { width: 26px; height: 26px; font-size: var(--fs-11); border-radius: var(--r-3); }
.avatar--30 { width: 30px; height: 30px; font-size: var(--fs-12); border-radius: var(--r-3); }
.avatar--32 { width: 32px; height: 32px; font-size: var(--fs-14); border-radius: var(--r-3); }
.avatar--44 { width: 44px; height: 44px; font-size: 17px; border-radius: var(--r-4); }
.avatar--62 { width: 62px; height: 62px; font-size: var(--fs-24); border-radius: var(--r-6); }
.avatar--user {
  color: var(--muted); background: var(--surface3); border: var(--bw) solid var(--line);
}
.avatar--mod { background: var(--forest); }

/* ==========================================================================
   THREAD / FEED ROWS
   ========================================================================== */
.thread-row {
  display: flex; gap: var(--sp-7); padding: var(--sp-7) var(--sp-2);
  border-bottom: var(--bw) solid var(--line); cursor: pointer; text-decoration: none;
}
.thread-row:hover { background: var(--surface2); }
.thread-row__title {
  font-weight: 600; font-size: var(--fs-15-5); line-height: var(--lh-title);
  color: var(--ink); text-wrap: pretty;
}
.thread-row__preview {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meta {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
}
.meta--tight { gap: var(--sp-4); }
.meta--top { margin-bottom: var(--sp-2); }
.meta__section { color: var(--moss); font-weight: 700; }
.meta__project { color: var(--ochre); border: var(--bw) solid var(--ochre); border-radius: var(--r-1); padding: 0 5px; }
.meta__promoted { color: var(--clay); }
.vote { display: flex; flex-direction: column; align-items: center; width: 30px; flex: none; padding-top: var(--sp-1); }
.vote__up { color: var(--muted); font-size: var(--fs-13); line-height: 1; background: none; border: 0; cursor: pointer; padding: 0; }
.vote__down { color: var(--line2); font-size: var(--fs-13); line-height: 1; background: none; border: 0; cursor: pointer; padding: 0; }
.vote__score { font-family: var(--mono); font-weight: 600; font-size: var(--fs-13); color: var(--ink); margin: 3px 0; }
.vote--lg { width: 34px; }
.vote--lg .vote__up, .vote--lg .vote__down { font-size: var(--fs-16); }
.vote--lg .vote__score { font-size: var(--fs-14); }
.vote--sm { width: 22px; }
.vote--sm .vote__up, .vote--sm .vote__down { font-size: var(--fs-12); }
.vote--sm .vote__score { font-size: var(--fs-11-5); margin: 1px 0; }
.pager { text-align: center; padding: var(--sp-10); font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); }

/* ==========================================================================
   PROJECT / REPOSITORY ROWS
   ========================================================================== */
.project-row {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-7); background: var(--surface);
  cursor: pointer; text-decoration: none;
}
.project-row:hover { background: var(--surface2); }
.project-row--stacked { align-items: flex-start; gap: 11px; padding: 11px var(--sp-7); }
.project-glyph {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); color: var(--ochre); font-size: 15px; background: var(--surface);
}
.project-glyph--28 { width: 28px; height: 28px; font-size: var(--fs-14); }
.project-glyph--38 { width: 38px; height: 38px; font-size: 18px; border-radius: var(--r-4); background: var(--surface2); }
.project-glyph--40 { width: 40px; height: 40px; font-size: 19px; border-radius: var(--r-4); }
.project-glyph--58 { width: 58px; height: 58px; font-size: 28px; border-radius: var(--r-6); background: var(--surface2); }
.project-row__name { font-weight: 600; font-size: var(--fs-13-5); color: var(--ink); }
.project-row__repo { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); margin-top: var(--sp-1); }
.project-row__kind { font-size: var(--fs-11); color: var(--muted); margin-top: var(--sp-1); }
.project-row__kind--one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
/* repo picker row (onboarding) */
.repo-row {
  display: flex; align-items: flex-start; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8); cursor: pointer;
}
.repo-row:hover { background: var(--surface2); }
.repo-row--selected { background: color-mix(in srgb, var(--moss) 8%, var(--surface)); }
.repo-row__full { font-family: var(--mono); font-size: var(--fs-13); color: var(--ink); }
.repo-row__desc { font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-1); }
.repo-row__lang { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); }
.tickbox {
  width: 17px; height: 17px; flex: none; margin-top: 1px; display: grid; place-items: center;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  font-size: var(--fs-11); color: #fff; background: var(--surface);
}
.tickbox--on { border-color: var(--moss); background: var(--moss); }

/* ==========================================================================
   TABLES (members, repo metadata)
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table td { padding: 9px var(--sp-8); border-bottom: var(--bw) solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { color: var(--muted); width: 150px; }
.table td + td { font-family: var(--mono); color: var(--ink); }
.grid-table__head, .grid-table__row {
  display: grid; grid-template-columns: 1fr 130px 130px 90px; gap: var(--sp-6);
  align-items: center; padding: var(--sp-5) var(--sp-8);
  border-bottom: var(--bw) solid var(--line);
}
.grid-table__head {
  background: var(--surface2); padding: 9px var(--sp-8);
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.grid-table__row:hover { background: var(--surface2); }

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat__head {
  flex: none; display: flex; align-items: center; gap: var(--sp-6);
  padding: 11px var(--sp-9); border-bottom: var(--bw) solid var(--line2); background: var(--surface);
}
.chat__name { font-family: var(--mono); font-weight: 700; font-size: var(--fs-16); color: var(--ink); }
.chat__topic {
  font-size: var(--fs-12-5); color: var(--muted);
  border-left: var(--bw) solid var(--line2); padding-left: var(--sp-6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: var(--sp-5) 0; scrollbar-width: thin; }
.chat__log-spacer { margin-top: auto; }
.msg { display: flex; gap: 11px; padding: 5px var(--sp-9); }
.msg:hover { background: var(--surface2); }
.msg--selected { background: rgba(85,107,87,.10); }
.msg__author { font-weight: 600; font-size: var(--fs-13-5); color: var(--ink); }
.msg__time { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); }
.msg__text { font-size: var(--fs-14); line-height: var(--lh-prose); color: var(--ink); white-space: pre-wrap; }
.msg__thread { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--clay); cursor: pointer; }
.msg__thread:hover { text-decoration: underline; }
.typing { flex: none; padding: 3px var(--sp-9) 0; font-size: var(--fs-12); font-style: italic; color: var(--muted); min-height: 18px; }
.composer {
  flex: none; border-top: var(--bw) solid var(--line2); background: var(--surface);
  padding: var(--sp-6) var(--sp-8); display: flex; gap: var(--sp-5); align-items: flex-end;
}
.composer .textarea { min-height: 22px; resize: none; background: var(--surface2); font-size: var(--fs-14); }
.promote-bar {
  flex: none; background: color-mix(in srgb, var(--ochre) 12%, var(--surface));
  border-bottom: var(--bw) solid var(--ochre); padding: 11px var(--sp-9);
}
.promote-bar__kicker {
  font-family: var(--mono); font-size: var(--fs-11); font-weight: 700;
  letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--clay);
}
.presence-dot {
  position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px;
  border-radius: var(--r-pill); border: 1.5px solid var(--surface2);
}

/* ==========================================================================
   ONBOARDING STEPPER
   ========================================================================== */
.steps { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-12); padding: 0; list-style: none; }
.step { display: flex; align-items: center; gap: var(--sp-3); }
.step__dot {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  border: var(--bw) solid var(--line2);
}
.step__dot--done { color: #fff; background: var(--moss); border-color: var(--moss); }
.step__dot--active { color: #fff; background: var(--clay); border-color: var(--clay); }
.step__label { font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted); }
.step__label--active { color: var(--ink); font-weight: 600; }
.step__rule { flex: 1; height: 1px; background: var(--line2); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.choice {
  border: var(--bw) solid var(--line2); border-radius: var(--r-5);
  background: var(--surface); padding: var(--sp-10); display: flex; flex-direction: column;
}
.choice__glyph { font-size: var(--fs-24); }
.choice__title { font-weight: 700; font-size: 17px; color: var(--ink); margin-top: var(--sp-5); }
.choice__body { font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-body); margin: var(--sp-4) 0 var(--sp-8); flex: 1; }
.option {
  flex: 1; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); padding: 11px 13px; cursor: pointer;
}
.option:hover { border-color: var(--ink); }
.option--on { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, var(--surface)); }
.option--off { background: var(--surface2); border-color: var(--line); opacity: .5; cursor: not-allowed; }
.option__title { font-weight: 600; font-size: var(--fs-13-5); color: var(--ink); }
.option__desc { font-size: var(--fs-11-5); color: var(--muted); margin-top: var(--sp-1); }
.option-row { display: flex; gap: var(--sp-4); }

/* ==========================================================================
   AUTH SURFACES (/login, /signup)
   ========================================================================== */
.auth { max-width: var(--content-auth); margin: 0 auto; padding: 52px var(--sp-11) 80px; }
.auth__head { text-align: center; }
.auth__mark { width: 40px; height: 40px; }
.auth__title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-26); color: var(--ink); margin-top: var(--sp-7); }
.auth__sub { color: var(--muted); font-size: var(--fs-13-5); line-height: var(--lh-prose); margin-top: 7px; }
.auth__card {
  margin-top: var(--sp-11); border: var(--bw) solid var(--line);
  border-radius: var(--r-4); background: var(--surface); padding: var(--sp-10);
}
.auth__foot { text-align: center; margin-top: var(--sp-9); font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); }

/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */
.notif {
  display: flex; gap: 13px; padding: 13px var(--sp-3);
  border-bottom: var(--bw) solid var(--line); cursor: pointer; text-decoration: none;
}
.notif:hover { background: var(--surface2); }
.notif--unread { background: color-mix(in srgb, var(--ochre) 7%, var(--surface)); }
.notif__icon {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  font-size: var(--fs-13); background: var(--surface);
}
.notif__text { font-size: var(--fs-13-5); line-height: 1.45; color: var(--ink); }
.notif__ctx {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted); margin-top: var(--sp-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif__side { flex: none; display: flex; align-items: flex-start; gap: var(--sp-4); padding-top: 1px; }
.notif__time { font-family: var(--mono); font-size: var(--fs-11); color: var(--muted); white-space: nowrap; }
.notif__dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--clay); margin-top: 5px; }

/* ==========================================================================
   SETTINGS
   ========================================================================== */
.settings { flex: 1; overflow: hidden; display: flex; min-height: 0; }
.settings__nav {
  flex: none; width: var(--settings-nav-w); border-right: var(--bw) solid var(--line);
  overflow-y: auto; padding: var(--sp-7) var(--sp-6); scrollbar-width: thin;
}
.settings__group {
  font-family: var(--mono); font-size: var(--fs-10); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
  padding: var(--sp-6) var(--sp-4) 5px;
}
.settings__panel { flex: 1; overflow-y: auto; padding: var(--sp-11) var(--sp-13) 70px; min-width: 0; scrollbar-width: thin; }
.settings__panel h2 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-19); color: var(--ink); }
.settings__panel > .col { max-width: 760px; }
.settings__intro { color: var(--muted); font-size: var(--fs-13); margin: var(--sp-3) 0 var(--sp-9); line-height: var(--lh-prose); }
.settings__intro b { color: var(--ink); }
.sub-kicker {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   COMMUNITY HEADER
   ========================================================================== */
.chead { border-bottom: var(--bw) solid var(--line2); background: var(--surface); padding: var(--sp-11) var(--sp-13); }
.chead__row { display: flex; gap: var(--sp-9); align-items: flex-start; }
.chead__title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-27); color: var(--ink); }
.chead__slug { font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); }
.chead__desc { color: var(--muted); font-size: var(--fs-14); line-height: var(--lh-prose); margin-top: var(--sp-4); max-width: 72ch; }
.chead__stats { font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted); margin-top: 11px; }
.chead__actions { display: flex; flex-direction: column; gap: var(--sp-4); flex: none; width: 150px; }
.chead__actions--wide { width: 170px; }
.titleline { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

/* ==========================================================================
   THREAD DETAIL
   ========================================================================== */
.thread { flex: 1; overflow-y: auto; padding: 0 var(--sp-14) 90px; scrollbar-width: thin; }
.thread__head { padding-top: var(--sp-9); border-bottom: var(--bw) solid var(--line2); margin-bottom: var(--sp-11); }
.thread__title { font-family: var(--sans); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-tight); color: var(--ink); margin-top: 1px; text-wrap: pretty; }
.thread__body { font-size: var(--fs-15); line-height: var(--lh-read); color: var(--ink); margin-top: var(--sp-9); white-space: pre-wrap; }
.thread__modtools { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-6); font-family: var(--mono); font-size: var(--fs-11); color: var(--muted); }
.modaction { color: var(--ochre); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.modaction:hover { text-decoration: underline; }
.modaction--report { color: var(--muted); }
.modaction--report:hover { color: var(--danger); text-decoration: none; }
.comments__count { font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); letter-spacing: .03em; margin: 0 0 var(--sp-7); }
.reply-box { border: var(--bw) solid var(--line2); border-radius: var(--r-2); background: var(--surface); overflow: hidden; margin-bottom: var(--sp-11); }
.reply-box .textarea { border: 0; border-radius: 0; background: transparent; min-height: 60px; padding: var(--sp-6) var(--sp-7); }
.reply-box__foot { display: flex; justify-content: flex-end; padding: var(--sp-4) var(--sp-5); border-top: var(--bw) solid var(--line); background: var(--surface2); }
.comment { display: flex; gap: var(--sp-6); padding: 13px 0; border-top: var(--bw) solid var(--line); }
.comment__text { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink); margin-top: 5px; white-space: pre-wrap; }

/* ==========================================================================
   MOBILE NAV (≤767px) — bottom bar replaces the icon rail
   ========================================================================== */
.mobilenav { display: none; }
.drawer { display: none; }

/* ==========================================================================
   RESPONSIVE
   1440+  reference layout (design width)
   1024   right aside hidden; 2-col content collapses
   768    sidebar becomes a drawer; single column; settings nav horizontal
   390    bottom nav bar; search on its own row; stacked headers
   ========================================================================== */

/* ---------- ≤1279px : drop the secondary aside ---------- */
@media (max-width: 1279px) {
  .aside { display: none; }
  .two-col, .two-col--wide { grid-template-columns: minmax(0,1fr); }
  .container { padding-left: var(--sp-11); padding-right: var(--sp-11); }
}

/* ---------- ≤1023px : tighten panes and grids ---------- */
@media (max-width: 1023px) {
  :root { --sidebar-w: 208px; }
  .page__head, .chead { padding-left: var(--sp-10); padding-right: var(--sp-10); }
  .container { padding-left: var(--sp-10); padding-right: var(--sp-10); }
  .project-grid { grid-template-columns: 1fr; }
  .grid-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .thread { padding-left: var(--sp-11); padding-right: var(--sp-11); }
  .settings__panel { padding-left: var(--sp-11); padding-right: var(--sp-11); }
  .chead__row { flex-wrap: wrap; }
  .chead__actions { flex-direction: row; width: 100%; }
  .chead__actions .btn { flex: 1; }
}

/* ---------- ≤767px : one column, drawer nav, bottom bar ---------- */
@media (max-width: 767px) {
  .app { height: 100dvh; }
  /* top bar: two rows — brand+actions, then the command field */
  .topbar {
    height: auto; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-5);
    padding: var(--sp-4) var(--sp-6); row-gap: var(--sp-4);
  }
  .topbar__search-cell { grid-column: 1 / -1; order: 3; }
  .topbar__wordmark { height: 19px; }
  .topbar__mark { height: 26px; width: 26px; }
  .topbar__actions .btn--connect-github { display: none; }
  .userchip__name { display: none; }

  /* rail → fixed bottom bar */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    width: auto; height: 56px; flex-direction: row; justify-content: space-around;
    align-items: center; gap: 0; padding: 0 var(--sp-4);
    border-top: var(--bw) solid #1b211c; overflow: visible;
  }
  .rail__item { width: 44px; height: 44px; }
  .rail__spacer, .rail__divider { display: none; }
  .rail__marker { left: 50%; top: auto; bottom: -1px; transform: translateX(-50%); width: 22px; height: 3px; border-radius: var(--r-1) var(--r-1) 0 0; }
  .rail__item--community { display: none; }         /* communities live in the drawer */
  .rail__item--add { display: grid; }
  .shell { padding-bottom: 56px; }

  /* community sidebar → <details> drawer under the top bar */
  .sidebar { display: none; }
  .drawer { display: block; flex: none; background: var(--surface2); border-bottom: var(--bw) solid var(--line2); }
  .drawer > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-7); background: var(--surface);
    border-bottom: var(--bw) solid var(--line2);
    font-family: var(--mono); font-weight: 700; font-size: var(--fs-14); color: var(--ink);
    min-height: 48px;
  }
  .drawer > summary::-webkit-details-marker { display: none; }
  .drawer > summary::after { content: '▾'; margin-left: auto; color: var(--muted); font-size: var(--fs-12); }
  .drawer[open] > summary::after { content: '▴'; }
  .drawer__body { max-height: 60vh; overflow-y: auto; padding: var(--sp-4); }
  .navitem { min-height: 40px; }

  /* content padding + single column */
  .page__head { padding: var(--sp-6) var(--sp-7) 0; }
  .chead { padding: var(--sp-8) var(--sp-7); }
  .container { padding: 0 var(--sp-7) 72px; }
  .container--form { padding: var(--sp-8) var(--sp-7) 72px; }
  .thread { padding: 0 var(--sp-7) 72px; }
  .auth { padding: var(--sp-13) var(--sp-7) 72px; }

  /* horizontally scrollable tab strips instead of wrapping */
  .tabs, .tabbar, .chips {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
  .tab { padding: var(--sp-5) var(--sp-5); }

  /* stacked headers */
  .chead__row { flex-direction: column; gap: var(--sp-6); }
  .chead__actions { width: 100%; flex-direction: column; }
  .chead__title { font-size: var(--fs-22); }
  .page__title { font-size: 21px; }
  .thread__title { font-size: 20px; }
  .auth__title { font-size: var(--fs-23); }

  /* settings: nav becomes a scrolling strip above the panel */
  .settings { flex-direction: column; }
  .settings__nav {
    width: 100%; border-right: 0; border-bottom: var(--bw) solid var(--line);
    display: flex; align-items: center; gap: var(--sp-2);
    overflow-x: auto; padding: var(--sp-4) var(--sp-6); flex: none;
  }
  .settings__nav .navitem { white-space: nowrap; margin-bottom: 0; }
  .settings__group { display: none; }
  .settings__panel { padding: var(--sp-8) var(--sp-7) 72px; }

  /* tables → stacked rows */
  .grid-table__head { display: none; }
  .grid-table__row { grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-5); }
  .grid-table__row > :nth-child(3) { grid-column: 1 / -1; }
  .table td:first-child { width: auto; }

  /* chat */
  .msg { padding-left: var(--sp-7); padding-right: var(--sp-7); }
  .chat__head { padding: var(--sp-5) var(--sp-7); flex-wrap: wrap; }
  .chat__topic { display: none; }
  .composer { padding: var(--sp-5) var(--sp-7); }

  /* onboarding + choices stack */
  .choice-grid { grid-template-columns: 1fr; }
  .option-row { flex-direction: column; }
  .steps { gap: var(--sp-2); overflow-x: auto; }
  .step__label { display: none; }
  .step__label--active { display: inline; }

  /* touch targets: never below 44px for primary actions */
  .btn { min-height: 44px; }
  .btn--xs, .btn--link, .btn--quiet { min-height: 0; }
}

/* ---------- ≤400px : narrowest supported (iPhone 390) ---------- */
@media (max-width: 400px) {
  .topbar { padding: var(--sp-4) var(--sp-5); }
  .container, .page__head, .chead, .thread, .settings__panel { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .thread-row { gap: var(--sp-5); }
  .vote { width: 26px; }
  .thread-row__title { font-size: var(--fs-14); }
  .notif__ctx { white-space: normal; }
  .card--pad { padding: var(--sp-7); }
  .auth__card { padding: var(--sp-8); }
}

/* ---------- print: documents, not app chrome ---------- */
@media print {
  .rail, .sidebar, .aside, .topbar, .composer, .mobilenav { display: none !important; }
  .app, .shell, .main, .scroll { height: auto; overflow: visible; display: block; }
  body { background: #fff; }
}

/* ==========================================================================
   EARDE INTEGRATION — /bring only
   Everything above is the approved handoff stylesheet, verbatim. Everything
   below is scoped beneath body.launch-bring and exists only because the real
   /bring page cannot emit the reference markup exactly:
   - the non-ready states must contain no <form> anywhere in the document,
     so the top-bar command field is a link, not a search form;
   - the feedback/closed-state banners must keep the test-asserted
     auth-alert class names (auth.css is not loaded on this document);
   - the reference page styled the hero/cards/CTA with inline style
     attributes, converted to classes here;
   - the analytics consent banner markup is shared with the legacy layout,
     whose utility classes are inert without Tailwind, so it is positioned
     and skinned here (a real floating overlay — --shadow-overlay allowed).
   ========================================================================== */

/* Command field rendered as a link to /search (zero-form contract). */
.launch-bring .launch-search { color: var(--ink); }
.launch-bring .launch-search__hint {
  flex: 1; min-width: 0; align-self: center;
  font-size: var(--fs-13-5); color: var(--muted); opacity: .8;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-bring .launch-search__enter {
  display: grid; place-items: center;
  border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px;
}

/* Hero — inline styles in reference/bring.html, as classes. */
.launch-bring .launch-hero { text-align: center; padding: var(--sp-10) 0 var(--sp-4); }
.launch-bring .launch-hero__title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-32);
  margin-top: var(--sp-8);
}
.launch-bring .launch-hero__lead {
  color: var(--muted); font-size: var(--fs-15); line-height: 1.6;
  max-width: 56ch; margin: var(--sp-6) auto 0;
}

/* OPTION A / OPTION B explainer cards. */
.launch-bring .launch-options { margin: 28px 0; }
.launch-bring .launch-option { border-radius: var(--r-4); padding: var(--sp-9); }
.launch-bring .launch-option__kicker { font-size: var(--fs-11); margin-bottom: var(--sp-4); }
.launch-bring .launch-option__kicker--moss { color: var(--moss); }
.launch-bring .launch-option__kicker--ochre { color: var(--ochre); }
.launch-bring .launch-option__title { font-weight: 700; font-size: var(--fs-15); }
.launch-bring .launch-option .card__blurb { margin-top: var(--sp-4); }

/* Centred CTA stack: action (form or state banner), quiet links, footnote. */
.launch-bring .launch-cta {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.launch-bring .launch-footnote {
  font-size: var(--fs-11); color: var(--muted); margin-top: var(--sp-2);
}

/* Banners keep their legacy class names (test contract); flat notice skin.
   Base is neutral because the same class carries closed-state notices, not
   only success feedback. */
.launch-bring .auth-alert {
  border: var(--bw) solid var(--line); border-radius: var(--r-2);
  background: var(--surface2); color: var(--ink);
  font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: 13px var(--sp-8); max-width: 56ch; margin: 0 auto; text-align: center;
}
.launch-bring .auth-alert--error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* Quiet foot links (copy and hrefs are the contract; mono quiet skin). */
.launch-bring .auth-foot {
  text-align: center; font-family: var(--mono); font-size: var(--fs-12);
  color: var(--muted);
}
.launch-bring .auth-link { color: var(--slate); }

/* "What connecting means" explainer blocks below the CTA. */
.launch-bring .launch-explain { margin: var(--sp-14) auto 0; max-width: 620px; }
.launch-bring .launch-explain__block { padding: var(--sp-8); border-top: var(--bw) solid var(--line); }
.launch-bring .launch-explain__block:first-child { border-top: 0; }
.launch-bring .launch-explain__text {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin-top: var(--sp-3);
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-bring #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-bring #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-bring #analytics-consent [data-analytics-accept],
.launch-bring #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-bring #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-bring #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — /login and /signup only
   Scoped beneath body.launch-auth (route roots .launch-login /
   .launch-signup). Exists only because the real auth pages cannot emit the
   reference markup exactly:
   - the top-bar command field is a link, not a search form (same zero-extra-
     form trick as /bring), so its inner cells are skinned here;
   - the reference styled per-page margins with inline style attributes,
     converted to launch-auth__* classes here;
   - the privacy checkbox and its legal sentence are an application contract
     (not in the mockup), skinned as the card's legal line;
   - the analytics consent banner markup is shared with the legacy layout,
     whose utility classes are inert without Tailwind (same rules as the
     /bring section, re-scoped — a real floating overlay, --shadow-overlay
     allowed).
   ========================================================================== */

/* Command field rendered as a link to /search (no extra form contract). */
.launch-auth .launch-search { color: var(--ink); }
.launch-auth .launch-search__hint {
  flex: 1; min-width: 0; align-self: center;
  font-size: var(--fs-13-5); color: var(--muted); opacity: .8;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-auth .launch-search__enter {
  display: grid; place-items: center;
  border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px;
}

/* Card rhythm — inline margins in reference/login.html, as classes. */
.launch-auth .launch-auth__field-last { margin-bottom: 0; }
.launch-auth .launch-auth__meta {
  display: flex; justify-content: flex-end; margin-top: 13px;
  font-family: var(--mono); font-size: var(--fs-11-5);
}
.launch-auth .launch-auth__submit { margin-top: var(--sp-8); }
.launch-auth .launch-auth__notice { margin-top: var(--sp-7); }
.launch-auth .launch-auth__alert { margin-top: var(--sp-7); }

/* u/ prefix group sits inset like its input (reference used an inline
   background on the wrapper). */
.launch-auth .auth__card .input-group { background: var(--surface2); }

/* The privacy checkbox doubles as the card's legal line: sans 11.5, muted,
   wrapping — the mockup's separate legal paragraph is this contract here. */
.launch-auth .launch-auth__legal {
  align-items: flex-start; margin-top: var(--sp-7);
  font-family: var(--sans); font-size: var(--fs-11-5);
  line-height: var(--lh-prose);
}
.launch-auth .launch-auth__legal input { margin-top: 3px; }

/* Turnstile challenge keeps its slot inside the card when configured. */
.launch-auth .auth__card .cf-turnstile { margin-top: var(--sp-7); }

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-auth #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-auth #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-auth #analytics-consent [data-analytics-accept],
.launch-auth #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-auth #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-auth #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — /feed only
   Scoped beneath body.launch-feed. Exists only because the real /feed page
   cannot emit the reference markup exactly:
   - rows come from the shared render_forum_row renderer, whose markup is a
     load-bearing contract (optimistic-vote DOM traversal, replay-masking
     classes .ft-title/.ft-preview, the ⋯ moderation menu, ban/remove
     dialogs); the row is skinned here onto the approved .thread-row anatomy
     instead of being rewritten;
   - the optimistic-vote script toggles legacy Tailwind colour class names on
     the vote buttons; those exact names are mapped to launch accents here;
   - the shared confirm-modal script builds its overlay from legacy utility
     class names (inert without Tailwind), so the overlay, card and buttons
     are styled via their stable ids and class pairs;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; that class is honoured here on the badge element
     only — no global .hidden utility is defined;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the /bring and /login sections, re-scoped).
   ========================================================================== */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-feed .launch-user { position: relative; }
.launch-feed .launch-user > summary { list-style: none; }
.launch-feed .launch-user > summary::-webkit-details-marker { display: none; }
.launch-feed .launch-user .avatar { background: var(--moss); }
.launch-feed .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-feed .launch-user__menu a,
.launch-feed .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-feed .launch-user__menu a:hover,
.launch-feed .launch-user__menu button:hover { background: var(--surface2); }
.launch-feed .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-feed #notif-badge.hidden { display: none; }

/* Rail tiles: real community avatars fill the fixed 42px tile. */
.launch-feed .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}

/* Page-head rhythm (inline margins in reference/feed.html, as classes). */
.launch-feed .launch-scope-tabs { margin-top: 14px; }
.launch-feed .launch-sort-bar { margin-top: 10px; padding-bottom: 12px; }

/* Feed rows: render_forum_row markup skinned onto the .thread-row anatomy. */
.launch-feed .cs-thread {
  display: flex; gap: var(--sp-7); padding: var(--sp-7) var(--sp-2);
  border-bottom: var(--bw) solid var(--line);
}
.launch-feed .cs-thread:hover { background: var(--surface2); }
.launch-feed .ft-main { flex: 1; min-width: 0; }

/* Vote column: up form · score · optional down form (DOM order is the
   optimistic-vote script's contract — style only, never reorder). */
.launch-feed .cs-vote {
  display: flex; flex-direction: column; align-items: center;
  width: 30px; flex: none; padding-top: var(--sp-1);
}
.launch-feed .cs-vote form { margin: 0; padding: 0; display: flex; }
.launch-feed .cs-vote button,
.launch-feed .cs-vote a {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: var(--fs-13); line-height: 1; color: var(--muted);
}
/* Asymmetric arrows: the last control is the downvote (▼ available, not
   encouraged). */
.launch-feed .cs-vote form:last-child button,
.launch-feed .cs-vote a:last-child { color: var(--line2); }
.launch-feed .cs-vote-score {
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-13);
  color: var(--ink); margin: 3px 0;
}
/* Active-vote colours: the exact legacy class names the vote script toggles
   (kept after the base arrow rules so equal specificity resolves to these). */
.launch-feed .cs-vote form button.text-orange-500 { color: var(--clay); }
.launch-feed .cs-vote form button.text-\[\#69C3D2\] { color: var(--slate); }

/* Row context line: § section (moss 700) · /c/slug (mono muted). */
.launch-feed .ft-ctx {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.launch-feed .ft-ctx .sec { color: var(--moss); font-weight: 700; }
.launch-feed .ft-ctx a { color: var(--moss); font-weight: 700; }
.launch-feed .ft-ctx a.ft-ctx-c { color: var(--muted); font-weight: 400; }
.launch-feed .ft-ctx a:hover { color: var(--ink); }

.launch-feed .ft-title {
  font-weight: 600; font-size: var(--fs-15-5); line-height: var(--lh-title);
  text-wrap: pretty;
}
.launch-feed .ft-title a { color: var(--ink); }
.launch-feed .ft-title a:hover { text-decoration: underline; }
.launch-feed .ft-preview {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-feed .ft-meta {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  margin-top: 8px;
}
.launch-feed .ft-meta a { color: var(--muted); }
.launch-feed .ft-meta a:hover { color: var(--ink); }
.launch-feed .ft-domain { color: var(--slate); }
.launch-feed .mod-badge {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--clay);
  margin-left: 4px;
}

/* ⋯ moderation/self-action menu (admins and post authors only). */
.launch-feed .cs-row-mod { position: relative; align-self: flex-start; }
.launch-feed .cs-row-mod > summary {
  list-style: none; cursor: pointer; color: var(--muted);
  font-family: var(--mono); padding: 0 var(--sp-3); border-radius: var(--r-2);
}
.launch-feed .cs-row-mod > summary::-webkit-details-marker { display: none; }
.launch-feed .cs-row-mod > summary:hover { background: var(--surface2); color: var(--ink); }
.launch-feed .cs-row-mod-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-3); min-width: 150px;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-4);
  box-shadow: var(--shadow-overlay);
}

/* Legacy moderation <dialog>s (Tailwind classes inert here): keep them
   readable and usable; admin-only surface. */
.launch-feed dialog {
  border: var(--bw) solid var(--line2); border-radius: var(--r-4);
  padding: var(--sp-9); max-width: 28rem; width: calc(100% - 2rem);
  background: var(--surface); color: var(--ink);
}
.launch-feed dialog::backdrop { background: rgba(31, 36, 33, .45); }
.launch-feed dialog form {
  display: flex; flex-direction: column; gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.launch-feed dialog textarea {
  width: 100%; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-13); min-height: 70px;
}
.launch-feed dialog button {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-feed dialog button[type='submit'] {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* Shared confirm modal (own-post delete): the script composes it from legacy
   utility class names; the stable .fixed.inset-0 pair and the #cancel-btn /
   #confirm-btn ids are the hooks. */
.launch-feed .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-feed .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-feed .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-feed .fixed.inset-0 h3 { font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3); }
.launch-feed .fixed.inset-0 p { font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7); }
.launch-feed .fixed.inset-0 .flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-feed #cancel-btn,
.launch-feed #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-feed #confirm-btn { color: #fff; background: var(--danger); border-color: var(--danger); }

/* Empty-state actions (real destinations kept under the launch .empty). */
.launch-feed .launch-empty-actions {
  display: flex; justify-content: center; gap: var(--sp-5);
  margin-top: var(--sp-7);
}

/* Pager: mono "Page n" centred, real prev/next links beside it. */
.launch-feed .launch-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-7);
}

/* Aside: reference sets padding-left:0 on Following rows inline. */
.launch-feed .aside .navitem { padding-left: 0; }
.launch-feed .launch-aside-alt {
  margin-top: var(--sp-4); font-family: var(--mono); font-size: var(--fs-11);
  text-align: center;
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-feed #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-feed #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-feed #analytics-consent [data-analytics-accept],
.launch-feed #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-feed #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-feed #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — /projects/new only
   Scoped beneath body.launch-project-new. Exists only because the real
   /projects/new page cannot emit the reference markup exactly:
   - the feature fragment beginning at <div class='create-shell'> is a
     byte-exact slicing marker for the test suites, so the existing ps-* /
     create-* markup is styled in place, never rewritten onto the mockup's
     .repo-row anatomy;
   - the top-bar command field is a link, not a search form (same
     zero-extra-form trick as the other launch documents), so its inner
     cells are skinned here;
   - the onboarding stepper (.steps, approved sheet above) is rendered by the
     wrapper before the untouched fragment and needs no extra rules;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route's document hierarchy
     lives here (mirrors mobile-gate.css's body.launch-feed > .app rule);
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* Command field rendered as a link to /search. */
.launch-project-new .launch-search { color: var(--ink); }
.launch-project-new .launch-search__hint {
  flex: 1; min-width: 0; align-self: center;
  font-size: var(--fs-13-5); color: var(--muted); opacity: .8;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-project-new .launch-search__enter {
  display: grid; place-items: center;
  border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px;
}

/* Member top-bar cluster: chip avatar tone + badge reveal hook. */
.launch-project-new .userchip .avatar { background: var(--moss); }
.launch-project-new #notif-badge.hidden { display: none; }

/* Legacy create.css wrappers, flat on the launch column (no cool-grey card). */
.launch-project-new .create-shell { display: block; }
.launch-project-new .create-wrap { max-width: 640px; margin: 0 auto; }
.launch-project-new .create-panel { display: block; }

/* Page head: serif title over a muted lead (reference "GitHub connected"). */
.launch-project-new .create-head { margin-bottom: var(--sp-9); }
.launch-project-new .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-24);
  color: var(--ink);
}
.launch-project-new .create-sub {
  color: var(--muted); font-size: var(--fs-13-5); line-height: var(--lh-prose);
  margin-top: var(--sp-2);
}

/* One-time feedback: flat 1px notices, tinted — never a shadowed alert. */
.launch-project-new .ps-alert {
  border: var(--bw) solid var(--line); border-radius: var(--r-2);
  background: var(--surface2); color: var(--ink);
  font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: 13px var(--sp-8); margin-bottom: var(--sp-8);
}
.launch-project-new .ps-alert--success {
  border-color: var(--moss);
  background: color-mix(in srgb, var(--moss) 9%, var(--surface));
}
.launch-project-new .ps-alert--error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* Quiet links and the footer way into /bring. */
.launch-project-new .create-link { color: var(--slate); }
.launch-project-new .create-link:hover { color: #3b525a; text-decoration: underline; }
.launch-project-new .create-foot {
  margin-top: var(--sp-9); font-family: var(--mono); font-size: var(--fs-12);
}

/* Empty / corrupt states: a sentence, not a poster. */
.launch-project-new .ps-empty,
.launch-project-new .ps-corrupt { margin-top: var(--sp-6); max-width: 56ch; }

/* Draft chooser: bordered row list, whole row is the link. */
.launch-project-new .ps-chooser-intro { margin-bottom: var(--sp-7); }
.launch-project-new .ps-draft-list {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden;
}
.launch-project-new .ps-draft-option {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  border-bottom: var(--bw) solid var(--line);
  color: var(--ink); text-decoration: none;
}
.launch-project-new .ps-draft-list > :last-child { border-bottom: 0; }
.launch-project-new a.ps-draft-option:hover { background: var(--surface2); color: var(--ink); }
.launch-project-new .ps-draft-main { flex: 1; min-width: 0; display: block; }
.launch-project-new .ps-draft-option .create-comm-name {
  display: block; font-weight: 600; font-size: var(--fs-13-5); color: var(--ink);
}
.launch-project-new .ps-draft-option .create-comm-slug {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-10-5);
  color: var(--muted); margin-top: var(--sp-1);
}
.launch-project-new .ps-draft-counts {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-10-5);
  color: var(--muted); margin-left: var(--sp-4);
}
.launch-project-new .create-comm-go {
  flex: none; font-family: var(--mono); font-size: var(--fs-11); color: var(--slate);
}
.launch-project-new .ps-draft-option--unavailable { color: var(--muted); }

/* Repository selection: the existing ps-repo rows on the .rows rhythm. */
.launch-project-new .ps-configure-intro { margin-bottom: var(--sp-7); }
.launch-project-new .ps-configure-intro strong { color: var(--ink); }
.launch-project-new .ps-repo-list {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden; margin: var(--sp-7) 0 0;
}
.launch-project-new .ps-repo {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: var(--bw) solid var(--line);
}
.launch-project-new .ps-repo:last-child { border-bottom: 0; }
.launch-project-new .ps-repo-pick {
  display: flex; align-items: flex-start; gap: var(--sp-6); cursor: pointer;
}
.launch-project-new .ps-repo-pick input {
  accent-color: var(--moss); margin: 3px 0 0; flex: none;
}
.launch-project-new .ps-repo-name {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--ink);
}
/* Selected row: moss-tinted paper, the same signal as .repo-row--selected. */
.launch-project-new .ps-repo:has(input:checked) {
  background: color-mix(in srgb, var(--moss) 8%, var(--surface));
}
.launch-project-new .ps-repo:hover { background: var(--surface2); }
.launch-project-new .ps-repo:has(input:checked):hover {
  background: color-mix(in srgb, var(--moss) 12%, var(--surface));
}
.launch-project-new .ps-repo-desc {
  font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-2);
}
.launch-project-new .ps-repo-meta {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin-top: var(--sp-2);
}
.launch-project-new .ps-repo-branch {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ink);
  background: var(--surface2); border: var(--bw) solid var(--line);
  border-radius: var(--r-1); padding: 0 4px;
}
/* Archived: ochre outline fact tag (projects/pending accent). */
.launch-project-new .ps-repo-archived {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  color: var(--ochre); border: var(--bw) solid currentColor;
  border-radius: var(--r-1); padding: 1px 5px; margin-right: var(--sp-4);
}
/* Unavailable (corrupt snapshot): visibly inert — no control renders. */
.launch-project-new .ps-repo--unavailable { background: var(--surface2); color: var(--muted); }
.launch-project-new .ps-repo--unavailable:hover { background: var(--surface2); }
.launch-project-new .ps-repo--unavailable .ps-repo-name { color: var(--muted); }

/* Primary continuation. */
.launch-project-new .create-actions { margin-top: var(--sp-10); }
.launch-project-new .create-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3); font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-13); color: #fff;
  background: var(--moss); border: var(--bw) solid var(--moss);
  border-radius: var(--r-2); padding: 9px var(--sp-9); cursor: pointer;
}
.launch-project-new .create-btn:hover { filter: brightness(1.06); }
.launch-project-new .create-btn--block { width: 100%; }

/* Project-details step. */
.launch-project-new .ps-id-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-top: var(--sp-11);
}
.launch-project-new .ps-id-intro,
.launch-project-new .ps-id-no-repos { margin-bottom: var(--sp-7); }

/* Verified-selection summary: read-only surface2 card (reference identity
   card idiom), facts in mono. */
.launch-project-new .ps-id-summary {
  border: var(--bw) solid var(--line); border-radius: var(--r-4);
  background: var(--surface2); padding: var(--sp-8);
  margin: var(--sp-7) 0 var(--sp-9);
}
.launch-project-new .ps-id-verified {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--moss); margin-bottom: var(--sp-4);
}
.launch-project-new .ps-id-repo {
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--ink);
  padding: var(--sp-2) 0;
}
.launch-project-new .ps-id-change {
  font-family: var(--mono); font-size: var(--fs-11);
  margin-top: var(--sp-4);
}

/* Identity form fields: mono fact labels over sans controls. */
.launch-project-new .ps-id-field {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: var(--sp-8);
}
.launch-project-new .ps-id-field input,
.launch-project-new .ps-id-field textarea,
.launch-project-new .ps-id-field select {
  display: block; width: 100%; margin-top: 5px;
  font-family: var(--sans); font-size: var(--fs-14); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 9px var(--sp-6); outline: none;
}
.launch-project-new .ps-id-field input:focus,
.launch-project-new .ps-id-field textarea:focus,
.launch-project-new .ps-id-field select:focus { border-color: var(--moss); }
.launch-project-new .ps-id-field input[name='slug'] {
  font-family: var(--mono); font-size: var(--fs-13);
}
.launch-project-new .ps-id-field textarea {
  min-height: 70px; resize: vertical;
  font-size: var(--fs-13-5); line-height: var(--lh-prose);
}
.launch-project-new .ps-id-field select {
  font-family: var(--mono); font-size: var(--fs-13);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: var(--sp-13);
}
.launch-project-new .ps-id-help {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin: -3px 0 var(--sp-8); line-height: var(--lh-prose);
}

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-project-new > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-project-new #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-project-new #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-project-new #analytics-consent [data-analytics-accept],
.launch-project-new #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-project-new #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-project-new #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — /projects/:slug/setup only
   Scoped beneath body.launch-project-home-setup. Exists only because the
   real "Project created" page cannot emit the reference markup exactly:
   - the feature fragment beginning at <div class='create-shell'> is a
     byte-exact slicing marker for the test suites, so the existing phs-* /
     create-* markup is styled in place — the mockup's .choice anatomy is
     recreated over the two pinned phs-next-* paragraphs and anchors, and
     the card glyphs are decorative pseudo-content, never new markup;
   - the mockup's editable "Project details" form belongs to the identity
     step on /projects/new; this destination is read-only by contract, so
     only the identity summary and the home-choice section are drawn;
   - the top-bar command field is a link, not a search form (same
     zero-extra-form trick as the other launch documents);
   - the onboarding stepper (.steps, approved sheet above) is rendered by
     the wrapper before the untouched fragment and needs no extra rules;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route's document hierarchy
     lives here (mirrors mobile-gate.css's body.launch-feed > .app rule);
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* Command field rendered as a link to /search. */
.launch-project-home-setup .launch-search { color: var(--ink); }
.launch-project-home-setup .launch-search__hint {
  flex: 1; min-width: 0; align-self: center;
  font-size: var(--fs-13-5); color: var(--muted); opacity: .8;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-project-home-setup .launch-search__enter {
  display: grid; place-items: center;
  border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px;
}

/* Member top-bar cluster: chip avatar tone + badge reveal hook. */
.launch-project-home-setup .userchip .avatar { background: var(--moss); }
.launch-project-home-setup #notif-badge.hidden { display: none; }

/* Legacy create.css wrappers, flat on the launch column (no cool-grey card). */
.launch-project-home-setup .create-shell { display: block; }
.launch-project-home-setup .create-wrap { max-width: 640px; margin: 0 auto; }
.launch-project-home-setup .create-panel { display: block; }

/* Page head: serif title over the factual verification line — moss mono,
   a check drawn as decorative pseudo-content (the copy itself is pinned). */
.launch-project-home-setup .create-head { margin-bottom: var(--sp-9); }
.launch-project-home-setup .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-24);
  color: var(--ink);
}
.launch-project-home-setup .create-sub {
  color: var(--muted); font-size: var(--fs-13-5); line-height: var(--lh-prose);
  margin-top: var(--sp-2);
}
.launch-project-home-setup .phs-verified {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--moss);
}
.launch-project-home-setup .phs-verified::before { content: '\2713\00a0'; }

/* Quiet links. */
.launch-project-home-setup .create-link { color: var(--slate); }
.launch-project-home-setup .create-link:hover { color: #3b525a; text-decoration: underline; }

/* Project identity summary: the read-only surface2 card idiom (reference
   "verified repository identity"), serif name over mono facts. */
.launch-project-home-setup .phs-summary {
  border: var(--bw) solid var(--line); border-radius: var(--r-4);
  background: var(--surface2); padding: var(--sp-8) var(--sp-9);
}
.launch-project-home-setup .phs-name {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-5);
}
.launch-project-home-setup .phs-facts {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-8); margin: 0;
}
.launch-project-home-setup .phs-facts dt {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); padding-top: 2px;
}
.launch-project-home-setup .phs-facts dd {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-size: var(--fs-13); color: var(--ink);
}
.launch-project-home-setup .phs-slug {
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--moss);
}
.launch-project-home-setup .phs-namespace,
.launch-project-home-setup .phs-kind { font-family: var(--mono); font-size: var(--fs-12-5); }
.launch-project-home-setup .phs-description {
  font-family: var(--sans); font-size: var(--fs-12-5); color: var(--muted);
  line-height: var(--lh-prose);
}
.launch-project-home-setup .phs-website { font-family: var(--mono); font-size: var(--fs-12-5); }

/* Repositories: bordered row list on the .rows rhythm. */
.launch-project-home-setup .phs-repos { margin-top: var(--sp-10); }
.launch-project-home-setup .phs-repos-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink);
}
.launch-project-home-setup .phs-repo-list {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden; margin-top: var(--sp-6);
}
.launch-project-home-setup .phs-repo {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: var(--bw) solid var(--line);
}
.launch-project-home-setup .phs-repo:last-child { border-bottom: 0; }
.launch-project-home-setup .phs-repo-name {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--ink);
}
/* Primary: moss outline fact tag (verified accent); Archived: ochre
   (projects/pending accent) — text-and-border, never a fill. */
.launch-project-home-setup .phs-repo-primary,
.launch-project-home-setup .phs-repo-archived {
  display: inline-flex; align-items: center; vertical-align: 1px;
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  border: var(--bw) solid currentColor;
  border-radius: var(--r-1); padding: 1px 5px; margin-left: var(--sp-4);
}
.launch-project-home-setup .phs-repo-primary { color: var(--moss); }
.launch-project-home-setup .phs-repo-archived { color: var(--ochre); }
.launch-project-home-setup .phs-repo-desc {
  font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-2);
}
.launch-project-home-setup .phs-repo-meta {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin-top: var(--sp-2);
}
.launch-project-home-setup .phs-repo-branch {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ink);
  background: var(--surface2); border: var(--bw) solid var(--line);
  border-radius: var(--r-1); padding: 0 4px;
}

/* Home choice: below a hairline, the two flat bordered cards (reference
   .choice anatomy over the pinned phs-next-* markup). The create card leads
   visually (grid order only — DOM order is test-pinned), glyphs are
   decorative pseudo-content, and each pinned anchor is drawn as the card's
   one strong action: moss fill for the dedicated home, ochre for the
   connect path — the reference's own .btn--primary / .btn--project pair. */
.launch-project-home-setup .phs-next {
  margin-top: var(--sp-11); padding-top: var(--sp-10);
  border-top: var(--bw) solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-8);
}
.launch-project-home-setup .phs-next-title {
  grid-column: 1 / -1; order: 1;
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink);
}
.launch-project-home-setup .phs-next-copy {
  grid-column: 1 / -1; order: 2;
  margin: 0 0 var(--sp-5);
}
.launch-project-home-setup .phs-next-connect,
.launch-project-home-setup .phs-next-create {
  border: var(--bw) solid var(--line2); border-radius: var(--r-5);
  background: var(--surface); padding: var(--sp-10);
  display: flex; flex-direction: column; margin: 0;
}
.launch-project-home-setup .phs-next-create { order: 3; }
.launch-project-home-setup .phs-next-connect { order: 4; }
.launch-project-home-setup .phs-next-create::before {
  content: '\2302'; color: var(--moss);
  font-size: var(--fs-24); line-height: 1; margin-bottom: var(--sp-6);
}
.launch-project-home-setup .phs-next-connect::before {
  content: '\25C8'; color: var(--ochre);
  font-size: var(--fs-24); line-height: 1; margin-bottom: var(--sp-6);
}
.launch-project-home-setup .phs-next-connect .create-link,
.launch-project-home-setup .phs-next-create .create-link {
  display: flex; align-items: center; justify-content: center;
  text-align: center; margin-top: auto;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-13);
  border: var(--bw) solid; border-radius: var(--r-3);
  padding: 9px var(--sp-8);
}
.launch-project-home-setup .phs-next-create .create-link {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-project-home-setup .phs-next-create .create-link:hover {
  color: #fff; text-decoration: none; filter: brightness(1.06);
}
.launch-project-home-setup .phs-next-connect .create-link {
  color: #fff; background: var(--ochre); border-color: var(--ochre);
}
.launch-project-home-setup .phs-next-connect .create-link:hover {
  color: #fff; text-decoration: none; filter: brightness(1.05);
}

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-project-home-setup > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-project-home-setup #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-project-home-setup #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-project-home-setup #analytics-consent [data-analytics-accept],
.launch-project-home-setup #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-project-home-setup #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-project-home-setup #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — project home choice branches only
   Scoped beneath body.launch-project-request-home
   (GET/POST /projects/:slug/request-home and its re-renders) and
   body.launch-project-community-home (/projects/:slug/community-home/new
   and its re-renders). Exists only because the two real branch pages cannot
   emit the reference markup exactly:
   - each feature fragment beginning at <div class='create-shell'> is a
     byte-exact slicing marker for the test suites, so the existing phc-* /
     phv-* / phrm-* / create-* markup is styled in place — the mockup's
     .repo-row chooser and identity-card anatomy are recreated over the
     pinned rows, never rewritten onto new markup;
   - the mockup's community search field, member counts, match badges,
     default-structure chips, and publication options are unsupported by the
     backend contracts of these routes (visibility is chosen later at
     publication) and are deliberately not drawn;
   - the top-bar command field is a link, not a search form (same
     zero-extra-form trick as the other launch documents);
   - the onboarding stepper (.steps, approved sheet above) is rendered by
     the wrapper before the untouched fragment and needs no extra rules;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rules for these routes' document
     hierarchies live here (mirrors mobile-gate.css's body.launch-feed
     > .app rule);
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   phc-* rules are scoped beneath launch-project-request-home only; phv-*
   rules beneath launch-project-community-home only.
   ========================================================================== */

/* ---- Shared launch chrome (both branch roots) ------------------------- */

/* Command field rendered as a link to /search. */
.launch-project-request-home .launch-search,
.launch-project-community-home .launch-search { color: var(--ink); }
.launch-project-request-home .launch-search__hint,
.launch-project-community-home .launch-search__hint {
  flex: 1; min-width: 0; align-self: center;
  font-size: var(--fs-13-5); color: var(--muted); opacity: .8;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-project-request-home .launch-search__enter,
.launch-project-community-home .launch-search__enter {
  display: grid; place-items: center;
  border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px;
}

/* Member top-bar cluster: chip avatar tone + badge reveal hook. */
.launch-project-request-home .userchip .avatar,
.launch-project-community-home .userchip .avatar { background: var(--moss); }
.launch-project-request-home #notif-badge.hidden,
.launch-project-community-home #notif-badge.hidden { display: none; }

/* Legacy create.css wrappers, flat on the launch column (no cool-grey card). */
.launch-project-request-home .create-shell,
.launch-project-community-home .create-shell { display: block; }
.launch-project-request-home .create-wrap,
.launch-project-community-home .create-wrap { max-width: 640px; margin: 0 auto; }
.launch-project-request-home .create-panel,
.launch-project-community-home .create-panel { display: block; }

/* Page head: serif title over a muted lead. */
.launch-project-request-home .create-head,
.launch-project-community-home .create-head { margin-bottom: var(--sp-8); }
.launch-project-request-home .create-title,
.launch-project-community-home .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-24);
  color: var(--ink);
}
.launch-project-request-home .create-sub,
.launch-project-community-home .create-sub {
  color: var(--muted); font-size: var(--fs-13-5); line-height: var(--lh-prose);
  margin-top: var(--sp-2);
}

/* The factual verification line: moss mono, check drawn as decorative
   pseudo-content (the copy itself is pinned). */
.launch-project-request-home .phc-verified,
.launch-project-community-home .phv-verified {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--moss);
  margin-top: var(--sp-2);
}
.launch-project-request-home .phc-verified::before,
.launch-project-community-home .phv-verified::before { content: '\2713\00a0'; }

/* Quiet links. */
.launch-project-request-home .create-link,
.launch-project-community-home .create-link { color: var(--slate); }
.launch-project-request-home .create-link:hover,
.launch-project-community-home .create-link:hover {
  color: #3b525a; text-decoration: underline;
}

/* One-time feedback: a flat 1px danger-tinted notice — every variant on
   these two routes reports a refused submission. Never a shadowed alert. */
.launch-project-request-home .phc-alert,
.launch-project-community-home .phv-alert {
  border: var(--bw) solid var(--danger); border-radius: var(--r-2);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: 13px var(--sp-8); margin-bottom: var(--sp-8);
}

/* The one strong submit action. Inline (the reference footer button), never
   a full-bleed bar: create-btn--block is pinned markup, restyled here.
   Accent per branch — moss for the dedicated home (.btn--primary), ochre
   for the request (.btn--project); one accent per element. */
.launch-project-request-home .create-actions,
.launch-project-community-home .create-actions { margin-top: var(--sp-10); }
.launch-project-request-home .create-btn,
.launch-project-community-home .create-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3); font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-13); color: #fff;
  border: var(--bw) solid; border-radius: var(--r-3);
  padding: 9px var(--sp-10); cursor: pointer;
}
.launch-project-request-home .create-btn--block,
.launch-project-community-home .create-btn--block { width: auto; }
.launch-project-request-home .create-btn {
  background: var(--ochre); border-color: var(--ochre);
}
.launch-project-request-home .create-btn:hover { filter: brightness(1.05); }
.launch-project-community-home .create-btn {
  background: var(--moss); border-color: var(--moss);
}
.launch-project-community-home .create-btn:hover { filter: brightness(1.06); }

/* ---- Request-home branch (phc-*, phrm-*) ------------------------------ */

/* The project whose home is being chosen: one factual line. */
.launch-project-request-home .phc-project {
  font-size: var(--fs-13-5); color: var(--muted); margin-bottom: var(--sp-6);
}
.launch-project-request-home .phc-project strong { color: var(--ink); }

/* Who decides, and what verification does not grant: a consequence notice —
   dashed frame, per the approved system (solid = status, dashed =
   consequence). */
.launch-project-request-home .phc-review-copy {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-3);
  background: var(--surface); color: var(--muted);
  font-size: var(--fs-12-5); line-height: var(--lh-prose);
  padding: var(--sp-6) var(--sp-8); margin-bottom: var(--sp-8);
}

/* Community chooser: the bordered .rows rhythm, one radio row per eligible
   community. The whole label is the hit target; the real radio stays
   visible (moss accent) — selection is also echoed by the row tint. */
.launch-project-request-home .phc-community-list {
  border: var(--bw) solid var(--line); border-radius: var(--r-4);
  background: var(--surface); overflow: hidden; margin-bottom: var(--sp-8);
}
.launch-project-request-home .phc-community {
  border-bottom: var(--bw) solid var(--line);
  padding: var(--sp-6) var(--sp-8);
}
.launch-project-request-home .phc-community:last-child { border-bottom: 0; }
.launch-project-request-home .phc-community label {
  display: block; cursor: pointer;
}
.launch-project-request-home .phc-community input[type='radio'] {
  accent-color: var(--moss); margin: 0 var(--sp-4) 0 0; vertical-align: -1px;
}
.launch-project-request-home .phc-community:has(input:checked) {
  background: color-mix(in srgb, var(--moss) 10%, var(--surface));
}
.launch-project-request-home .phc-community:hover { background: var(--surface2); }
.launch-project-request-home .phc-community:has(input:checked):hover {
  background: color-mix(in srgb, var(--moss) 13%, var(--surface));
}
.launch-project-request-home .phc-community--unavailable,
.launch-project-request-home .phc-community--unavailable:hover {
  background: var(--surface2); color: var(--muted);
}
.launch-project-request-home .phc-community-name {
  font-weight: 600; font-size: var(--fs-14); color: var(--ink);
}
.launch-project-request-home .phc-community--unavailable .phc-community-name {
  color: var(--muted);
}
.launch-project-request-home .phc-community-slug {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-project-request-home a.phc-community-slug { color: var(--slate); }
/* The Public / Unlisted publication fact: a mono outline tag. */
.launch-project-request-home .phc-community-visibility {
  display: inline-flex; align-items: center; vertical-align: 1px;
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  color: var(--muted); border: var(--bw) solid currentColor;
  border-radius: var(--r-1); padding: 1px 5px; margin-left: var(--sp-3);
}
.launch-project-request-home .phc-community-desc {
  font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-prose);
  margin: var(--sp-2) 0 0 22px;
}

/* Request note: mono fact label over a restrained sans textarea. */
.launch-project-request-home .phc-note-field {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: var(--sp-4);
}
.launch-project-request-home .phc-note-field textarea {
  display: block; width: 100%; margin-top: 5px;
  font-family: var(--sans); font-size: var(--fs-13-5); color: var(--ink);
  line-height: var(--lh-prose); min-height: 70px; resize: vertical;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 9px var(--sp-6); outline: none;
}
.launch-project-request-home .phc-note-field textarea:focus {
  border-color: var(--moss);
}
.launch-project-request-home .phc-note-copy {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  line-height: var(--lh-prose); margin-top: var(--sp-2);
}

/* Pending state: the ochre pending notice — 1px frame, 3px left rule,
   ochre-tinted paper. Pending is a fact, not an error. */
.launch-project-request-home .phc-pending-copy {
  border: var(--bw) solid var(--ochre);
  border-left: var(--bw-accent-3) solid var(--ochre);
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--ochre) 8%, var(--surface));
  color: var(--muted); font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: var(--sp-7) var(--sp-8);
}
.launch-project-request-home .phc-pending-copy strong { color: var(--ink); }

/* Accepted state: the moss success notice. */
.launch-project-request-home .phc-accepted-copy {
  border: var(--bw) solid var(--moss); border-radius: var(--r-3);
  background: color-mix(in srgb, var(--moss) 9%, var(--surface));
  color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: var(--sp-7) var(--sp-8);
}

/* An active target that later became ineligible: ochre outline fact tag. */
.launch-project-request-home .phc-community-availability {
  display: inline-flex; align-items: center; vertical-align: 1px;
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  color: var(--ochre); border: var(--bw) solid currentColor;
  border-radius: var(--r-1); padding: 1px 5px;
}

/* No eligible community: a sentence, not a poster. */
.launch-project-request-home .phc-none {
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
  line-height: var(--lh-prose); margin-top: var(--sp-6); max-width: 56ch;
}

/* The way back to the project setup page. */
.launch-project-request-home .phc-back {
  margin-top: var(--sp-9); font-family: var(--mono); font-size: var(--fs-12);
}

/* Steward removal fragment (accepted state only): a quiet section under a
   hairline; destructive action stays text-and-border danger, never a fill. */
.launch-project-request-home .phrm-removal {
  margin-top: var(--sp-11); padding-top: var(--sp-9);
  border-top: var(--bw) solid var(--line);
}
.launch-project-request-home .phrm-removal-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-4);
}
.launch-project-request-home .phrm-removal-copy {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  margin-bottom: var(--sp-6);
}
.launch-project-request-home .phrm-btn {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  color: var(--danger); background: var(--surface);
  border: var(--bw) solid var(--danger); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
}
.launch-project-request-home .phrm-btn:hover {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* ---- Dedicated-home branch (phv-*) ------------------------------------ */

/* Project identity summary: the read-only surface2 card idiom, serif name
   over mono facts. */
.launch-project-community-home .phv-project {
  border: var(--bw) solid var(--line); border-radius: var(--r-4);
  background: var(--surface2); padding: var(--sp-8) var(--sp-9);
  margin-bottom: var(--sp-8);
}
.launch-project-community-home .phv-project-name {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-2);
}
.launch-project-community-home .phv-project-meta {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
}
.launch-project-community-home .phv-project-desc {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  margin-top: var(--sp-4);
}

/* What happens next: consequences of creating the draft — dashed frame,
   per the approved system (solid = status, dashed = consequence). */
.launch-project-community-home .phv-explain {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-7) var(--sp-8);
  margin-bottom: var(--sp-9);
}
.launch-project-community-home .phv-explain-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-4);
}
.launch-project-community-home .phv-explain-list li {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  padding-left: var(--sp-6); position: relative; margin-bottom: var(--sp-2);
}
.launch-project-community-home .phv-explain-list li::before {
  content: '\00B7'; position: absolute; left: 0; color: var(--moss);
  font-weight: 700;
}
.launch-project-community-home .phv-explain-list li:last-child { margin-bottom: 0; }

/* Identity form fields: mono fact labels over inset sans controls; the
   community address stays mono — the value is a URL fact. */
.launch-project-community-home .phv-field {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: var(--sp-8);
}
.launch-project-community-home .phv-field input,
.launch-project-community-home .phv-field textarea {
  display: block; width: 100%; margin-top: 5px;
  font-family: var(--sans); font-size: var(--fs-14); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 9px var(--sp-6); outline: none;
}
.launch-project-community-home .phv-field input:focus,
.launch-project-community-home .phv-field textarea:focus {
  border-color: var(--moss);
}
.launch-project-community-home .phv-field input[name='community_slug'] {
  font-family: var(--mono); font-size: var(--fs-13);
}
.launch-project-community-home .phv-field textarea {
  min-height: 70px; resize: vertical;
  font-size: var(--fs-13-5); line-height: var(--lh-prose);
}
/* The /c/<address> semantics, as a mono field hint tucked under the
   address control. */
.launch-project-community-home .phv-hint {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  line-height: var(--lh-prose); margin: -3px 0 var(--sp-8);
}

/* The way back to the project setup page. */
.launch-project-community-home .phv-back {
  margin-top: var(--sp-9); font-family: var(--mono); font-size: var(--fs-12);
}

/* ---- Shared gate + consent (both branch roots) ------------------------ */

/* Desktop-only gate: hide these routes' launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-project-request-home > .app,
  body.launch-project-community-home > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-project-request-home #analytics-consent,
.launch-project-community-home #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-project-request-home #analytics-consent p,
.launch-project-community-home #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-project-request-home #analytics-consent [data-analytics-accept],
.launch-project-request-home #analytics-consent [data-analytics-refuse],
.launch-project-community-home #analytics-consent [data-analytics-accept],
.launch-project-community-home #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-project-request-home #analytics-consent [data-analytics-accept],
.launch-project-community-home #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-project-request-home #analytics-consent [data-analytics-error],
.launch-project-community-home #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — /c/:slug/setup only
   Scoped beneath body.launch-community-publication (GET /c/:slug/setup and
   every re-render POST /c/:slug/publish produces: 422 validation, 409
   conflict, and the stale-CSRF 403). Exists only because the real
   publication page cannot emit the reference markup exactly:
   - the feature fragment beginning at <div class='create-shell'> is a
     byte-exact slicing marker for the test suites, so the existing ncp-* /
     create-* markup is styled in place — the mockup's option-card and rows
     anatomy is recreated over the pinned form, never rewritten onto new
     markup;
   - the handoff's community-setup reference is the mockup flow's
     post-publication "Complete" celebration (checklist, settings links,
     Open /c/… buttons); the real route is the Configure step — the
     review-and-publish form — so this section applies the approved
     Configure grammar (08-project-community-home-new) to the real
     contract: name, address, description, and exactly the Public/Unlisted
     radio pair (no Private card, no structure chips, no preview);
   - the top-bar command field is a link, not a search form (same
     zero-extra-form trick as the other launch documents);
   - the onboarding stepper (.steps, approved sheet above) is rendered by
     the wrapper before the untouched fragment and needs no extra rules;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route's document hierarchy
     lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome -------------------------------------------------------- */

/* Command field rendered as a link to /search. */
.launch-community-publication .launch-search { color: var(--ink); }
.launch-community-publication .launch-search__hint {
  flex: 1; min-width: 0; align-self: center;
  font-size: var(--fs-13-5); color: var(--muted); opacity: .8;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-community-publication .launch-search__enter {
  display: grid; place-items: center;
  border-left: var(--bw) solid var(--line); background: var(--surface3);
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-12);
  padding: 0 13px;
}

/* Member top-bar cluster: chip avatar tone + badge reveal hook. */
.launch-community-publication .userchip .avatar { background: var(--moss); }
.launch-community-publication #notif-badge.hidden { display: none; }

/* Legacy create.css wrappers, flat on the launch column (no cool-grey card). */
.launch-community-publication .create-shell { display: block; }
.launch-community-publication .create-wrap { max-width: 640px; margin: 0 auto; }
.launch-community-publication .create-panel { display: block; }

/* Page head: serif title over a muted lead. */
.launch-community-publication .create-head { margin-bottom: var(--sp-8); }
.launch-community-publication .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-24);
  color: var(--ink);
}
.launch-community-publication .create-sub {
  color: var(--muted); font-size: var(--fs-13-5); line-height: var(--lh-prose);
  margin-top: var(--sp-2);
}

/* ---- Refused-submission feedback ------------------------------------------ */

/* One-time feedback: a flat 1px danger-tinted notice — every ncp variant on
   this route (validation, conflict, stale form, publication failure) reports
   a refused submission. Never a shadowed alert. */
.launch-community-publication .ncp-alert {
  border: var(--bw) solid var(--danger); border-radius: var(--r-2);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: 13px var(--sp-8); margin-bottom: var(--sp-8);
}

/* ---- Connected-project identity ------------------------------------------- */

/* The project this community is the home of: the read-only surface2 card
   idiom — serif name over mono facts, the factual GitHub-verification line
   in moss mono with a decorative check drawn as pseudo-content (the copy
   itself is pinned). */
.launch-community-publication .ncp-project {
  border: var(--bw) solid var(--line); border-radius: var(--r-4);
  background: var(--surface2); padding: var(--sp-8) var(--sp-9);
  margin-bottom: var(--sp-8);
}
.launch-community-publication .ncp-project-name {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-2);
}
.launch-community-publication .ncp-project-meta {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
}
.launch-community-publication .ncp-project-note {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--moss);
  margin-top: var(--sp-2);
}
.launch-community-publication .ncp-project-note::before { content: '\2713\00a0'; }

/* ---- Draft state and publication consequences ----------------------------- */

/* Where this community stands: consequences of publishing — dashed frame,
   per the approved system (solid = status, dashed = consequence). */
.launch-community-publication .ncp-explain {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-7) var(--sp-8);
  margin-bottom: var(--sp-8);
}
.launch-community-publication .ncp-explain-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-4);
}
.launch-community-publication .ncp-explain-list li {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  padding-left: var(--sp-6); position: relative; margin-bottom: var(--sp-2);
}
.launch-community-publication .ncp-explain-list li::before {
  content: '\00B7'; position: absolute; left: 0; color: var(--moss);
  font-weight: 700;
}
.launch-community-publication .ncp-explain-list li:last-child { margin-bottom: 0; }

/* The two discovery choices, factually explained before the radio pair: the
   bordered .rows rhythm — one hairline-separated row per choice, the choice
   name in ink, the indexing consequence in muted prose, noindex as a mono
   fact. */
.launch-community-publication .ncp-choices { margin-bottom: var(--sp-9); }
.launch-community-publication .ncp-choices-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-4);
}
.launch-community-publication .ncp-choices-list {
  border: var(--bw) solid var(--line); border-radius: var(--r-4);
  background: var(--surface); overflow: hidden;
}
.launch-community-publication .ncp-choices-list li {
  border-bottom: var(--bw) solid var(--line);
  padding: var(--sp-6) var(--sp-8);
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
}
.launch-community-publication .ncp-choices-list li:last-child { border-bottom: 0; }
.launch-community-publication .ncp-choices-list strong { color: var(--ink); }
.launch-community-publication .ncp-choices-list code {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--ink);
  background: var(--surface2); border-radius: var(--r-1); padding: 0 4px;
}

/* ---- Identity form -------------------------------------------------------- */

/* Identity fields: mono fact labels over inset sans controls; the community
   address stays mono — the value is a URL fact. */
.launch-community-publication .ncp-field {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: var(--sp-8);
}
.launch-community-publication .ncp-field input,
.launch-community-publication .ncp-field textarea {
  display: block; width: 100%; margin-top: 5px;
  font-family: var(--sans); font-size: var(--fs-14); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 9px var(--sp-6); outline: none;
}
.launch-community-publication .ncp-field input:focus,
.launch-community-publication .ncp-field textarea:focus {
  border-color: var(--moss);
}
.launch-community-publication .ncp-field input[name='community_slug'] {
  font-family: var(--mono); font-size: var(--fs-13);
}
.launch-community-publication .ncp-field textarea {
  min-height: 110px; resize: vertical;
  font-size: var(--fs-13-5); line-height: var(--lh-prose);
}
/* The /c/<address> semantics, as a mono field hint tucked under the address
   control (the hint follows that field in the pinned markup). */
.launch-community-publication .ncp-hint {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  line-height: var(--lh-prose); margin: calc(-1 * var(--sp-5)) 0 var(--sp-8);
}

/* Publish as: mono kicker legend over the Public / Unlisted pair as flat
   bordered radio cards — the whole label is the hit target, the real radio
   stays visible (moss accent), and selection is echoed by a moss row tint.
   No third card exists: the page offers no Private shape. */
.launch-community-publication .ncp-visibility {
  border: 0; padding: 0; margin: 0 0 var(--sp-4);
}
.launch-community-publication .ncp-legend {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); padding: 0; margin-bottom: var(--sp-4);
}
.launch-community-publication .ncp-radio {
  display: block; cursor: pointer;
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-4);
  font-weight: 600; font-size: var(--fs-13-5); color: var(--ink);
}
.launch-community-publication .ncp-radio:hover { background: var(--surface2); }
.launch-community-publication .ncp-radio input[type='radio'] {
  accent-color: var(--moss); margin: 0 var(--sp-4) 0 0; vertical-align: -1px;
}
.launch-community-publication .ncp-radio:has(input:checked) {
  border-color: var(--moss);
  background: color-mix(in srgb, var(--moss) 10%, var(--surface));
}
.launch-community-publication .ncp-radio:has(input:checked):hover {
  background: color-mix(in srgb, var(--moss) 13%, var(--surface));
}

/* The one strong publication action. Inline (the reference footer button),
   never a full-bleed bar: create-btn--block is pinned markup, restyled here.
   Moss — publication is the primary action of the whole onboarding flow. */
.launch-community-publication .create-actions { margin-top: var(--sp-10); }
.launch-community-publication .create-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3); font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-13); color: #fff;
  background: var(--moss); border: var(--bw) solid var(--moss);
  border-radius: var(--r-3); padding: 9px var(--sp-10); cursor: pointer;
}
.launch-community-publication .create-btn--block { width: auto; }
.launch-community-publication .create-btn:hover { filter: brightness(1.06); }

/* ---- Gate + consent -------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-publication > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-publication #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-publication #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-publication #analytics-consent [data-analytics-accept],
.launch-community-publication #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-publication #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-publication #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — structured /c/:slug overview only
   Scoped beneath body.launch-community-overview: the structured-community
   branch of GET /c/:slug (Pages.community_overview_page). Flat communities
   (sections_enabled = false) render Pages.community_page and are scoped by
   their own section below; channel/section/thread pages likewise. Exists
   only because the real overview cannot emit the reference markup exactly:
   - the connected-projects fragment (ccp-*) is byte-pinned by its fragment
     suites (tag allow-list, counts, DOM order, escaping), so it is spliced
     verbatim and skinned here onto the approved panel + 1px-gap
     project-grid anatomy — no markup inside the fragment changes;
   - the join/leave controls are the legacy POST forms (exact fields)
     restyled; the reference's static Joined button is the real Leave form;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome -------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-overview .launch-user { position: relative; }
.launch-community-overview .launch-user > summary { list-style: none; }
.launch-community-overview .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-overview .launch-user .avatar { background: var(--moss); }
.launch-community-overview .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-overview .launch-user__menu a,
.launch-community-overview .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-overview .launch-user__menu a:hover,
.launch-community-overview .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-overview .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-overview #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head, crest). */
.launch-community-overview .launch-rail__img,
.launch-community-overview .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ----------------------------------------------------- */

.launch-community-overview .launch-side-id { min-width: 0; display: block; }

/* Factual visibility marker (private communities only; public is unmarked). */
.launch-community-overview .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Header band ----------------------------------------------------------- */

/* Optional banner (real stored image only; no gradient placeholder). */
.launch-community-overview .launch-banner {
  border-bottom: var(--bw) solid var(--line2); background: var(--surface2);
}
.launch-community-overview .launch-banner-img {
  display: block; width: 100%; max-height: 180px; object-fit: cover;
}

/* Identity column mirrors the reference's inline flex:1;min-width:0. */
.launch-community-overview .launch-chead-id { flex: 1; min-width: 0; }

/* The action column holds real forms (join/leave); each form is one row and
   its submit control fills it like the reference's static buttons. */
.launch-community-overview .chead__actions form { display: flex; margin: 0; }
.launch-community-overview .chead__actions form .btn { flex: 1; }

/* Leave = the reference's Joined affordance: quiet until hover warns. */
.launch-community-overview .launch-leave:hover {
  border-color: var(--danger); color: var(--danger); background: var(--surface);
}

/* ---- Overview body --------------------------------------------------------- */

.launch-community-overview .launch-overview-body { padding-top: 20px; }

/* Hairline between consecutive rows inside a panel (the section-head already
   carries its own bottom rule). */
.launch-community-overview .panel > .project-row + .project-row {
  border-top: var(--bw) solid var(--line);
}

/* Knowledge-section rows. */
.launch-community-overview .launch-secrow { padding: 11px var(--sp-7); }
.launch-community-overview .launch-sec-sigil {
  font-family: var(--mono); color: var(--moss); width: 15px; text-align: center;
  flex: none;
}
.launch-community-overview .launch-sec-main { min-width: 0; flex: 1; display: block; }
.launch-community-overview .launch-sec-name {
  display: block; font-weight: 600; font-size: var(--fs-13-5); color: var(--ink);
}
.launch-community-overview .launch-sec-desc {
  display: block; font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-community-overview .launch-sec-count {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}

/* Recent durable knowledge rows. */
.launch-community-overview .launch-postrow { display: block; padding: 12px var(--sp-7); }
.launch-community-overview .launch-post-meta {
  display: block; font-family: var(--mono); font-size: var(--fs-10-5);
  color: var(--muted); margin-bottom: 3px;
}
.launch-community-overview .launch-post-sec { color: var(--moss); }
.launch-community-overview .launch-post-title {
  display: block; font-weight: 600; font-size: var(--fs-14); color: var(--ink);
}
.launch-community-overview .launch-post-foot {
  display: block; font-family: var(--mono); font-size: var(--fs-10-5);
  color: var(--muted); margin-top: 4px;
}

/* Live-channel rows. */
.launch-community-overview .launch-chanrow { display: block; padding: 9px 14px; }
.launch-community-overview .launch-chan-line {
  display: block; font-family: var(--mono); font-size: var(--fs-13); color: var(--ink);
}
.launch-community-overview .launch-chan-hash { color: var(--moss); }
.launch-community-overview .launch-chan-topic {
  display: block; font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Moderators (usernames only — the page holds no per-mod roles). */
.launch-community-overview .launch-mods { padding: var(--sp-4) 14px; }
.launch-community-overview .launch-modrow {
  display: flex; align-items: center; gap: 9px; padding: var(--sp-2) 0;
  font-size: var(--fs-13); color: var(--ink); text-decoration: none;
}
.launch-community-overview .launch-modrow:hover .launch-mod-name { text-decoration: underline; }

/* Rules / moderation-log panel bodies. */
.launch-community-overview .launch-rules {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-community-overview .launch-modlog-desc {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  margin: 0 0 var(--sp-4);
}
.launch-community-overview .launch-modlog-link { font-size: var(--fs-11); font-family: var(--mono); }

/* ---- Connected projects (pinned ccp-* fragment, skinned in place) ---------- */

/* The fragment's own <section> becomes the panel frame. */
.launch-community-overview .ccp-section {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden;
}
/* Heading pair reads as the panel's section-head (kicker + mono note). */
.launch-community-overview .ccp-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
  margin: 0; padding: var(--sp-6) var(--sp-8) 2px;
}
.launch-community-overview .ccp-sub {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin: 0; padding: 0 var(--sp-8) var(--sp-6);
  border-bottom: var(--bw) solid var(--line);
}
/* The approved 1px-gap project grid: the gutter IS the rule. */
.launch-community-overview .ccp-projects {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bw);
  background: var(--line);
}
.launch-community-overview .ccp-project {
  background: var(--surface); padding: 11px var(--sp-7); min-width: 0;
}
/* An odd last cell spans the row so no bare gutter shows through. */
.launch-community-overview .ccp-project:last-child:nth-child(odd) { grid-column: 1 / -1; }
.launch-community-overview .ccp-identity p { margin: 0; }
.launch-community-overview .ccp-name {
  margin: 0; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-13-5); color: var(--ink);
}
.launch-community-overview .ccp-kind {
  font-size: var(--fs-11); color: var(--muted); margin-top: var(--sp-1);
}
/* Facts are mono. Verification copy states verified/stale/revoked itself, so
   the shared class keeps a neutral tint — revoked is never dressed moss. */
.launch-community-overview .ccp-namespace,
.launch-community-overview .ccp-verification,
.launch-community-overview .ccp-connected {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin-top: var(--sp-1);
}
.launch-community-overview .ccp-website {
  font-size: var(--fs-11); margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-community-overview .ccp-website-link { color: var(--slate); }
.launch-community-overview .ccp-repos { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.launch-community-overview .ccp-repo {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-community-overview .ccp-repo-link { color: var(--slate); }
.launch-community-overview .ccp-repo-name { color: var(--muted); }
.launch-community-overview .ccp-marker {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--muted);
  border: var(--bw) solid var(--line2); border-radius: var(--r-6); padding: 0 5px;
}
.launch-community-overview .ccp-primary { color: var(--moss); border-color: var(--moss); }

/* ---- Gate + consent -------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-overview > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-overview #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-overview #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-overview #analytics-consent [data-analytics-accept],
.launch-community-overview #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-overview #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-overview #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — live community channel only
   Scoped beneath body.launch-community-channel: GET /c/:slug/ch/:channel_slug
   (Pages.community_channel_shell_page). Section, thread, settings and every
   other community surface have their own scoped sections. The live chat DOM
   is a strict
   JS contract (chat_live.js): #chat-live-root IS the scroller
   (.cs-main-body), .cs-main is a flex column whose head / .cs-chat-stage /
   typing row / composer are DIRECT children, the cursor overlay is an
   absolutely-positioned sibling of the scroller inside the stage, and the
   [hidden] typing row must keep its reserved height. The retired shell.css
   no longer exists, so its load-bearing cs-* layout rules are
   re-provided here 1:1 (same boxes, same scroll owner, same flex chain) and
   only re-skinned onto the approved Cartographic chat grammar
   (.chat__head/.msg/.typing/.composer from the design handoff). Other notes:
   - the notification badge rule is scoped to the badge element only — no
     global .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only this route's
     launch-scope "hide the app" rule lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped);
   - the base .aside rules (width/background/border/scroll + the ≤1279px
     collapse) come from the shared shell system above; only the presence
     pane's inner anatomy is styled here.
   ========================================================================== */

/* ---- Launch chrome -------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-channel .launch-user { position: relative; }
.launch-community-channel .launch-user > summary { list-style: none; }
.launch-community-channel .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-channel .launch-user .avatar { background: var(--moss); }
.launch-community-channel .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-channel .launch-user__menu a,
.launch-community-channel .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-channel .launch-user__menu a:hover,
.launch-community-channel .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-channel .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-channel #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-community-channel .launch-rail__img,
.launch-community-channel .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ----------------------------------------------------- */

.launch-community-channel .launch-side-id { min-width: 0; display: block; }

/* Factual visibility marker (private communities only; public is unmarked). */
.launch-community-channel .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Chat main pane: load-bearing flex chain (from shell.css, re-skinned) -- */

/* .cs-main fills the shell's flexible center column; its panes must remain
   DIRECT children so the height chain head → stage → typing → composer
   resolves. Never interpose a wrapper here. */
.launch-community-channel .cs-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--surface);
}

/* Compact channel header (approved .chat__head grammar): mono #name, quiet
   topic, share-cursor control pushed to the right edge. */
.launch-community-channel .cs-main-head {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-6);
  padding: 11px var(--sp-9); border-bottom: var(--bw) solid var(--line2);
  background: var(--surface);
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-16); color: var(--ink);
}
.launch-community-channel .cs-hash { color: var(--moss); }
.launch-community-channel .cs-ch-topic {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-12-5); color: var(--muted);
  border-left: var(--bw) solid var(--line2); padding-left: var(--sp-6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Stage wraps the scroller with the inert cursor overlay on its visible box. */
.launch-community-channel .cs-chat-stage {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-community-channel .cs-chat-stage > .cs-chat-body { flex: 1; }

/* #chat-live-root: the ONLY scroll owner for message history. */
.launch-community-channel .cs-main-body { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.launch-community-channel .cs-chat-body { padding: var(--sp-5) 0; display: flex; flex-direction: column; }
/* Pin a short stream to the bottom while keeping a long one scrollable from
   the top (flex-end would clip it in some engines). */
.launch-community-channel .cs-chat-body > :first-child { margin-top: auto; }

/* ---- Message rows (approved .msg anatomy, flat, no shadows) ---------------- */

.launch-community-channel .cs-msg {
  display: flex; gap: 11px; padding: 5px var(--sp-9);
  transition: background-color 1.2s ease;
}
.launch-community-channel .cs-msg:hover { background: var(--surface2); }
.launch-community-channel .cs-msg-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--r-3);
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-12);
  background: var(--surface3); color: var(--muted); border: var(--bw) solid var(--line);
}
.launch-community-channel .cs-msg-body { flex: 1; min-width: 0; }
.launch-community-channel .cs-msg-meta { display: flex; align-items: baseline; gap: var(--sp-4); }
.launch-community-channel .cs-msg-author { font-weight: 600; font-size: var(--fs-13-5); color: var(--ink); }
.launch-community-channel .cs-msg-time { font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); }
.launch-community-channel .cs-msg-time-slot { display: inline-grid; align-items: baseline; position: relative; }
.launch-community-channel .cs-msg-time-slot .cs-msg-time,
.launch-community-channel .cs-msg-time-slot .cs-msg-start { grid-area: 1 / 1; }
.launch-community-channel .cs-msg-time-slot .cs-msg-time { pointer-events: none; }
.launch-community-channel .cs-msg-time-slot .cs-msg-start { position: relative; z-index: 1; }
.launch-community-channel .cs-msg-text {
  font-size: var(--fs-14); line-height: var(--lh-prose); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-community-channel .cs-msg-deleted { font-style: italic; color: var(--muted); }

/* Per-message thread provenance markers below the text (clay = promotion). */
.launch-community-channel .cs-msg-actions {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: 3px;
}
.launch-community-channel .cs-msg-start,
.launch-community-channel .cs-msg-thread,
.launch-community-channel .cs-msg-ref {
  font-family: var(--mono); font-size: var(--fs-10-5); text-decoration: none;
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.launch-community-channel .cs-msg-thread { color: var(--clay); }
.launch-community-channel .cs-msg-thread:hover { text-decoration: underline; }
.launch-community-channel .cs-msg-ref { color: var(--muted); }
.launch-community-channel .cs-msg-ref:hover { color: var(--ink); text-decoration: underline; }
.launch-community-channel .cs-msg-refmore {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted); margin-left: -6px;
}

/* "Start thread" replaces the timestamp inside the same reserved slot. */
.launch-community-channel .cs-msg-start { color: var(--clay); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .12s ease; }
.launch-community-channel .cs-msg-time-slot .cs-msg-time { transition: opacity .12s ease; }
.launch-community-channel .cs-msg:hover .cs-msg-time-slot .cs-msg-time,
.launch-community-channel .cs-msg:focus-within .cs-msg-time-slot .cs-msg-time { opacity: 0; }
.launch-community-channel .cs-msg:hover .cs-msg-start,
.launch-community-channel .cs-msg:focus-within .cs-msg-start { opacity: 1; pointer-events: auto; }
.launch-community-channel .cs-msg-start:hover { text-decoration: underline; }
@media (hover: none) {
  .launch-community-channel .cs-msg-time-slot .cs-msg-time { opacity: 0; }
  .launch-community-channel .cs-msg-start { opacity: 1; pointer-events: auto; }
}

.launch-community-channel .cs-msg-empty { padding: var(--sp-11) var(--sp-9); color: var(--muted); font-size: var(--fs-14); }

/* Reverse navigation from a promoted thread: SSR notice band + grouped
   source-row tint (clay = provenance; fades when JS drops the class). */
.launch-community-channel .cs-source-notice {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-9); border-bottom: var(--bw) solid var(--line2);
  background: var(--surface2);
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
}
.launch-community-channel .cs-source-notice b { color: var(--ink); }
.launch-community-channel .cs-source-notice-actions { display: flex; gap: var(--sp-7); white-space: nowrap; }
.launch-community-channel .cs-source-notice a { color: var(--slate); text-decoration: none; }
.launch-community-channel .cs-source-notice a:hover { text-decoration: underline; }
.launch-community-channel .cs-msg--source-flash {
  background-color: color-mix(in srgb, var(--clay) 10%, transparent); transition: none;
}

/* ---- Typing row: reserved height even when [hidden] (JS contract) ---------- */

.launch-community-channel .cs-typing {
  flex-shrink: 0; box-sizing: content-box; min-height: 15px; padding: 3px var(--sp-9) 0;
  font-size: var(--fs-12); font-style: italic; color: var(--muted); background: var(--surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.launch-community-channel .cs-typing[hidden] { display: block; visibility: hidden; }

/* ---- Composer (approved .composer grammar: inset field, moss send) --------- */

.launch-community-channel .cs-composer {
  flex-shrink: 0; border-top: var(--bw) solid var(--line2); background: var(--surface);
  padding: var(--sp-6) var(--sp-8);
}
.launch-community-channel .cs-composer form { display: flex; gap: var(--sp-5); align-items: flex-end; }
.launch-community-channel .cs-composer textarea {
  flex: 1; border: var(--bw) solid var(--line2); border-radius: var(--r-2); background: var(--surface2);
  font-family: var(--sans); font-size: var(--fs-14); color: var(--ink);
  padding: 9px 12px; min-height: 22px; resize: vertical; outline: none;
}
.launch-community-channel .cs-composer textarea:focus { border-color: var(--moss); }
.launch-community-channel .cs-send {
  flex-shrink: 0; cursor: pointer; border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  background: var(--moss); color: #fff; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-14); padding: 9px var(--sp-9);
}
.launch-community-channel .cs-send:hover { filter: brightness(1.05); }
.launch-community-channel .cs-send:disabled { opacity: .6; cursor: default; }

/* Anon / non-member / private-viewer prompt reuses the composer frame inline. */
.launch-community-channel .cs-composer-prompt {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-14); color: var(--muted);
}
.launch-community-channel .cs-composer-prompt form { display: inline-flex; }

/* Inline send error under the composer (fetch submissions never navigate). */
.launch-community-channel .cs-composer-error {
  margin-top: var(--sp-3); font-size: var(--fs-12-5); color: var(--danger);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "New messages" pill floated over the scroller (inside .cs-chat-stage),
   above the inert cursor overlay (z-index 5) so it stays clickable. */
.launch-community-channel .cs-new-msgs {
  position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  z-index: 6; cursor: pointer;
  border: var(--bw) solid var(--moss); border-radius: var(--r-6);
  background: var(--moss); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  padding: var(--sp-2) var(--sp-6);
}
.launch-community-channel .cs-new-msgs:hover { filter: brightness(1.05); }

/* ---- Shared cursors -------------------------------------------------------- */

/* Opt-in control at the right edge of the channel header. */
.launch-community-channel .cs-cursor-share {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-11-5); color: var(--muted);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.launch-community-channel .cs-cursor-share:hover { color: var(--ink); }
.launch-community-channel .cs-cursor-share input { accent-color: var(--moss); margin: 0; }
/* The inline-flex above would defeat the [hidden] attribute (coarse-pointer
   devices hide the inert control via JS). */
.launch-community-channel .cs-cursor-share[hidden] { display: none; }

/* Inert overlay on the scroller's visible box; cursors never affect layout. */
.launch-community-channel .cs-cursor-overlay {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5;
}
.launch-community-channel .cs-cursor {
  position: absolute; left: 0; top: 0; pointer-events: none;
  display: flex; align-items: flex-start; gap: 3px;
  will-change: transform; transition: transform 90ms linear;
}
.launch-community-channel .cs-cursor svg { display: block; color: var(--cursor-color); }
.launch-community-channel .cs-cursor-label {
  margin-top: 9px; padding: 1px 6px; border-radius: var(--r-2);
  font-family: var(--mono); font-size: var(--fs-10-5); line-height: var(--lh-ui); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--cursor-color);
  max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Deterministic per-user hue (user_id % 8, computed locally — never sent
   over the network). Same values as the legacy shell so cursor identity
   colours stay stable across the conversion. */
.launch-community-channel .cs-cursor[data-hue='0'] { --cursor-color: oklch(0.555 0.155 27); }
.launch-community-channel .cs-cursor[data-hue='1'] { --cursor-color: oklch(0.555 0.13 70); }
.launch-community-channel .cs-cursor[data-hue='2'] { --cursor-color: oklch(0.555 0.13 130); }
.launch-community-channel .cs-cursor[data-hue='3'] { --cursor-color: oklch(0.555 0.13 165); }
.launch-community-channel .cs-cursor[data-hue='4'] { --cursor-color: oklch(0.555 0.13 210); }
.launch-community-channel .cs-cursor[data-hue='5'] { --cursor-color: oklch(0.555 0.13 260); }
.launch-community-channel .cs-cursor[data-hue='6'] { --cursor-color: oklch(0.555 0.13 300); }
.launch-community-channel .cs-cursor[data-hue='7'] { --cursor-color: oklch(0.555 0.13 340); }
@media (prefers-reduced-motion: reduce) {
  .launch-community-channel .cs-cursor { transition: none; }
}

/* ---- Presence pane (approved chat-aside anatomy) --------------------------- */

.launch-community-channel .cs-presence { padding: 14px 16px; }
.launch-community-channel .ca-label {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--sp-5);
}
.launch-community-channel .cs-presence-status { font-size: var(--fs-12-5); color: var(--muted); }
.launch-community-channel .cs-presence-list { list-style: none; margin: 0; padding: 0; }
.launch-community-channel .cs-presence-user {
  display: flex; align-items: center; gap: 9px; padding: var(--sp-2) 0;
  font-size: var(--fs-13);
}
.launch-community-channel .cs-presence-avatar {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-10);
  color: var(--muted); background: var(--surface3); border: var(--bw) solid var(--line);
}
.launch-community-channel .cs-presence-name { color: var(--ink); }
.launch-community-channel .cs-presence-name:hover { color: var(--slate); }

/* ---- Gate + consent -------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-channel > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-channel #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-channel #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-channel #analytics-consent [data-analytics-accept],
.launch-community-channel #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-channel #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-channel #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — section and thread knowledge flow only
   Scoped beneath body.launch-community-section (GET /c/:slug/s/:section_slug,
   Pages.community_section_shell_page) and body.launch-community-thread
   (GET /c/:slug/t/:id-:slug, Pages.thread_shell_page). Settings, modlog,
   profiles and every other surface have their own scoped sections. The
   retired shell.css no longer exists, so its load-bearing layout rules are
   re-provided here 1:1 (same boxes, same scroll owner, same flex chain) and
   re-skinned onto the approved Cartographic grammar. Exists only because the
   real pages cannot emit reference markup exactly:
   - section rows come from the shared render_forum_row renderer, whose markup
     is a load-bearing contract (optimistic-vote DOM traversal, replay-masking
     classes .ft-title/.ft-preview, the ⋯ moderation menu, ban/remove
     dialogs); rows are skinned here, never rewritten;
   - the optimistic-vote script toggles legacy Tailwind colour class names on
     the vote buttons; those exact names are mapped to launch accents here;
   - thread.js and the reply/collapse toggles flip the legacy `hidden` class
     on comment content/children/reply forms, so a route-scoped equivalent is
     defined beneath the THREAD root only (plus the badge-element rule both
     routes share) — still no global .hidden utility;
   - the shared confirm-modal script composes its overlay from legacy utility
     class names (inert without Tailwind); the overlay, card and buttons are
     styled via their stable ids and class pairs;
   - the security-critical mod/admin/ban <dialog>s keep their legacy Tailwind
     markup verbatim; they are kept readable and usable via element rules;
   - the desktop-only gate panel ships in mobile-gate.css; only these routes'
     launch-scope "hide the app" rule lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   Section-only compatibility rules sit beneath launch-community-section,
   thread/comment ones beneath launch-community-thread, shared chrome under
   grouped selectors of the two roots.
   ========================================================================== */

/* ---- Launch chrome (both routes) ------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-section .launch-user,
.launch-community-thread .launch-user { position: relative; }
.launch-community-section .launch-user > summary,
.launch-community-thread .launch-user > summary { list-style: none; }
.launch-community-section .launch-user > summary::-webkit-details-marker,
.launch-community-thread .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-section .launch-user .avatar,
.launch-community-thread .launch-user .avatar { background: var(--moss); }
.launch-community-section .launch-user__menu,
.launch-community-thread .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-section .launch-user__menu a,
.launch-community-section .launch-user__menu button,
.launch-community-thread .launch-user__menu a,
.launch-community-thread .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-section .launch-user__menu a:hover,
.launch-community-section .launch-user__menu button:hover,
.launch-community-thread .launch-user__menu a:hover,
.launch-community-thread .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-section .launch-user__menu form,
.launch-community-thread .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-section #notif-badge.hidden,
.launch-community-thread #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-community-section .launch-rail__img,
.launch-community-section .launch-avatar-img,
.launch-community-thread .launch-rail__img,
.launch-community-thread .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar (both routes) ---------------------------------------- */

.launch-community-section .launch-side-id,
.launch-community-thread .launch-side-id { min-width: 0; display: block; }

/* Factual visibility marker (private communities only; public is unmarked). */
.launch-community-section .launch-side-vis,
.launch-community-thread .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Main pane frame (both routes; load-bearing, from shell.css) ------------ */

/* .cs-main fills the shell's flexible center column; its panes must remain
   DIRECT children so the height chain resolves (section: forum head →
   scrolling list; thread: single scroll pane). Never interpose a wrapper. */
.launch-community-section .cs-main,
.launch-community-thread .cs-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--surface);
}

/* Shared breadcrumb (section head + thread topbar): facts are mono. */
.launch-community-section .fh-crumb,
.launch-community-thread .fh-crumb {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  margin-bottom: var(--sp-4);
}
.launch-community-section .fh-crumb a,
.launch-community-thread .fh-crumb a { color: var(--muted); }
.launch-community-section .fh-crumb a:hover,
.launch-community-thread .fh-crumb a:hover { color: var(--ink); }
.launch-community-section .fh-crumb b,
.launch-community-thread .fh-crumb b { color: var(--ink); }

/* Legacy .btn sm/primary/block variants (page furniture markup is preserved;
   the global launch .btn supplies the base). Order matters: primary after sm. */
.launch-community-section .btn.sm,
.launch-community-thread .btn.sm {
  font-size: var(--fs-12); padding: 5px 10px;
  color: var(--muted); background: var(--surface); border-color: var(--line2);
}
.launch-community-section .btn.sm:hover,
.launch-community-thread .btn.sm:hover { background: var(--surface2); color: var(--ink); }
.launch-community-section .btn.primary,
.launch-community-thread .btn.primary { color: #fff; background: var(--moss); border-color: var(--moss); }
.launch-community-section .btn.primary:hover,
.launch-community-thread .btn.primary:hover { filter: brightness(1.06); color: #fff; }
.launch-community-section .btn.block,
.launch-community-thread .btn.block { display: flex; width: 100%; }

/* Empty states: a mono sentence, not a poster. */
.launch-community-section .cs-empty,
.launch-community-thread .cs-empty {
  padding: 40px 22px; text-align: center;
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
}

/* ---- Vote column (both routes): up form · score · optional down form -------- */

/* DOM order is the optimistic-vote script's contract — style only, never
   reorder. Asymmetric arrows: ▲ muted, ▼ line2 (available, not encouraged). */
.launch-community-section .cs-vote,
.launch-community-thread .cs-vote {
  display: flex; flex-direction: column; align-items: center;
  width: 30px; flex: none; padding-top: var(--sp-1);
}
.launch-community-section .cs-vote form,
.launch-community-thread .cs-vote form { margin: 0; padding: 0; display: flex; }
.launch-community-section .cs-vote button,
.launch-community-section .cs-vote a,
.launch-community-thread .cs-vote button,
.launch-community-thread .cs-vote a {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--mono); font-weight: 700;
  font-size: var(--fs-13); line-height: 1; color: var(--muted);
}
.launch-community-section .cs-vote form:last-child button,
.launch-community-section .cs-vote a:last-child,
.launch-community-thread .cs-vote form:last-child button,
.launch-community-thread .cs-vote a:last-child { color: var(--line2); }
.launch-community-section .cs-vote-score,
.launch-community-thread .cs-vote-score {
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-13);
  color: var(--ink); margin: 3px 0;
}
/* Active-vote colours: the exact legacy class names the vote script toggles
   (kept after the base arrow rules so equal specificity resolves to these). */
.launch-community-section .cs-vote form button.text-orange-500,
.launch-community-thread .cs-vote form button.text-orange-500 { color: var(--clay); }
.launch-community-section .cs-vote form button.text-\[\#69C3D2\],
.launch-community-thread .cs-vote form button.text-\[\#69C3D2\] { color: var(--slate); }

/* Author badges rendered by render_author (legacy Tailwind classes inert). */
.launch-community-section .mod-badge,
.launch-community-thread .mod-badge {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--clay);
  margin-left: 4px;
}

/* ---- Right rail context blocks (both routes) -------------------------------- */

.launch-community-section .ca-block,
.launch-community-thread .ca-block {
  padding: 15px 16px; border-bottom: var(--bw) solid var(--line);
}
.launch-community-section .ca-label,
.launch-community-thread .ca-label {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--sp-5);
}
.launch-community-section .ca-grid,
.launch-community-thread .ca-grid {
  width: 100%; border-collapse: collapse; font-size: var(--fs-13);
}
.launch-community-section .ca-grid td,
.launch-community-thread .ca-grid td { padding: var(--sp-2) 0; color: var(--muted); }
.launch-community-section .ca-grid td.num,
.launch-community-thread .ca-grid td.num {
  text-align: right; font-family: var(--mono); color: var(--ink);
}
.launch-community-section .ca-cta,
.launch-community-thread .ca-cta { margin-top: var(--sp-5); }
.launch-community-section .ca-rules,
.launch-community-thread .ca-rules {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-community-section .member,
.launch-community-thread .member {
  display: flex; align-items: center; gap: 9px; padding: var(--sp-2) 0;
  font-size: var(--fs-13); color: var(--ink);
}
.launch-community-section .member a,
.launch-community-thread .member a { color: var(--ink); }
.launch-community-section .member a:hover,
.launch-community-thread .member a:hover { color: var(--slate); }
.launch-community-section .member .role,
.launch-community-thread .member .role { margin-left: auto; }
.launch-community-section .role,
.launch-community-thread .role {
  font-family: var(--mono); font-size: var(--fs-9); font-weight: 700;
  letter-spacing: var(--ls-badge); text-transform: uppercase;
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  padding: 0 var(--sp-2); color: var(--muted);
}
.launch-community-section .role.mod,
.launch-community-thread .role.mod { color: var(--moss); border-color: var(--moss); }
.launch-community-thread .role.op { color: var(--slate); border-color: var(--slate); }

/* ---- Legacy moderation <dialog>s (both routes; Tailwind classes inert) ------ */

.launch-community-section dialog,
.launch-community-thread dialog {
  border: var(--bw) solid var(--line2); border-radius: var(--r-4);
  padding: var(--sp-9); max-width: 28rem; width: calc(100% - 2rem);
  background: var(--surface); color: var(--ink);
}
.launch-community-section dialog::backdrop,
.launch-community-thread dialog::backdrop { background: rgba(31, 36, 33, .45); }
.launch-community-section dialog form,
.launch-community-thread dialog form {
  display: flex; flex-direction: column; gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.launch-community-section dialog textarea,
.launch-community-thread dialog textarea {
  width: 100%; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-13); min-height: 70px;
}
.launch-community-section dialog button,
.launch-community-thread dialog button {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-community-section dialog button[type='submit'],
.launch-community-thread dialog button[type='submit'] {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* ---- Shared confirm modal (both routes) ------------------------------------- */

/* The script composes it from legacy utility class names; the stable
   .fixed.inset-0 pair and the #cancel-btn / #confirm-btn ids are the hooks. */
.launch-community-section .fixed.inset-0,
.launch-community-thread .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-community-section .fixed.inset-0.opacity-0,
.launch-community-thread .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-community-section .fixed.inset-0 > div,
.launch-community-thread .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-community-section .fixed.inset-0 h3,
.launch-community-thread .fixed.inset-0 h3 {
  font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3);
}
.launch-community-section .fixed.inset-0 p,
.launch-community-thread .fixed.inset-0 p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7);
}
.launch-community-section .fixed.inset-0 .flex,
.launch-community-thread .fixed.inset-0 .flex {
  display: flex; justify-content: flex-end; gap: var(--sp-4);
}
.launch-community-section #cancel-btn,
.launch-community-section #confirm-btn,
.launch-community-thread #cancel-btn,
.launch-community-thread #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-community-section #confirm-btn,
.launch-community-thread #confirm-btn {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* ---- SECTION route: forum head, sort tabs, thread rows, pager --------------- */

/* Header sits outside .cs-main-body so it stays put while the list scrolls. */
.launch-community-section .forum-head {
  flex-shrink: 0; border-bottom: var(--bw) solid var(--line2);
  background: var(--surface); padding: 12px 22px 0;
}
.launch-community-section .fh-top { display: flex; align-items: flex-start; gap: 14px; }
.launch-community-section .fh-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); display: flex; align-items: center; gap: 9px;
}
.launch-community-section .fh-title .sec { font-family: var(--mono); color: var(--moss); }
.launch-community-section .fh-desc {
  color: var(--muted); font-size: var(--fs-13); margin-top: var(--sp-2); max-width: 70ch;
}
.launch-community-section .fh-actions {
  margin-left: auto; display: flex; gap: var(--sp-4); flex-shrink: 0;
}

/* Sort tabs — the approved tab grammar; state is a ?sort parameter. */
.launch-community-section .ftabs { display: flex; gap: var(--sp-1); margin-top: 14px; }
.launch-community-section .ftabs a {
  font-family: var(--mono); font-size: var(--fs-12); padding: 8px 13px;
  color: var(--muted); border-bottom: var(--bw-accent) solid transparent;
}
.launch-community-section .ftabs a:hover { color: var(--ink); }
.launch-community-section .ftabs a.active {
  color: var(--ink); border-bottom-color: var(--moss);
}

/* The scrolling list body; cs-flush zeroes the gutter so rows span full
   width (rows carry their own 22px padding). */
.launch-community-section .cs-main-body {
  flex: 1; overflow-y: auto; scrollbar-width: thin; padding: 14px 18px;
}
.launch-community-section .cs-flush { padding: 0; }

/* Flat thread rows (render_forum_row markup, skinned): thin separators. */
.launch-community-section .cs-thread {
  display: flex; gap: 14px; padding: 13px 22px;
  border-bottom: var(--bw) solid var(--line);
}
.launch-community-section .cs-thread:hover { background: var(--surface2); }
.launch-community-section .ft-main { flex: 1; min-width: 0; }
.launch-community-section .ft-title {
  font-weight: 600; font-size: var(--fs-15-5); line-height: var(--lh-title);
  text-wrap: pretty;
}
.launch-community-section .ft-title a { color: var(--ink); }
.launch-community-section .ft-title a:hover { text-decoration: underline; }
.launch-community-section .ft-preview {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-community-section .ft-meta {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  margin-top: 8px;
}
.launch-community-section .ft-meta a { color: var(--muted); }
.launch-community-section .ft-meta a:hover { color: var(--ink); }
.launch-community-section .ft-domain { color: var(--slate); }

/* ⋯ moderation/self-action menu (viewers with an action only). */
.launch-community-section .cs-row-mod { position: relative; align-self: flex-start; }
.launch-community-section .cs-row-mod > summary {
  list-style: none; cursor: pointer; color: var(--muted);
  font-family: var(--mono); padding: 0 var(--sp-3); border-radius: var(--r-2);
}
.launch-community-section .cs-row-mod > summary::-webkit-details-marker { display: none; }
.launch-community-section .cs-row-mod > summary:hover {
  background: var(--surface2); color: var(--ink);
}
.launch-community-section .cs-row-mod-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-3); min-width: 150px;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-4);
  box-shadow: var(--shadow-overlay);
}

/* Pager: real prev/next links around the mono page marker. */
.launch-community-section .cs-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-top: var(--bw) solid var(--line2);
  background: var(--surface2);
}
.launch-community-section .cs-pager-n {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
}

/* ---- THREAD route: readable document + nested discussion tree --------------- */

/* The ONLY scroll pane on the thread route (same containment model as the
   section list and the channel scroller): .cs-main keeps overflow hidden and
   this pane mirrors .cs-main-body (flex:1 + overflow-y:auto). */
.launch-community-thread .thread-shell-main {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: 0 32px 96px; width: 100%;
}

/* Topbar: breadcrumb + back-to-section, then the local tab row. */
.launch-community-thread .th-topbar {
  padding-top: 18px; border-bottom: var(--bw) solid var(--line2); margin-bottom: 24px;
}
.launch-community-thread .th-topbar-row { display: flex; align-items: center; gap: 14px; }
.launch-community-thread .th-topbar-row .fh-crumb { margin-bottom: 0; flex: 1; min-width: 0; }
.launch-community-thread .th-back { flex-shrink: 0; }
.launch-community-thread .th-tabs { display: flex; gap: var(--sp-1); margin-top: 14px; }
.launch-community-thread .th-tab {
  font-family: var(--mono); font-size: var(--fs-12); padding: 8px 13px;
  color: var(--muted); border-bottom: var(--bw-accent) solid transparent;
}
.launch-community-thread .th-tab.active { color: var(--ink); border-bottom-color: var(--moss); }

/* Main post: vote column left, title/meta/actions/body stacked beside it.
   The thread h1 is the deliberate serif exception: sans 700/24. */
.launch-community-thread .th-head { display: flex; gap: 16px; align-items: flex-start; }
.launch-community-thread .th-headmain { flex: 1; min-width: 0; }
.launch-community-thread .th-title {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-24);
  line-height: var(--lh-tight); color: var(--ink); margin: 1px 0 0;
}
.launch-community-thread .th-meta {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  margin-top: 11px; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
}
.launch-community-thread .th-meta a { color: var(--muted); }
.launch-community-thread .th-meta a:hover { color: var(--ink); }
.launch-community-thread .th-meta .ft-domain { color: var(--slate); }
.launch-community-thread .th-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px;
}

/* Larger vote treatment on the post head; tighter inside comments — both keep
   the upvote/score/downvote child order the optimistic-vote script walks. */
.launch-community-thread .th-head .cs-vote { width: 34px; padding-top: var(--sp-1); }
.launch-community-thread .th-head .cs-vote button,
.launch-community-thread .th-head .cs-vote a { font-size: var(--fs-16); }
.launch-community-thread .th-head .cs-vote-score { font-size: var(--fs-14); }
.launch-community-thread .cmt .cs-vote { width: 22px; }
.launch-community-thread .cmt .cs-vote button,
.launch-community-thread .cmt .cs-vote a { font-size: var(--fs-13); }
.launch-community-thread .cmt .cs-vote-score { font-size: var(--fs-11-5); margin: 1px 0; }

/* Promoted conversation: provenance never gets lost — clay 2px left rule,
   source channel link, date range, seed badge (approved .provenance grammar). */
.launch-community-thread .th-src {
  margin-top: 16px; border: var(--bw) solid var(--line2);
  border-left: var(--bw-accent) solid var(--clay);
  background: var(--surface2); border-radius: var(--r-1); padding: 12px 14px;
}
.launch-community-thread .th-src-label {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 700;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--clay);
}
.launch-community-thread .th-src-head {
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-3);
}
.launch-community-thread .th-src-head a { color: var(--clay); }
.launch-community-thread .th-src-head a:hover { text-decoration: underline; }
.launch-community-thread .th-src-meta {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted); margin-top: 3px;
}
.launch-community-thread .th-src-msgs {
  margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 9px;
}
.launch-community-thread .th-src-msg { border-top: var(--bw) solid var(--line); padding-top: 8px; }
.launch-community-thread .th-src-msg-meta {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
}
.launch-community-thread .th-src-author {
  font-family: var(--mono); font-size: var(--fs-12); font-weight: 600; color: var(--ink);
}
.launch-community-thread .th-src-seed {
  font-family: var(--mono); font-size: var(--fs-9); font-weight: 700;
  letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--clay);
  border: var(--bw) solid var(--clay); border-radius: var(--r-1); padding: 0 4px;
}
.launch-community-thread .th-src-time {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-community-thread .th-src-jump {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted); margin-left: auto;
}
.launch-community-thread .th-src-jump:hover { color: var(--clay); text-decoration: underline; }
.launch-community-thread .th-src-text {
  margin-top: 3px; font-size: var(--fs-13); line-height: var(--lh-ui); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-community-thread .th-src-msg--gone .th-src-unavailable {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); font-style: italic;
}
.launch-community-thread .th-src-foot {
  margin-top: 11px; border-top: var(--bw) solid var(--line); padding-top: 9px;
}
.launch-community-thread .th-src-foot a {
  font-family: var(--mono); font-size: var(--fs-11-5); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--clay);
}
.launch-community-thread .th-src-foot a:hover { text-decoration: underline; }
.launch-community-thread .th-src-private-note {
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
  margin-top: var(--sp-3); font-style: italic;
}

/* Body: post content / image / external link, aligned under the title. */
.launch-community-thread .th-body {
  font-size: var(--fs-15); line-height: var(--lh-read); color: var(--ink);
  margin-top: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-community-thread .th-img { margin-top: 18px; }
.launch-community-thread .th-img img {
  max-width: 100%; max-height: 700px; object-fit: contain;
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  background: var(--surface3);
}
.launch-community-thread .th-linkrow { margin-top: 16px; }

/* Discussion: divided from the post, with its own header rhythm. */
.launch-community-thread .th-discussion {
  margin-top: 28px; border-top: var(--bw) solid var(--line2); padding-top: 22px;
}
.launch-community-thread .th-comments-label {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  letter-spacing: .03em; margin: 0 0 14px;
}

/* Composer (top-level + inline reply): inset framed block, borderless
   textarea, footer action bar. */
.launch-community-thread .ct-composer {
  margin: 0 0 22px; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); overflow: hidden;
}
.launch-community-thread .ct-composer:focus-within { border-color: var(--moss); }
.launch-community-thread .ct-composer textarea {
  display: block; width: 100%; resize: vertical; min-height: 62px;
  font-family: var(--sans); font-size: var(--fs-13-5); line-height: var(--lh-prose);
  color: var(--ink); background: var(--surface2); border: 0; padding: 12px 14px;
}
.launch-community-thread .ct-composer textarea:focus { outline: none; }
.launch-community-thread .ct-composer-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-4);
  padding: 8px 10px; border-top: var(--bw) solid var(--line); background: var(--surface);
}
.launch-community-thread .ct-reply { margin: 10px 0 6px; }
.launch-community-thread .ct-join {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  background: var(--surface2); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: 13px 15px; margin-bottom: 22px;
  font-size: var(--fs-13); color: var(--muted);
}
.launch-community-thread .ct-join form.inline { display: inline-flex; margin: 0; }

/* Comment rows: a clear nested tree with quiet guide rails. */
.launch-community-thread .cmt {
  display: flex; gap: var(--sp-6); padding: 13px 0;
  border-top: var(--bw) solid var(--line);
}
.launch-community-thread .cmt .cbody { flex: 1; min-width: 0; }
.launch-community-thread .cmeta {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-12-5); color: var(--muted);
}
.launch-community-thread .cmeta a { color: var(--ink); font-weight: 600; }
.launch-community-thread .cmeta a:hover { color: var(--slate); }
.launch-community-thread .ctime {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-community-thread .ctext {
  font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink);
  margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-community-thread .cactions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: var(--sp-4); font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted);
}
/* Inline action buttons: small mono text (moderation visually secondary).
   border/background zeroed here — legacy pages relied on Tailwind Preflight. */
.launch-community-thread .ct-act,
.launch-community-thread .ct-collapse {
  font-family: var(--mono); font-size: var(--fs-11); cursor: pointer;
  color: var(--muted); background: none; border: 0; padding: 0; line-height: 1;
}
.launch-community-thread .ct-act:hover,
.launch-community-thread .ct-collapse:hover { color: var(--ink); }
.launch-community-thread .ct-act-danger { color: var(--danger); }
.launch-community-thread .ct-act-mod { color: var(--ochre); }
.launch-community-thread .ct-act-admin { color: var(--danger); }
.launch-community-thread .cactions form.inline,
.launch-community-thread .th-actions form.inline { display: inline-flex; margin: 0; padding: 0; }

/* Nested replies: one quiet guide line, small fixed indent, capped after
   depth 3 (markup adds .cmt-flat) so deep chains never staircase off-screen. */
.launch-community-thread .cmt-children {
  margin-left: var(--sp-2); border-left: var(--bw) solid var(--line); padding-left: 14px;
}
.launch-community-thread .cmt-children.cmt-flat {
  margin-left: 0; border-left: 0; padding-left: 0;
}

/* Route-scoped equivalent of the legacy `hidden` utility toggled by thread.js
   (collapse) and the reply/cancel buttons. Kept LAST in this block so it wins
   ties against the display rules above; thread route only — the section route
   needs only the badge-element rule shared higher up. */
.launch-community-thread .hidden { display: none; }

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide these routes' launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-section > .app,
  body.launch-community-thread > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-section #analytics-consent,
.launch-community-thread #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-section #analytics-consent p,
.launch-community-thread #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-section #analytics-consent [data-analytics-accept],
.launch-community-section #analytics-consent [data-analytics-refuse],
.launch-community-thread #analytics-consent [data-analytics-accept],
.launch-community-thread #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-section #analytics-consent [data-analytics-accept],
.launch-community-thread #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-section #analytics-consent [data-analytics-error],
.launch-community-thread #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — community settings only
   Scoped beneath body.launch-community-settings: GET /c/:slug/settings
   (Pages.community_settings_page), every ?panel=… state and every validation
   re-render of the same renderer. Exists only because the real settings
   surface cannot emit the reference markup exactly:
   - every cm-* fragment (panel nav, forms, rows, badges) is pinned by the
     settings suites (nav-link class/href ordering, control suppression,
     exactly-one queue-link counts) or treated as pinned, so the legacy
     markup is spliced verbatim and skinned here onto the approved
     settings anatomy (page head band · 216px settings nav · panel column);
   - the connected-projects management fragment (phrm-*) is byte-pinned by
     its own fragment suites (form shape, zero application inputs, copy),
     so it too is styled from outside only;
   - the confirm modal is composed by the shared launch behavior script from
     legacy utility class names; the stable .fixed.inset-0 pair and the
     #cancel-btn / #confirm-btn ids are the hooks (same idiom as the other
     launch routes);
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - for a private community the renderer keeps its inner ph-no-capture
     guard div inside <main>; display:contents keeps it out of the flex
     chain so both privacy shapes share one layout;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-settings .launch-user { position: relative; }
.launch-community-settings .launch-user > summary { list-style: none; }
.launch-community-settings .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-settings .launch-user .avatar { background: var(--moss); }
.launch-community-settings .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-settings .launch-user__menu a,
.launch-community-settings .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-settings .launch-user__menu a:hover,
.launch-community-settings .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-settings .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-settings #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-community-settings .launch-rail__img,
.launch-community-settings .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ------------------------------------------------------ */

.launch-community-settings .launch-side-id { min-width: 0; display: block; }
.launch-community-settings .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Settings anatomy ------------------------------------------------------- */

/* Private communities keep the renderer's inner replay guard; keep it out of
   the flex chain so both privacy shapes share one layout. */
.launch-community-settings .main > .ph-no-capture { display: contents; }

/* cm-wrap fills <main> as a column: fixed head band over the two scrollers. */
.launch-community-settings .cm-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}

/* Page head band (reference .page__head--tight geometry). */
.launch-community-settings .cm-head {
  flex: none; display: flex; align-items: baseline; gap: var(--sp-8);
  padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-settings .cm-h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink); min-width: 0;
}
.launch-community-settings .cm-h1 .accent { color: var(--moss); }
.launch-community-settings .cm-back {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  text-decoration: none;
}
.launch-community-settings .cm-back:hover { color: var(--ink); }

/* Two independent scrollers: the settings index and the panel column. */
.launch-community-settings .cm-cols {
  flex: 1; min-height: 0; display: flex; overflow: hidden;
}
.launch-community-settings .cm-index {
  flex: none; width: var(--settings-nav-w);
  border-right: var(--bw) solid var(--line);
  overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-7) var(--sp-6);
}
.launch-community-settings .cm-index-title {
  font-family: var(--mono); font-size: var(--fs-10); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); padding: var(--sp-2) var(--sp-4) 5px;
}
/* Index links mirror the .navitem grammar (the markup is pinned, so the
   class names stay cm-*). */
.launch-community-settings .cm-index-link {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 9px; margin-bottom: var(--sp-1);
  border: var(--bw) solid transparent; border-radius: var(--r-2);
  font-size: var(--fs-13-5); color: var(--muted); text-decoration: none;
}
.launch-community-settings .cm-index-link:hover { background: var(--surface3); color: var(--ink); }
.launch-community-settings .cm-index-link--active {
  color: var(--ink); background: var(--surface); border-color: var(--line2);
  font-weight: 600;
}
.launch-community-settings .cm-index-link--active:hover { background: var(--surface); }
.launch-community-settings .cm-index-link--danger { color: var(--danger); }
.launch-community-settings .cm-index-link--danger:hover { color: var(--danger); }

/* Panel column: compact operational width on the approved panel geometry. */
.launch-community-settings .cm-main {
  flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-11) var(--sp-13) 70px;
}
.launch-community-settings .cm-panel {
  max-width: 760px; margin-bottom: var(--sp-9);
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-10) var(--sp-11) var(--sp-11);
}
/* Destructive panel (Bans): a clay accent rule — clear, not dominating. */
.launch-community-settings .cm-panel.cm-danger {
  border-left: var(--bw-accent) solid var(--danger);
}
.launch-community-settings .cm-panel-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-2);
}
.launch-community-settings .cm-panel-desc {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin: var(--sp-2) 0 var(--sp-7);
}
.launch-community-settings .cm-panel-desc code,
.launch-community-settings .cm-muted-note code {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--ink);
  background: var(--surface2); border: var(--bw) solid var(--line);
  border-radius: var(--r-1); padding: 0 var(--sp-2);
}
.launch-community-settings .cm-subhead {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: var(--sp-9) 0 var(--sp-4);
}
.launch-community-settings .cm-muted-note {
  font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-prose);
}
.launch-community-settings .cm-empty {
  font-size: var(--fs-13); color: var(--muted);
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-6) var(--sp-7);
}

/* ---- Status strip (Visibility & discovery) ---------------------------------- */

.launch-community-settings .cm-stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
}
.launch-community-settings .cm-stat {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border: var(--bw) solid var(--line); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-3) var(--sp-6);
}
.launch-community-settings .cm-stat-label {
  font-family: var(--mono); font-size: var(--fs-10); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
}
.launch-community-settings .cm-stat-val {
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--ink);
}
.launch-community-settings .cm-stat-val--ok { color: var(--moss); }
.launch-community-settings .cm-stat-val--off { color: var(--muted); }

/* ---- Fields, forms, inputs -------------------------------------------------- */

.launch-community-settings .cm-field { margin-bottom: var(--sp-7); }
.launch-community-settings .cm-label {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: 5px;
}
.launch-community-settings .cm-form {
  display: flex; flex-direction: column; gap: var(--sp-5); margin: 0;
}
.launch-community-settings .cm-form .cm-field { margin-bottom: 0; }
.launch-community-settings .cm-inline-form {
  display: flex; align-items: center; gap: var(--sp-4); margin: 0;
}
.launch-community-settings .cm-inline-form .cm-input { flex: 1; width: auto; }
.launch-community-settings .cm-form-inline { display: inline-flex; margin: 0; }

.launch-community-settings .cm-input,
.launch-community-settings .cm-textarea,
.launch-community-settings .cm-select {
  width: 100%; font-family: var(--sans); font-size: var(--fs-13-5);
  color: var(--ink); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-5);
}
.launch-community-settings .cm-textarea { line-height: var(--lh-prose); resize: vertical; }
.launch-community-settings .cm-input:focus,
.launch-community-settings .cm-textarea:focus,
.launch-community-settings .cm-select:focus {
  outline: none; border-color: var(--moss); background: var(--surface);
}
.launch-community-settings .cm-file {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  margin-top: var(--sp-3);
}
.launch-community-settings .cm-row2 {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
}

/* Buttons: moss primary, mono secondary, clay/danger for destructive. */
.launch-community-settings .cm-btn {
  align-self: flex-start; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12-5);
  color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-8);
}
.launch-community-settings .cm-btn:hover { filter: brightness(1.06); }
.launch-community-settings .cm-btn--secondary {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-12);
  color: var(--muted); background: var(--surface); border-color: var(--line2);
}
.launch-community-settings .cm-btn--secondary:hover {
  filter: none; background: var(--surface2); color: var(--ink);
}
.launch-community-settings .cm-btn-sm {
  cursor: pointer; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-6);
}
.launch-community-settings .cm-btn-sm:hover { background: var(--surface2); color: var(--ink); }
.launch-community-settings .cm-btn-sm--danger { color: var(--danger); }
.launch-community-settings .cm-btn-sm--danger:hover {
  border-color: var(--danger); color: var(--danger); background: var(--surface);
}
.launch-community-settings .cm-btn-sm--ok { color: var(--moss); }
.launch-community-settings .cm-btn-sm--ok:hover {
  border-color: var(--moss); color: var(--moss); background: var(--surface);
}

/* Segmented one-form-per-segment controls (visibility / discovery / downvotes). */
.launch-community-settings .cm-seg {
  display: inline-flex; gap: 0;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  overflow: hidden; background: var(--surface);
}
.launch-community-settings .cm-seg .cm-form-inline + .cm-form-inline {
  border-left: var(--bw) solid var(--line2);
}
.launch-community-settings .cm-seg-btn {
  cursor: pointer; border: 0; background: none;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  padding: var(--sp-3) var(--sp-7);
}
.launch-community-settings .cm-seg-btn:hover { background: var(--surface2); color: var(--ink); }
.launch-community-settings .cm-seg-btn--active {
  color: var(--ink); font-weight: 600;
  background: color-mix(in srgb, var(--moss) 12%, var(--surface));
}

/* ---- Badges ----------------------------------------------------------------- */

.launch-community-settings .cm-badge {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  padding: 1px var(--sp-3); color: var(--muted); background: var(--surface2);
}
.launch-community-settings .cm-badge--active {
  color: var(--moss); border-color: var(--moss);
  background: color-mix(in srgb, var(--moss) 9%, var(--surface));
}
.launch-community-settings .cm-badge--archived { color: var(--muted); }

/* ---- Profile assets --------------------------------------------------------- */

.launch-community-settings .cm-assets2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7);
}
.launch-community-settings .cm-asset {
  display: flex; align-items: center; gap: var(--sp-5);
  border: var(--bw) solid var(--line); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4) var(--sp-5);
}
.launch-community-settings .cm-asset-note {
  font-size: var(--fs-11-5); color: var(--muted); line-height: var(--lh-prose);
}
.launch-community-settings img.cm-asset-avatar,
.launch-community-settings div.cm-asset-avatar {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-2);
  object-fit: cover; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); color: #fff; background: var(--moss);
}
.launch-community-settings .cm-asset-banner {
  width: 96px; height: 40px; flex: none; border-radius: var(--r-2);
  overflow: hidden; background: var(--surface3);
}
.launch-community-settings .cm-asset-banner-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- Channel & section rows (compact <details> items) ----------------------- */

.launch-community-settings .cm-items {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.launch-community-settings .cm-item {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface);
}
.launch-community-settings .cm-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
}
.launch-community-settings .cm-item > summary::-webkit-details-marker { display: none; }
.launch-community-settings .cm-item > summary:hover { background: var(--surface2); }
.launch-community-settings .cm-item-pos {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  flex: none;
}
.launch-community-settings .cm-item-name {
  min-width: 0; display: flex; align-items: baseline; gap: var(--sp-3);
}
.launch-community-settings .cm-section-name {
  font-weight: 600; font-size: var(--fs-13-5); color: var(--ink);
  text-decoration: none;
}
.launch-community-settings a.cm-channel-link:hover { text-decoration: underline; }
.launch-community-settings .cm-section-slug {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-community-settings .cm-item-badges { flex: none; }
.launch-community-settings .cm-item-meta {
  margin-left: auto; flex: none; display: flex; align-items: center;
  gap: var(--sp-5);
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-community-settings .cm-item-note {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-community-settings .cm-item-hint { color: var(--slate); }
.launch-community-settings .cm-item[open] .cm-item-hint { color: var(--moss); }
.launch-community-settings .cm-item-body {
  border-top: var(--bw) solid var(--line);
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
}
.launch-community-settings .cm-item-ops {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: var(--bw) dashed var(--line);
}
.launch-community-settings .cm-item-ops .cm-muted-note { font-size: var(--fs-11); }

/* + Add channel / + Add section reveal. */
.launch-community-settings .cm-add { margin-top: var(--sp-4); }
.launch-community-settings .cm-add > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--moss);
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); background: var(--surface);
}
.launch-community-settings .cm-add > summary::-webkit-details-marker { display: none; }
.launch-community-settings .cm-add > summary:hover {
  border-color: var(--moss); background: var(--surface2);
}
.launch-community-settings .cm-add-body {
  margin-top: var(--sp-5); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface2);
  padding: var(--sp-6);
}

/* ---- Member / ban / moderator lists ----------------------------------------- */

.launch-community-settings .cm-list {
  display: flex; flex-direction: column;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  overflow: hidden;
}
.launch-community-settings .cm-list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding: var(--sp-4) var(--sp-6);
  border-bottom: var(--bw) solid var(--line); background: var(--surface);
}
.launch-community-settings .cm-list-row:last-child { border-bottom: 0; }
.launch-community-settings .cm-list-row:hover { background: var(--surface2); }
.launch-community-settings .cm-user-link {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--ink);
  text-decoration: none;
}
.launch-community-settings .cm-user-link:hover { text-decoration: underline; }

/* ---- Moderation cardlinks --------------------------------------------------- */

.launch-community-settings .cm-modlinks {
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.launch-community-settings .cm-cardlink {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); text-decoration: none;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); padding: var(--sp-5) var(--sp-7);
}
.launch-community-settings .cm-cardlink:hover { background: var(--surface2); }
.launch-community-settings .cm-cardlink-title {
  font-weight: 600; font-size: var(--fs-13-5); color: var(--ink);
}
.launch-community-settings .cm-cardlink-desc {
  font-size: var(--fs-11-5); color: var(--muted); line-height: var(--lh-prose);
  margin-top: var(--sp-1);
}
.launch-community-settings .cm-cardlink-go {
  flex: none; font-family: var(--mono); color: var(--muted);
}
.launch-community-settings .cm-cardlink:hover .cm-cardlink-go { color: var(--moss); }

/* ---- Connected projects (pinned phrm-* fragment, styled from outside) ------- */

.launch-community-settings .phrm-section-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--sp-4);
}
.launch-community-settings .phrm-section-copy {
  font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-prose);
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  background: var(--surface); padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.launch-community-settings .phrm-none {
  font-size: var(--fs-13); color: var(--muted);
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-6) var(--sp-7);
}
.launch-community-settings .phrm-projects {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  overflow: hidden;
}
.launch-community-settings .phrm-project {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); padding: var(--sp-5) var(--sp-7);
  border-bottom: var(--bw) solid var(--line); background: var(--surface);
}
.launch-community-settings .phrm-project:last-child { border-bottom: 0; }
.launch-community-settings .phrm-project:hover { background: var(--surface2); }
.launch-community-settings .phrm-identity { min-width: 0; }
.launch-community-settings .phrm-project-name {
  font-weight: 600; font-size: var(--fs-13-5); color: var(--ink);
}
.launch-community-settings .phrm-project-slug,
.launch-community-settings .phrm-namespace {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-community-settings .phrm-verification {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--moss);
  margin-top: var(--sp-1);
}
.launch-community-settings .phrm-removal-form { margin: 0; flex: none; }
.launch-community-settings .phrm-btn {
  cursor: pointer; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--danger); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-6);
}
.launch-community-settings .phrm-btn:hover { border-color: var(--danger); }

/* ---- Shared confirm modal --------------------------------------------------- */

/* The shared script composes it from legacy utility class names; the stable
   .fixed.inset-0 pair and the #cancel-btn / #confirm-btn ids are the hooks. */
.launch-community-settings .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-community-settings .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-community-settings .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-community-settings .fixed.inset-0 h3 {
  font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3);
}
.launch-community-settings .fixed.inset-0 p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7);
}
.launch-community-settings .fixed.inset-0 .flex {
  display: flex; justify-content: flex-end; gap: var(--sp-4);
}
.launch-community-settings #cancel-btn,
.launch-community-settings #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-community-settings #confirm-btn {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-settings > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-settings #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-settings #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-settings #analytics-consent [data-analytics-accept],
.launch-community-settings #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-settings #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-settings #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — project-home review only
   Scoped beneath body.launch-project-home-review: GET
   /c/:slug/project-home-requests (Project_home_review_pages) and every
   re-render the accept/reject POSTs produce on this page (Stale_form 403,
   Review_unavailable / Project_unavailable / Target_ineligible 409).
   Exists only because the real review surface cannot emit the reference
   markup exactly:
   - every phrv-* fragment (request cards, the two nameless zero-field
     forms, notes, markers, feedback and empty copy) is pinned by the
     review suites (fragment slice = create-shell → </main>, form and
     name= counts, exact action paths and copy) or treated as pinned, so
     the legacy markup is spliced verbatim and skinned here from outside;
   - the mono community context band precedes the create-shell marker, so
     all launch chrome stays outside the sliced fragment;
   - this surface never names an ineligibility reason, so the sidebar is
     rendered without the private-community visibility marker (handler
     contract, not CSS);
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-project-home-review .launch-user { position: relative; }
.launch-project-home-review .launch-user > summary { list-style: none; }
.launch-project-home-review .launch-user > summary::-webkit-details-marker { display: none; }
.launch-project-home-review .launch-user .avatar { background: var(--moss); }
.launch-project-home-review .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-project-home-review .launch-user__menu a,
.launch-project-home-review .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-project-home-review .launch-user__menu a:hover,
.launch-project-home-review .launch-user__menu button:hover { background: var(--surface2); }
.launch-project-home-review .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-project-home-review #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-project-home-review .launch-rail__img,
.launch-project-home-review .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

.launch-project-home-review .launch-side-id { min-width: 0; display: block; }

/* ---- Page anatomy ----------------------------------------------------------- */

/* Compact head band: mono community context above the sliced fragment
   (reference .page__head--tight geometry, context only — the serif title
   lives inside the pinned create-head). */
.launch-project-home-review .launch-review-context {
  flex: none; display: flex; align-items: baseline; gap: var(--sp-4);
  padding: 12px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-project-home-review .launch-review-context-name { color: var(--ink); }
.launch-project-home-review .launch-review-context-slug { color: var(--muted); }

/* Legacy create.css wrappers, recast as the main scroller and its column. */
.launch-project-home-review .create-shell {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}
.launch-project-home-review .create-wrap {
  max-width: 760px; margin: 0 auto; padding: var(--sp-11) 30px 70px;
}
.launch-project-home-review .create-panel { display: block; }

/* Serif page title over factual explanatory copy. */
.launch-project-home-review .create-head { margin-bottom: var(--sp-9); }
.launch-project-home-review .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink);
}
.launch-project-home-review .create-sub {
  color: var(--muted); font-size: var(--fs-12-5); line-height: var(--lh-prose);
  margin-top: var(--sp-2);
}

/* ---- Feedback + page-level notices (pinned copy, styled from outside) ------- */

/* Outcome feedback: flat 1px ochre-tinted notice — never a shadowed alert. */
.launch-project-home-review .phrv-alert {
  border: var(--bw) solid var(--ochre); border-radius: var(--r-2);
  background: color-mix(in srgb, var(--ochre) 8%, var(--surface));
  color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-prose);
  padding: 13px var(--sp-8); margin-bottom: var(--sp-8);
}
.launch-project-home-review .phrv-alert p { margin: 0; }

/* Ineligible-host notice: factual, muted, no reason named. */
.launch-project-home-review .phrv-ineligible {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); color: var(--muted);
  font-size: var(--fs-12-5); line-height: var(--lh-prose);
  padding: 11px var(--sp-8); margin-bottom: var(--sp-8);
}
.launch-project-home-review .phrv-ineligible p { margin: 0; }

/* Explicit empty queue. */
.launch-project-home-review .phrv-empty {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  background: var(--surface2); color: var(--muted);
  font-size: var(--fs-13); padding: var(--sp-8) var(--sp-9);
}

/* ---- Request cards (pinned phrv-* fragment, styled from outside) ------------ */

.launch-project-home-review .phrv-request-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-8);
}

/* Pending request frame: the reference .notice--pending recipe — 1px ochre,
   3px left ochre rule, tight radius, computed ochre tint. Flat. */
.launch-project-home-review .phrv-request {
  border: var(--bw) solid var(--ochre); border-left: 3px solid var(--ochre);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--ochre) 8%, var(--surface));
  padding: var(--sp-8) var(--sp-9);
}

/* Project identity: name 16/700, mono metadata under it. */
.launch-project-home-review .phrv-identity { margin-bottom: var(--sp-5); }
.launch-project-home-review .phrv-project-name {
  font-size: var(--fs-16); font-weight: 700; color: var(--ink);
  line-height: var(--lh-title); margin: 0;
}
.launch-project-home-review .phrv-project-kind,
.launch-project-home-review .phrv-namespace {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin: var(--sp-1) 0 0;
}
.launch-project-home-review .phrv-verification {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  margin: var(--sp-2) 0 0;
}
.launch-project-home-review .phrv-connected {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin: var(--sp-1) 0 0;
}

/* Repositories: mono rows; links stay quiet slate, markers are micro pills. */
.launch-project-home-review .phrv-repos {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.launch-project-home-review .phrv-repo {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--ink);
}
.launch-project-home-review .phrv-repo-link {
  color: var(--slate); text-decoration: none;
}
.launch-project-home-review .phrv-repo-link:hover { text-decoration: underline; }
.launch-project-home-review .phrv-repo-name { color: var(--ink); }
.launch-project-home-review .phrv-marker {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-9);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  padding: 0 var(--sp-2); margin-left: var(--sp-2); color: var(--muted);
  vertical-align: 1px;
}
.launch-project-home-review .phrv-primary {
  color: var(--moss); border-color: var(--moss);
}
.launch-project-home-review .phrv-no-repos {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin: 0 0 var(--sp-5);
}

/* Requester: mono meta, secondary. */
.launch-project-home-review .phrv-requester {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin: 0 0 var(--sp-4);
}

/* Private note: inner plain-surface box; readable but secondary. */
.launch-project-home-review .phrv-note {
  border: var(--bw) solid var(--line); border-radius: var(--r-2);
  background: var(--surface); padding: var(--sp-5) var(--sp-7);
  margin-bottom: var(--sp-6);
}
.launch-project-home-review .phrv-note-label {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin: 0 0 var(--sp-3);
}
.launch-project-home-review .phrv-note-body {
  font-size: var(--fs-13); color: var(--ink); line-height: var(--lh-prose);
  margin: 0; overflow-wrap: anywhere;
}

/* ---- Actions (two pinned nameless zero-field forms) ------------------------- */

.launch-project-home-review .phrv-actions {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-top: var(--sp-5); border-top: var(--bw) solid var(--line);
}
.launch-project-home-review .phrv-review-form { margin: 0; }
.launch-project-home-review .phrv-btn {
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-12); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-8);
}
/* Moss accept. */
.launch-project-home-review .phrv-accept .phrv-btn {
  color: #fff; background: var(--moss); border: var(--bw) solid var(--moss);
}
.launch-project-home-review .phrv-accept .phrv-btn:hover { background: var(--forest); }
/* Restrained clay reject: quiet outline, clay ink. */
.launch-project-home-review .phrv-reject .phrv-btn {
  color: var(--clay); background: var(--surface);
  border: var(--bw) solid var(--line2);
}
.launch-project-home-review .phrv-reject .phrv-btn:hover { border-color: var(--clay); }
/* Acceptance unavailable: factual copy in the accept slot, never a
   disabled control. */
.launch-project-home-review .phrv-accept-unavailable {
  font-size: var(--fs-12); color: var(--muted); margin: 0;
}

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-project-home-review > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-project-home-review #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-project-home-review #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-project-home-review #analytics-consent [data-analytics-accept],
.launch-project-home-review #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-project-home-review #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-project-home-review #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — notifications only
   Scoped beneath body.launch-notifications: GET /notifications
   (Pages.notifications_page). Exists only because the real notification
   center cannot emit the reference markup exactly:
   - the row anatomy (account-notif / -icon / -body / -msg / -time, the
     account-notif--unread accent and its cosmetic onclick clear) is pinned
     by the gated Phnt UI suite and by the replay-masking selector
     .account-notif-msg in analytics.js, so the legacy rows are spliced
     verbatim and skinned here onto the approved flat .notif anatomy;
   - the handoff's filter tabs and "mark all read" POST have no backing
     routes and are deliberately absent (the GET itself marks rows read);
   - the row carries no context line and no separate right column, so the
     mono time sits right-aligned on the message baseline and the unread
     clay dot is drawn from the time cell — same signals, real fields only;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-notifications .launch-user { position: relative; }
.launch-notifications .launch-user > summary { list-style: none; }
.launch-notifications .launch-user > summary::-webkit-details-marker { display: none; }
.launch-notifications .launch-user .avatar { background: var(--moss); }
.launch-notifications .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-notifications .launch-user__menu a,
.launch-notifications .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-notifications .launch-user__menu a:hover,
.launch-notifications .launch-user__menu button:hover { background: var(--surface2); }
.launch-notifications .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-notifications #notif-badge.hidden { display: none; }

/* Real community avatars fill the fixed 42px rail tile. */
.launch-notifications .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Rows ------------------------------------------------------------------- */

/* Legacy card list recast as the approved flat list: no gap, hairline
   separators only. */
.launch-notifications .account-notifs { display: flex; flex-direction: column; }

/* Row = 28px icon tile · message · right-aligned mono time (.notif
   geometry over the pinned account-notif markup). */
.launch-notifications .account-notif {
  display: flex; gap: 13px; padding: 13px var(--sp-3);
  border-bottom: var(--bw) solid var(--line);
  text-decoration: none; color: var(--ink);
}
.launch-notifications a.account-notif { cursor: pointer; }
.launch-notifications a.account-notif:hover { background: var(--surface2); }
.launch-notifications .account-notif--unread {
  background: color-mix(in srgb, var(--ochre) 7%, var(--surface));
}
.launch-notifications .account-notif-icon {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  font-size: var(--fs-13); color: var(--muted); background: var(--surface);
}
.launch-notifications .account-notif-body {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-7);
  padding-top: 1px;
}
.launch-notifications .account-notif-msg {
  flex: 1; min-width: 0; font-size: var(--fs-13-5); line-height: 1.45;
  color: var(--ink);
}
.launch-notifications .account-notif-time {
  flex: none; display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  white-space: nowrap; margin: 0;
}
/* Unread signal: 7px clay dot beside the time (the row markup has no
   dedicated dot element; the onclick unread-clear removes both signals). */
.launch-notifications .account-notif--unread .account-notif-time::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: var(--r-pill); background: var(--clay);
}

/* Empty state: a mono sentence, nothing else. */
.launch-notifications .account-empty {
  padding: 46px var(--sp-3); text-align: center;
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
}

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-notifications > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-notifications #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-notifications #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-notifications #analytics-consent [data-analytics-accept],
.launch-notifications #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-notifications #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-notifications #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — search only
   Scoped beneath body.launch-search: GET /search
   (Pages.search_results_page). Exists only because the real search surface
   cannot emit the reference markup exactly (there is no search mockup — the
   approved global shell is extended around the real implementation):
   - the result anatomy (sr-row / -title / -meta / -excerpt / -src / -stats /
     -link, the #sr-analytics container and the sr-q input) is pinned by the
     analytics suites and by the replay-masking selectors .sr-row-title /
     .sr-row-excerpt in analytics.js, so the legacy fragments are spliced
     verbatim and skinned here onto the flat launch list language;
   - the page keeps its own primary GET form (.sr-head) alongside the topbar
     command field — both are real, un-nested /search?q= forms with distinct
     input ids (#sr-q vs #q), the existing product behavior;
   - the serif page heading IS the existing .sr-label (restyled), so nothing
     is added inside the pinned wrapper;
   - moderation/self-action controls (own-post delete, admin-remove dialog)
     ship legacy Tailwind class names that are inert here; the same skin the
     feed section gives them is re-scoped for this route;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-search .launch-user { position: relative; }
.launch-search .launch-user > summary { list-style: none; }
.launch-search .launch-user > summary::-webkit-details-marker { display: none; }
.launch-search .launch-user .avatar { background: var(--moss); }
.launch-search .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-search .launch-user__menu a,
.launch-search .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-search .launch-user__menu a:hover,
.launch-search .launch-user__menu button:hover { background: var(--surface2); }
.launch-search .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-search #notif-badge.hidden { display: none; }

/* Real community avatars fill the fixed 42px rail tile. */
.launch-search .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Header: serif title + command-field query box -------------------------- */

.launch-search .sr-wrap {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: var(--sp-13) 0 var(--sp-15);
}

.launch-search .sr-head { margin: 0 0 var(--sp-10); }

/* The compact serif page heading is the existing pinned label element. */
.launch-search .sr-label {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: var(--fs-24); line-height: var(--lh-tight); color: var(--ink);
  margin: 0 0 var(--sp-8);
}

/* Prominent but restrained query field: sigil cell · input · mono go. */
.launch-search .sr-inputrow {
  display: flex; align-items: stretch;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); overflow: hidden;
}
.launch-search .sr-inputrow:focus-within { border-color: var(--moss); }
.launch-search .sr-sigil {
  display: grid; place-items: center; padding: 0 var(--sp-6);
  font-family: var(--mono); font-size: var(--fs-15); color: var(--muted);
  border-right: var(--bw) solid var(--line); background: var(--surface2);
}
.launch-search .sr-input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: var(--fs-15); color: var(--ink);
  padding: var(--sp-5) var(--sp-6);
}
.launch-search .sr-input::placeholder { color: var(--muted); }
.launch-search .sr-input:focus-visible { outline: none; }
.launch-search .sr-go {
  border: 0; border-left: var(--bw) solid var(--line);
  background: var(--surface3); color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-12);
  letter-spacing: var(--ls-badge); padding: 0 var(--sp-8);
}
.launch-search .sr-go:hover { background: var(--moss); color: #fff; }

/* ---- Result tabs ------------------------------------------------------------- */

.launch-search .sr-tabs {
  display: flex; gap: var(--sp-11); align-items: center; flex-wrap: wrap;
  border-bottom: var(--bw) solid var(--line); margin: 0 0 var(--sp-4);
}
.launch-search .sr-tab {
  font-family: var(--mono); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: var(--ls-badge); color: var(--muted);
  padding: 0 0 var(--sp-5); border-bottom: var(--bw-accent) solid transparent;
  margin-bottom: -1px;
}
.launch-search .sr-tab:hover { color: var(--ink); }
.launch-search .sr-tab.is-active { color: var(--moss); border-bottom-color: var(--moss); }

/* ---- Result rows: flat list, hairline separators ----------------------------- */

.launch-search .sr-results { display: flex; flex-direction: column; }
.launch-search .sr-row {
  display: flex; gap: var(--sp-7); align-items: flex-start;
  padding: 13px var(--sp-3);
  border-bottom: var(--bw) solid var(--line);
  color: var(--ink); text-decoration: none;
}
.launch-search a.sr-row--link:hover { background: var(--surface2); color: var(--ink); }
.launch-search .sr-row-main { flex: 1; min-width: 0; }

.launch-search .sr-row-title {
  font-family: var(--sans); font-size: var(--fs-15-5); font-weight: 600;
  line-height: var(--lh-title); color: var(--ink); margin: 0 0 var(--sp-2);
  overflow-wrap: anywhere;
}
.launch-search .sr-row-title a { color: var(--ink); }
.launch-search .sr-row-title a:hover { color: var(--moss); }

.launch-search .sr-row-meta {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  line-height: var(--lh-ui); margin: 0 0 var(--sp-2); overflow-wrap: anywhere;
}
.launch-search .sr-row-meta a { color: var(--muted); }
.launch-search .sr-row-meta a:hover { color: var(--ink); }
.launch-search .sr-row-meta .sr-c,
.launch-search .sr-row-meta .sr-s { color: var(--slate); font-weight: 600; }
.launch-search .sr-row-meta .sr-c:hover,
.launch-search .sr-row-meta .sr-s:hover { color: var(--moss); }
.launch-search .sr-dot { color: var(--line2); padding: 0 1px; }
.launch-search .sr-sep { color: var(--line2); }

.launch-search .sr-row-excerpt {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin: var(--sp-2) 0 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Started-from-chat provenance: the system-wide clay left rule. */
.launch-search .sr-row-src {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  border-left: var(--bw-accent) solid var(--clay);
  padding-left: var(--sp-4); margin: var(--sp-3) 0 var(--sp-1);
}
.launch-search .sr-row-src a { color: var(--clay); font-weight: 600; }

.launch-search .sr-row-stats {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-3);
}
.launch-search .sr-row-stats a { color: var(--muted); }
.launch-search .sr-row-stats a:hover { color: var(--ink); }
.launch-search .sr-score { color: var(--ink); font-weight: 600; }
.launch-search .sr-score::before { content: '\2191 '; color: var(--muted); }

.launch-search .sr-row-link {
  display: inline-block; margin-top: var(--sp-4);
  font-family: var(--mono); font-size: var(--fs-11-5); font-weight: 600;
  color: var(--slate);
}
.launch-search .sr-row-link:hover { color: var(--moss); }

/* People / community avatars: 40px tile, letter-tile fallback. */
.launch-search .sr-avatar {
  width: 40px; height: 40px; border-radius: var(--r-3); object-fit: cover;
  flex-shrink: 0; border: var(--bw) solid var(--line);
}
.launch-search .sr-avatar--mono {
  display: grid; place-items: center; background: var(--surface3);
  font-family: var(--mono); font-weight: 600; color: var(--muted);
}

/* [MOD]/[ADMIN] author badges (legacy Tailwind names inert here). */
.launch-search .mod-badge {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--clay);
  margin-left: 4px;
}

/* Compact secondary strip for admin/self actions — dim at rest, never
   dominating the public result row. */
.launch-search .sr-row-admin {
  flex-shrink: 0; display: flex; align-items: flex-start; gap: var(--sp-2);
  padding-left: var(--sp-5); margin-left: auto;
  opacity: 0.7; transition: opacity 0.12s ease;
}
.launch-search .sr-row:hover .sr-row-admin,
.launch-search .sr-row-admin:focus-within { opacity: 1; }
.launch-search .sr-row-admin button {
  cursor: pointer; background: none; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); color: var(--muted);
  font-size: var(--fs-12); padding: var(--sp-1) var(--sp-3);
}
.launch-search .sr-row-admin button:hover { color: var(--danger); border-color: var(--danger); }

/* ---- Empty / prompt / pagination --------------------------------------------- */

.launch-search .sr-empty {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  padding: 36px var(--sp-10); text-align: center;
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
}
.launch-search .sr-empty--prompt { padding: 56px var(--sp-12); }

.launch-search .sr-pager {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-6); margin-top: var(--sp-9);
}
.launch-search .sr-pager:empty { display: none; }
.launch-search .sr-page {
  font-family: var(--mono); font-size: var(--fs-12); font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7);
}
.launch-search .sr-page:hover { border-color: var(--moss); color: var(--moss); }
/* keep Next pinned right when Prev is absent on page 1 */
.launch-search .sr-page:only-child { margin-left: auto; }

/* ---- Moderation dialogs + shared confirm modal ------------------------------- */

/* Legacy moderation <dialog>s (Tailwind classes inert here): keep them
   readable and usable; admin-only surface. */
.launch-search dialog {
  border: var(--bw) solid var(--line2); border-radius: var(--r-4);
  padding: var(--sp-9); max-width: 28rem; width: calc(100% - 2rem);
  background: var(--surface); color: var(--ink);
}
.launch-search dialog::backdrop { background: rgba(31, 36, 33, .45); }
.launch-search dialog form {
  display: flex; flex-direction: column; gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.launch-search dialog textarea {
  width: 100%; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-13); min-height: 70px;
}
.launch-search dialog button {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-search dialog button[type='submit'] {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* Shared confirm modal (own-post delete): the script composes it from legacy
   utility class names; the stable .fixed.inset-0 pair and the #cancel-btn /
   #confirm-btn ids are the hooks. */
.launch-search .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-search .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-search .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-search .fixed.inset-0 h3 { font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3); }
.launch-search .fixed.inset-0 p { font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7); }
.launch-search .fixed.inset-0 .flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-search #cancel-btn,
.launch-search #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-search #confirm-btn { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---- Gate + consent ----------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-search > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-search #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-search #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-search #analytics-consent [data-analytics-accept],
.launch-search #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-search #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-search #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — public user profile only
   Scoped beneath body.launch-user-profile: GET /u/:username
   (Pages.user_profile_page). Exists only because the real profile surface
   cannot emit the reference markup exactly (there is no profile mockup — the
   approved global shell is extended around the real implementation):
   - the inner account-* anatomy (account-prof header, account-badges,
     account-bio, account-tabs, account-thread rows with the /vote form DOM
     the shared behavior script drives, account-comment, account-comm-card,
     account-admin) is kept and skinned here onto the flat launch list
     language; .account-bio is a replay-masking selector in analytics.js;
   - the vote buttons keep the legacy text-orange-500 / text-[#69C3D2] state
     classes the optimistic-vote script toggles; they are mapped to the clay
     and slate accents, exactly as on /feed;
   - the admin ban/unban forms keep their confirmModal onsubmit; the modal
     is composed by the shared script from legacy utility class names — the
     stable .fixed.inset-0 pair and #cancel-btn / #confirm-btn are the hooks;
   - the ?tab= contract (posts default, comments, communities, unknown →
     posts) is server-rendered; the tabs are plain links, no client tabs;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-user-profile .launch-user { position: relative; }
.launch-user-profile .launch-user > summary { list-style: none; }
.launch-user-profile .launch-user > summary::-webkit-details-marker { display: none; }
.launch-user-profile .launch-user .avatar { background: var(--moss); }
.launch-user-profile .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-user-profile .launch-user__menu a,
.launch-user-profile .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-user-profile .launch-user__menu a:hover,
.launch-user-profile .launch-user__menu button:hover { background: var(--surface2); }
.launch-user-profile .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-user-profile #notif-badge.hidden { display: none; }

/* Real community avatars fill the fixed 42px rail tile. */
.launch-user-profile .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Profile header ---------------------------------------------------------- */

.launch-user-profile .account-wrap { padding-top: var(--sp-13); }

/* The identity panel: one flat card — avatar · serif u/name · factual meta. */
.launch-user-profile .account-panel {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-10);
}
.launch-user-profile .account-prof {
  display: flex; gap: var(--sp-9); align-items: flex-start;
}
/* Avatar: 64px, tight radius; the letter-tile fallback carries inert legacy
   utility classes — the grid centering below is what actually styles it. */
.launch-user-profile .account-avatar {
  width: 64px; height: 64px; flex: none; border-radius: var(--r-4);
  object-fit: cover; background: var(--forest);
}
.launch-user-profile div.account-avatar {
  display: grid; place-items: center; color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-24);
}
.launch-user-profile .account-prof-body { flex: 1; min-width: 0; }
.launch-user-profile .account-name {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-24);
  line-height: var(--lh-tight); color: var(--ink);
}
.launch-user-profile .account-badges {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3);
}
.launch-user-profile .account-badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  border: var(--bw) solid currentColor; border-radius: var(--r-1);
  padding: 1px 5px; text-decoration: none;
}
.launch-user-profile .account-badge--admin { color: var(--clay); }
.launch-user-profile .account-badge--mod { color: var(--moss); }
.launch-user-profile a.account-badge--mod:hover { background: color-mix(in srgb, var(--moss) 9%, var(--surface)); }
.launch-user-profile .account-badge--banned { color: var(--danger); }
.launch-user-profile .account-stats {
  display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-4);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-user-profile .account-stats strong { color: var(--ink); font-weight: 700; }
.launch-user-profile .account-actions {
  display: flex; gap: var(--sp-5); margin-top: var(--sp-6);
}
/* account-btn: bare = destructive (Ban user); --secondary = quiet outline. */
.launch-user-profile .account-btn {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  color: #fff; background: var(--danger);
  border: var(--bw) solid var(--danger); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); text-decoration: none;
}
.launch-user-profile .account-btn--secondary {
  color: var(--muted); background: var(--surface); border-color: var(--line2);
}
.launch-user-profile .account-btn--secondary:hover { background: var(--surface2); color: var(--ink); }
.launch-user-profile .account-bio {
  margin-top: var(--sp-8); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
  font-size: var(--fs-13-5); line-height: var(--lh-prose); color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Admin controls: a danger-ruled strip inside the panel, admin-only. */
.launch-user-profile .account-admin {
  margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-8);
  border: var(--bw) solid var(--line2);
  border-left: var(--bw-accent-3) solid var(--danger);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
  display: flex; align-items: center; gap: var(--sp-8);
}
.launch-user-profile .account-admin-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 700;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--danger);
}
.launch-user-profile .account-admin form { margin: 0; }

/* ---- Tabs (server-rendered links, ?tab= contract unchanged) ------------------ */

.launch-user-profile .account-tabs {
  display: flex; gap: var(--sp-1); margin-top: var(--sp-11);
  border-bottom: var(--bw) solid var(--line);
}
.launch-user-profile .account-tab {
  font-family: var(--mono); font-size: var(--fs-12); padding: var(--sp-4) 13px;
  color: var(--muted); text-decoration: none;
  border-bottom: var(--bw-accent) solid transparent; margin-bottom: -1px;
}
.launch-user-profile .account-tab:hover { color: var(--ink); }
.launch-user-profile .account-tab--active { color: var(--ink); border-bottom-color: var(--moss); }

/* ---- Thread rows (flat list, thin separators; vote DOM script-driven) -------- */

.launch-user-profile .account-threads { display: flex; flex-direction: column; }
.launch-user-profile .account-thread {
  display: flex; gap: var(--sp-7); padding: 13px var(--sp-3);
  border-bottom: var(--bw) solid var(--line);
}
.launch-user-profile .account-thread-vote {
  flex: none; width: 30px; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-1); padding-top: 2px;
}
.launch-user-profile .account-thread-vote form { margin: 0; padding: 0; display: flex; }
.launch-user-profile .account-thread-vote button,
.launch-user-profile .account-thread-vote a {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-12); line-height: 1; color: var(--line2);
  text-decoration: none;
}
.launch-user-profile .account-thread-vote button:hover,
.launch-user-profile .account-thread-vote a:hover { color: var(--muted); }
/* Optimistic-vote state classes toggled by the shared script. */
.launch-user-profile .account-thread-vote button.text-orange-500 { color: var(--clay); }
.launch-user-profile .account-thread-vote button.text-\[\#69C3D2\] { color: var(--slate); }
.launch-user-profile .account-thread-score {
  font-family: var(--mono); font-size: var(--fs-12); font-weight: 700;
  color: var(--ink);
}
.launch-user-profile .account-thread-main { flex: 1; min-width: 0; }
.launch-user-profile .account-thread-ctx {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-user-profile .account-thread-ctx .sec { color: var(--moss); font-weight: 700; }
.launch-user-profile .account-thread-ctx a { color: var(--muted); }
.launch-user-profile .account-thread-ctx a:hover { color: var(--ink); }
.launch-user-profile .account-thread-title {
  margin-top: var(--sp-1);
  font-size: var(--fs-15-5); font-weight: 600; line-height: var(--lh-title);
}
.launch-user-profile .account-thread-title a { color: var(--ink); }
.launch-user-profile .account-thread-title a:hover { color: var(--moss); }
.launch-user-profile .account-thread-preview {
  margin-top: var(--sp-2); font-size: var(--fs-13); line-height: var(--lh-ui);
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.launch-user-profile .account-thread-meta {
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  margin-top: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-user-profile .account-thread-meta a { color: var(--muted); }
.launch-user-profile .account-thread-meta a:hover { color: var(--ink); }
.launch-user-profile .account-thread-domain { color: var(--slate); }
.launch-user-profile .mod-badge {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--clay);
  margin-left: 4px;
}

/* ---- Comment rows ------------------------------------------------------------ */

.launch-user-profile .account-comment {
  padding: 13px var(--sp-3); border-bottom: var(--bw) solid var(--line);
}
.launch-user-profile .account-comment-meta {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-user-profile .account-comment-body {
  margin-top: var(--sp-3); font-size: var(--fs-13-5); line-height: var(--lh-body);
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.launch-user-profile .account-comment-link {
  display: inline-block; margin-top: var(--sp-4);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--slate);
}
.launch-user-profile .account-comment-link:hover { color: var(--ink); }

/* ---- Community reputation cards ---------------------------------------------- */

.launch-user-profile .account-section-title {
  margin-top: var(--sp-10);
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 700;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted);
}
.launch-user-profile .account-comm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-7); margin-top: var(--sp-6);
}
.launch-user-profile .account-comm-card {
  display: block; border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-8); text-decoration: none;
}
.launch-user-profile .account-comm-card:hover { border-color: var(--line2); background: var(--surface2); }
.launch-user-profile .account-comm-name {
  font-weight: 700; font-size: var(--fs-14); color: var(--ink);
}
.launch-user-profile .account-comm-slug {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: 1px;
}
.launch-user-profile .account-comm-stat {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-3);
}
.launch-user-profile .account-comm-stat strong { color: var(--ink); }
.launch-user-profile .account-comm-sub {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin-top: var(--sp-2);
}

/* ---- Empty state -------------------------------------------------------------- */

.launch-user-profile .account-empty {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  padding: 36px var(--sp-10); text-align: center; margin-top: var(--sp-7);
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
}

/* ---- Shared confirm modal (admin ban/unban) ----------------------------------- */

/* The script composes it from legacy utility class names; the stable
   .fixed.inset-0 pair and the #cancel-btn / #confirm-btn ids are the hooks. */
.launch-user-profile .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-user-profile .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-user-profile .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-user-profile .fixed.inset-0 h3 { font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3); }
.launch-user-profile .fixed.inset-0 p { font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7); }
.launch-user-profile .fixed.inset-0 .flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-user-profile #cancel-btn,
.launch-user-profile #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-user-profile #confirm-btn { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---- Gate + consent ----------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-user-profile > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-user-profile #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-user-profile #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-user-profile #analytics-consent [data-analytics-accept],
.launch-user-profile #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-user-profile #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-user-profile #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — account settings only
   Scoped beneath body.launch-account-settings: GET /settings
   (Pages.settings_page). Exists only because the real account surface
   cannot emit the reference markup exactly:
   - the five account-panel sections (multipart profile form, password
     form, data export, the consent-managed analytics panel, the
     delete-account danger zone) are spliced verbatim — their field names,
     CSRF positions, data-analytics-* hooks and confirmModal onsubmit are
     contracts — and skinned here onto the approved flat settings grammar
     (serif section titles, mono fact labels, inset controls, moss primary,
     danger-accented destructive section);
   - analytics.js toggles the analytics panel and its Enable/Disable
     controls via the `hidden` ATTRIBUTE; author display rules on those
     elements would defeat the UA default, so the attribute is honoured
     route-wide;
   - the confirm-modal overlay (delete account) is composed by the shared
     behavior script from legacy utility class names; the stable
     .fixed.inset-0 pair and the #cancel-btn / #confirm-btn ids are the
     hooks;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-account-settings .launch-user { position: relative; }
.launch-account-settings .launch-user > summary { list-style: none; }
.launch-account-settings .launch-user > summary::-webkit-details-marker { display: none; }
.launch-account-settings .launch-user .avatar { background: var(--moss); }
.launch-account-settings .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-account-settings .launch-user__menu a,
.launch-account-settings .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-account-settings .launch-user__menu a:hover,
.launch-account-settings .launch-user__menu button:hover { background: var(--surface2); }
.launch-account-settings .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-account-settings #notif-badge.hidden { display: none; }

/* Real community avatars fill the fixed 42px rail tile. */
.launch-account-settings .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* analytics.js drives the analytics panel, its Enable/Disable pair and the
   error line through the `hidden` attribute; the author display rules on
   .account-btn/.account-panel below would otherwise override the UA
   [hidden] default. Route-scoped, deliberate. */
.launch-account-settings [hidden] { display: none !important; }

/* ---- Page head --------------------------------------------------------------- */

/* Serif title + mono account identifier left, view-profile link right. */
.launch-account-settings .account-head-launch {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-7);
}
.launch-account-settings .account-ident {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  margin-top: var(--sp-1);
}
.launch-account-settings .account-view-profile {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--slate);
  text-decoration: none; white-space: nowrap; padding-bottom: 2px;
}
.launch-account-settings .account-view-profile:hover { text-decoration: underline; }

/* ---- Panels ------------------------------------------------------------------ */

/* Legacy card column recast as flat bordered form sections: hairline
   borders, tight radii, no gradients, no decorative shadows. */
.launch-account-settings .account-wrap {
  display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-9) 0 70px;
}
.launch-account-settings .account-panel {
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  background: var(--surface); padding: var(--sp-9) var(--sp-10);
}
.launch-account-settings .account-section-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-4);
}
.launch-account-settings .account-section-desc {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin-bottom: var(--sp-6); max-width: 62ch;
}
.launch-account-settings .account-section-desc strong { color: var(--ink); }

/* Destructive section: danger left accent, danger-toned rule set below. */
.launch-account-settings .account-danger {
  border-left: 3px solid var(--danger);
}
.launch-account-settings .account-danger .account-section-title { color: var(--danger); }

/* ---- Forms ------------------------------------------------------------------- */

.launch-account-settings .account-form {
  display: flex; flex-direction: column; gap: var(--sp-7);
  align-items: flex-start;
}
.launch-account-settings .account-field { width: 100%; }
.launch-account-settings .account-field-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-7) var(--sp-9); width: 100%;
}
.launch-account-settings .account-label {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: 5px;
}
.launch-account-settings .account-label-opt { color: var(--muted); }
.launch-account-settings .account-input,
.launch-account-settings .account-textarea {
  width: 100%; font-family: var(--sans); font-size: var(--fs-14);
  color: var(--ink); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: 9px var(--sp-6); outline: none;
}
.launch-account-settings .account-input:focus,
.launch-account-settings .account-textarea:focus { border-color: var(--moss); }
.launch-account-settings .account-textarea {
  min-height: 90px; resize: vertical;
  font-size: var(--fs-13-5); line-height: var(--lh-prose);
}
.launch-account-settings .account-textarea::placeholder { color: var(--muted); opacity: .8; }
.launch-account-settings .account-hint {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-account-settings .account-file {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-account-settings .account-file::file-selector-button {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-6); margin-right: var(--sp-5); cursor: pointer;
}
.launch-account-settings .account-file::file-selector-button:hover { background: var(--surface2); }

/* Avatar preview: fixed square tile; the letter-tile fallback div centres
   its initial (its legacy utility class names are inert here). */
.launch-account-settings .account-avatar-row {
  display: flex; gap: var(--sp-7); align-items: center;
}
.launch-account-settings .account-avatar {
  width: 56px; height: 56px; flex: none;
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  background: var(--surface3); object-fit: cover; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-19); color: var(--ink);
}
.launch-account-settings .account-avatar-ctl {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
}

/* The analytics panel's button row (plain div inside its .account-form). */
.launch-account-settings [data-analytics-settings] .account-form > div {
  display: flex; gap: var(--sp-4);
}

/* ---- Buttons ----------------------------------------------------------------- */

/* Moss primary; quiet bordered secondary; text-and-border danger that only
   fills on hover (accents are deliberate, not decorative). The data-export
   anchor shares the button classes, hence inline-flex + no underline. */
.launch-account-settings .account-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12-5);
  color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-8);
}
.launch-account-settings .account-btn:hover { background: var(--forest); border-color: var(--forest); }
.launch-account-settings .account-btn--secondary {
  color: var(--ink); background: var(--surface); border-color: var(--line2);
}
.launch-account-settings .account-btn--secondary:hover { background: var(--surface2); border-color: var(--line2); }
.launch-account-settings .account-btn--danger {
  color: var(--danger); background: var(--surface); border-color: var(--danger);
}
.launch-account-settings .account-btn--danger:hover { color: #fff; background: var(--danger); }

/* ---- Confirm modal ------------------------------------------------------------ */

/* Shared confirm modal (delete account): the script composes it from legacy
   utility class names; the stable .fixed.inset-0 pair and the #cancel-btn /
   #confirm-btn ids are the hooks. */
.launch-account-settings .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-account-settings .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-account-settings .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-account-settings .fixed.inset-0 h3 { font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3); }
.launch-account-settings .fixed.inset-0 p { font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7); }
.launch-account-settings .fixed.inset-0 .flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-account-settings #cancel-btn,
.launch-account-settings #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-account-settings #confirm-btn { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-account-settings > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-account-settings #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-account-settings #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-account-settings #analytics-consent [data-analytics-accept],
.launch-account-settings #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-account-settings #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-account-settings #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — community moderation log only
   Scoped beneath body.launch-community-modlog: GET /c/:slug/modlog
   (Pages.mod_log_page). Exists only because the real ledger surface cannot
   emit the reference markup exactly:
   - the cm-* event rows (when / actor / action chip / reason cells, the
     admin-override tag variant, the empty row) and the .cm-table-reason
     replay-mask class are analytics/test contracts, so the legacy markup is
     spliced verbatim and skinned here onto the approved community-shell
     anatomy (page head band over a flat chronological ledger — an auditable
     civic record, not a dashboard);
   - the route is intentionally public (transparency), so nothing here may
     imply a management surface: no action controls, no statistics, only the
     recorded events;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-modlog .launch-user { position: relative; }
.launch-community-modlog .launch-user > summary { list-style: none; }
.launch-community-modlog .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-modlog .launch-user .avatar { background: var(--moss); }
.launch-community-modlog .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-modlog .launch-user__menu a,
.launch-community-modlog .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-modlog .launch-user__menu a:hover,
.launch-community-modlog .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-modlog .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-modlog #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-community-modlog .launch-rail__img,
.launch-community-modlog .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ------------------------------------------------------ */

.launch-community-modlog .launch-side-id { min-width: 0; display: block; }
.launch-community-modlog .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Ledger anatomy --------------------------------------------------------- */

/* Private communities keep the renderer's inner replay guard; keep it out of
   the flex chain so both privacy shapes share one layout. */
.launch-community-modlog .main > .ph-no-capture { display: contents; }

/* cm-wrap fills <main> as a column: fixed head band over the scrolling ledger. */
.launch-community-modlog .cm-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}

/* Page head band (reference .page__head--tight geometry): serif title,
   mono /c/:slug context, quiet mono back link right. */
.launch-community-modlog .cm-head {
  flex: none; display: flex; align-items: baseline; gap: var(--sp-6);
  padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-modlog .cm-h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink); min-width: 0;
}
.launch-community-modlog .cm-h1 .accent { color: var(--moss); }
.launch-community-modlog .launch-modlog-ctx {
  font-size: var(--fs-11-5); color: var(--muted);
}
.launch-community-modlog .cm-back {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  text-decoration: none;
}
.launch-community-modlog .cm-back:hover { color: var(--ink); }

/* The ledger column is the scroller; content stays left-set at register width. */
.launch-community-modlog .cm-panel {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-10) 28px 70px;
}
.launch-community-modlog .cm-panel > * { max-width: 940px; }
.launch-community-modlog .cm-panel-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-2);
}
.launch-community-modlog .cm-panel-desc {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin: var(--sp-2) 0 var(--sp-7);
}

/* ---- Event ledger ----------------------------------------------------------- */

/* Flat chronological record: one hairline frame, thin row separators, no
   zebra, no shadows — actor → action → target reads left to right. */
.launch-community-modlog .cm-table-wrap {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); overflow-x: auto;
}
.launch-community-modlog .cm-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-13);
}
.launch-community-modlog .cm-table thead th {
  font-family: var(--mono); font-size: var(--fs-10); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); text-align: left;
  padding: var(--sp-3) var(--sp-6); background: var(--surface2);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-modlog .cm-table tbody td {
  padding: var(--sp-4) var(--sp-6); vertical-align: baseline;
  border-bottom: var(--bw) solid var(--line);
}
.launch-community-modlog .cm-table tbody tr:last-child td { border-bottom: 0; }

/* Mono timestamp, quiet. */
.launch-community-modlog .cm-table-when {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  white-space: nowrap;
}
/* Actor: the acting moderator, a real /u/ link. */
.launch-community-modlog .cm-table-actor {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--slate);
  text-decoration: none;
}
.launch-community-modlog .cm-table-actor:hover { text-decoration: underline; }
/* Event-type marker: outline chip on the raw recorded action_type — the only
   two real categories are community-mod and admin-override (clay: the
   provenance of authority), so nothing else is invented. */
.launch-community-modlog .cm-action-tag {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-10-5);
  font-weight: 600; color: var(--ink); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  padding: 0 var(--sp-2); white-space: nowrap;
}
.launch-community-modlog .cm-action-tag--admin {
  color: var(--clay); background: transparent; border-color: var(--clay);
}
/* Target: the recorded id, mono metadata. */
.launch-community-modlog .cm-table-target {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
/* Reason: readable but secondary to the actor → action → target line. */
.launch-community-modlog .cm-table-reason {
  font-size: var(--fs-12-5); color: var(--ink); line-height: var(--lh-prose);
}
/* Empty state: a mono sentence, not a poster. */
.launch-community-modlog .cm-table-empty {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  text-align: center; padding: var(--sp-12) var(--sp-8);
}

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-modlog > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-modlog #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-modlog #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-modlog #analytics-consent [data-analytics-accept],
.launch-community-modlog #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-modlog #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-modlog #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — community reports only
   Scoped beneath body.launch-community-reports: GET /c/:slug/reports
   (Pages.reports_queue_page), every ?status= tab of the same renderer.
   Exists only because the real review surface cannot emit the reference
   markup exactly:
   - the cm-* report rows (id / reporter / reason+target / context /
     resolution cells), the status badges, the one-form-two-formaction
     dismiss / action-taken submits and the .ph-mask replay classes are
     treated as pinned, so the legacy markup is spliced verbatim and skinned
     here onto the approved community-shell anatomy (page head band over a
     flat review docket — a civic queue, not a trust-and-safety dashboard);
   - the route is M/TM/A-gated in the handler, so the docket may show the
     real resolution controls, but nothing here adds bulk actions,
     statistics or workflow states the backend does not have;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - for a private community the renderer keeps its inner ph-no-capture
     guard div inside <main>; display:contents keeps it out of the flex
     chain so both privacy shapes share one layout;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-reports .launch-user { position: relative; }
.launch-community-reports .launch-user > summary { list-style: none; }
.launch-community-reports .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-reports .launch-user .avatar { background: var(--moss); }
.launch-community-reports .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-reports .launch-user__menu a,
.launch-community-reports .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-reports .launch-user__menu a:hover,
.launch-community-reports .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-reports .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-reports #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-community-reports .launch-rail__img,
.launch-community-reports .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ------------------------------------------------------ */

.launch-community-reports .launch-side-id { min-width: 0; display: block; }
.launch-community-reports .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Docket anatomy --------------------------------------------------------- */

/* Private communities keep the renderer's inner replay guard; keep it out of
   the flex chain so both privacy shapes share one layout. */
.launch-community-reports .main > .ph-no-capture { display: contents; }

/* cm-wrap fills <main> as a column: fixed head band over the scrolling queue. */
.launch-community-reports .cm-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}

/* Page head band (reference .page__head--tight geometry): serif title,
   mono /c/:slug context, quiet mono back link right. */
.launch-community-reports .cm-head {
  flex: none; display: flex; align-items: baseline; gap: var(--sp-6);
  padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-reports .cm-h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink); min-width: 0;
}
.launch-community-reports .cm-h1 .accent { color: var(--moss); }
.launch-community-reports .launch-reports-ctx {
  font-size: var(--fs-11-5); color: var(--muted);
}
.launch-community-reports .cm-back {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  text-decoration: none;
}
.launch-community-reports .cm-back:hover { color: var(--ink); }

/* The queue column is the scroller; the five-column docket needs the wide
   register (the renderer's cm-wrap--wide), so the cap sits above the ledger's. */
.launch-community-reports .cm-panel {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-10) 28px 70px;
}
.launch-community-reports .cm-panel > * { max-width: 1160px; }
.launch-community-reports .cm-panel-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); margin-bottom: var(--sp-2);
}
.launch-community-reports .cm-panel-desc {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin: var(--sp-2) 0 var(--sp-7);
}

/* Status tabs: the renderer's three real states (Open / Action taken /
   Dismissed) as a flat mono tab row — thin rule under the run, the active
   tab inked and underscored in moss. No counts (they would be fabricated). */
.launch-community-reports .cm-nav {
  display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-7);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-reports .cm-nav-link {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  text-decoration: none; padding: var(--sp-3) var(--sp-5);
  border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--bw));
}
.launch-community-reports .cm-nav-link:hover { color: var(--ink); }
.launch-community-reports .cm-nav-link--active {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--moss);
}

/* ---- Review docket ---------------------------------------------------------- */

/* Flat review queue: one hairline frame, thin row separators, no zebra, no
   shadows — target identity reads primary, reason secondary, reporter and
   timestamps in restrained mono metadata. */
.launch-community-reports .cm-table-wrap {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); overflow-x: auto;
}
.launch-community-reports .cm-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-13);
}
.launch-community-reports .cm-table thead th {
  font-family: var(--mono); font-size: var(--fs-10); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); text-align: left;
  padding: var(--sp-3) var(--sp-6); background: var(--surface2);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-reports .cm-table tbody td {
  padding: var(--sp-4) var(--sp-6); vertical-align: top;
  border-bottom: var(--bw) solid var(--line);
}
.launch-community-reports .cm-table tbody tr:last-child td { border-bottom: 0; }

/* Report id + filed-when + status: quiet mono ledger column. */
.launch-community-reports .cm-table-when {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  white-space: nowrap; line-height: 1.9;
}
/* Reporter / target-author / context links: real /u/ and content links. */
.launch-community-reports .cm-table-actor {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--slate);
  text-decoration: none;
}
.launch-community-reports .cm-table-actor:hover { text-decoration: underline; }
/* Mono metadata: target authorship, masked excerpts, degraded targets. */
.launch-community-reports .cm-table-target {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
/* Reporter's optional details: readable but secondary. */
.launch-community-reports .cm-table-reason {
  font-size: var(--fs-12-5); color: var(--ink); line-height: var(--lh-prose);
}

/* Status chips on the recorded report state — outline marks, tight radii:
   open reads as pending attention (ochre), action taken as a settled moss
   outcome, dismissed recedes to the muted archive tone. The bare cm-badge
   also carries the target-type word (post / comment / chat message) as a
   neutral chip. */
.launch-community-reports .cm-badge {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  padding: 1px var(--sp-3); color: var(--muted); background: var(--surface2);
  white-space: nowrap;
}
.launch-community-reports .cm-badge--active {
  color: var(--ochre); border-color: var(--ochre);
  background: color-mix(in srgb, var(--ochre) 9%, var(--surface));
}
.launch-community-reports .cm-badge--top {
  color: var(--moss); border-color: var(--moss);
  background: color-mix(in srgb, var(--moss) 9%, var(--surface));
}
.launch-community-reports .cm-badge--archived { color: var(--muted); }

/* ---- Resolution controls ---------------------------------------------------- */

/* One form per open row, two formaction submits (the renderer's exact
   contract): optional note above the quiet Dismiss (slate — the report had
   no merit) and the moss Mark-action-taken. */
.launch-community-reports .cm-report-actions {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 190px;
}
.launch-community-reports .cm-report-note {
  width: 100%; resize: vertical; min-height: 44px;
  font-family: var(--sans); font-size: var(--fs-12); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
}
.launch-community-reports .cm-report-note::placeholder { color: var(--muted); }
.launch-community-reports .cm-report-note:focus {
  outline: none; border-color: var(--slate);
}
.launch-community-reports .cm-report-btns { display: flex; gap: var(--sp-3); }
.launch-community-reports .cm-btn-sm {
  cursor: pointer; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--slate); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-6); white-space: nowrap;
}
.launch-community-reports .cm-btn-sm:hover {
  background: var(--surface2); color: var(--ink);
}
.launch-community-reports .cm-btn-sm--ok { color: var(--moss); }
.launch-community-reports .cm-btn-sm--ok:hover {
  border-color: var(--moss); color: var(--moss); background: var(--surface);
}

/* Resolved rows: the recorded outcome (kind / when / optional note) as quiet
   mono metadata — no controls, nothing re-openable is implied. */
.launch-community-reports .cm-report-meta {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  line-height: 1.9;
}

/* Empty state: a mono sentence, not a poster. */
.launch-community-reports .cm-table-empty {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  text-align: center; padding: var(--sp-12) var(--sp-8);
}

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-reports > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-reports #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-reports #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-reports #analytics-consent [data-analytics-accept],
.launch-community-reports #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-reports #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-reports #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — community moderator management only
   Scoped beneath body.launch-community-moderators: GET /c/:slug/manage-mods
   (Pages.manage_mods_page). Exists only because the real stewardship surface
   cannot emit the reference markup exactly:
   - the cm-* role sections (Top Mods / Moderators / Legacy moderators), the
     add / promote / remove forms with their hidden target_user_id fields,
     the confirmModal onsubmit hooks and the role badges are handler/test
     contracts, so the legacy markup is spliced verbatim and skinned here
     onto the approved community-shell anatomy (page head band over a flat
     moderator ledger — stewardship administration, not enterprise IAM);
   - the route is TM/A-gated in the handler, so the roster may show the real
     role actions, but nothing here adds invitations, permission matrices,
     activity metrics or bulk actions the backend does not have;
   - the shared behavior script composes the confirm modal from legacy
     utility class names; the stable .fixed.inset-0 pair and the
     #cancel-btn / #confirm-btn ids are the hooks, styled route-scoped;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - for a private community the renderer keeps its inner ph-no-capture
     guard div inside <main>; display:contents keeps it out of the flex
     chain so both privacy shapes share one layout;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-community-moderators .launch-user { position: relative; }
.launch-community-moderators .launch-user > summary { list-style: none; }
.launch-community-moderators .launch-user > summary::-webkit-details-marker { display: none; }
.launch-community-moderators .launch-user .avatar { background: var(--moss); }
.launch-community-moderators .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-community-moderators .launch-user__menu a,
.launch-community-moderators .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-community-moderators .launch-user__menu a:hover,
.launch-community-moderators .launch-user__menu button:hover { background: var(--surface2); }
.launch-community-moderators .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-community-moderators #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-community-moderators .launch-rail__img,
.launch-community-moderators .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ------------------------------------------------------ */

.launch-community-moderators .launch-side-id { min-width: 0; display: block; }
.launch-community-moderators .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Roster anatomy --------------------------------------------------------- */

/* Private communities keep the renderer's inner replay guard; keep it out of
   the flex chain so both privacy shapes share one layout. */
.launch-community-moderators .main > .ph-no-capture { display: contents; }

/* Unlike the single-ledger siblings, this surface stacks several cm-panel
   sections (add form, Top Mods, Moderators, Legacy) — so cm-wrap itself is
   the scroller and the head band stays pinned above it. */
.launch-community-moderators .cm-wrap {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding-bottom: 70px;
}

/* Page head band (reference .page__head--tight geometry): compact serif
   title; the legacy accent span carries "— /c/:slug", restyled as the quiet
   mono route context rather than a display flourish. */
.launch-community-moderators .cm-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: baseline; gap: var(--sp-6);
  padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-community-moderators .cm-h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink); min-width: 0;
}
.launch-community-moderators .cm-h1 .accent {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-11-5);
  color: var(--muted); margin-left: var(--sp-3);
}
.launch-community-moderators .cm-back {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
  text-decoration: none;
}
.launch-community-moderators .cm-back:hover { color: var(--ink); }

/* Stacked panels at register width, thin-ruled — flat sections, no cards. */
.launch-community-moderators .cm-panel {
  margin: var(--sp-10) 28px 0; max-width: 860px;
  padding-bottom: var(--sp-9);
  border-bottom: var(--bw) solid var(--line);
}
.launch-community-moderators .cm-panel:last-child { border-bottom: 0; }
.launch-community-moderators .cm-panel-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-16);
  color: var(--ink); margin-bottom: var(--sp-2);
}
/* Real constraint copy only (council cap, admin-only removal, inactivity
   demotion) — reads as the protected-role explanation, nothing invented. */
.launch-community-moderators .cm-panel-desc {
  font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-prose);
  margin: var(--sp-2) 0 var(--sp-6);
}

/* ---- Moderator ledger ------------------------------------------------------- */

/* Flat roster: one hairline frame, thin row separators, no zebra, no
   shadows — username identity primary, role marker secondary, actions quiet
   on the right. */
.launch-community-moderators .cm-list {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface);
}
.launch-community-moderators .cm-list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); padding: var(--sp-4) var(--sp-6);
  border-bottom: var(--bw) solid var(--line);
}
.launch-community-moderators .cm-list-row:last-child { border-bottom: 0; }

/* Identity: the real /u/ profile link, mono, visually primary. */
.launch-community-moderators .cm-user-link {
  font-family: var(--mono); font-size: var(--fs-13); font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.launch-community-moderators .cm-user-link:hover { text-decoration: underline; }
.launch-community-moderators .cm-user-link--muted {
  color: var(--muted); font-weight: 400;
}

/* Role markers: outline chips on the recorded role — Top Mod carries the
   moss steward tone, Legacy recedes to the archive tone. Secondary to the
   username by size and weight. */
.launch-community-moderators .cm-badge {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  padding: 1px var(--sp-3); color: var(--muted); background: var(--surface2);
  white-space: nowrap; margin-left: var(--sp-4); vertical-align: 1px;
}
.launch-community-moderators .cm-badge--top {
  color: var(--moss); border-color: var(--moss);
  background: color-mix(in srgb, var(--moss) 9%, var(--surface));
}
.launch-community-moderators .cm-badge--legacy { color: var(--muted); }

/* Protected-role / no-powers notes: quiet mono statements of the real
   constraints ("Top Mod" where only an admin may act; "No active powers"). */
.launch-community-moderators .cm-muted-note {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  white-space: nowrap;
}

/* ---- Role actions ----------------------------------------------------------- */

/* Per-row action run: separate promote / remove forms exactly as rendered —
   never combined. */
.launch-community-moderators .cm-row-actions {
  display: flex; align-items: center; gap: var(--sp-3); flex: none;
}
.launch-community-moderators .cm-form-inline { display: inline-flex; margin: 0; }
.launch-community-moderators .cm-btn-sm {
  cursor: pointer; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--slate); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-6); white-space: nowrap;
}
.launch-community-moderators .cm-btn-sm:hover {
  background: var(--surface2); color: var(--ink);
}
/* Promotion: moss, the affirmative stewardship action. */
.launch-community-moderators .cm-btn-sm--promote { color: var(--moss); }
.launch-community-moderators .cm-btn-sm--promote:hover {
  border-color: var(--moss); color: var(--moss); background: var(--surface);
}
/* Removal / demotion: quiet clay-family outline, no loud destructive block. */
.launch-community-moderators .cm-btn-sm--danger { color: var(--danger); }
.launch-community-moderators .cm-btn-sm--danger:hover {
  border-color: var(--danger); color: var(--danger); background: var(--surface);
}

/* ---- Add moderator ---------------------------------------------------------- */

/* Compact one-line lookup: username field + moss primary submit. The exact
   legacy form (action, method, CSRF, `username` field, required) unchanged. */
.launch-community-moderators .cm-inline-form {
  display: flex; align-items: center; gap: var(--sp-4); max-width: 420px;
}
.launch-community-moderators .cm-input {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-5);
}
.launch-community-moderators .cm-input::placeholder { color: var(--muted); }
.launch-community-moderators .cm-input:focus {
  outline: none; border-color: var(--slate);
}
.launch-community-moderators .cm-btn {
  cursor: pointer; flex: none;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); white-space: nowrap;
}
.launch-community-moderators .cm-btn:hover {
  filter: brightness(1.06);
}

/* Empty states: a mono sentence, not a poster. */
.launch-community-moderators .cm-empty {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  padding: var(--sp-6) 0;
}

/* ---- Shared confirm modal --------------------------------------------------- */

/* The shared script composes it from legacy utility class names; the stable
   .fixed.inset-0 pair and the #cancel-btn / #confirm-btn ids are the hooks. */
.launch-community-moderators .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-community-moderators .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-community-moderators .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-community-moderators .fixed.inset-0 h3 {
  font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3);
}
.launch-community-moderators .fixed.inset-0 p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7);
}
.launch-community-moderators .fixed.inset-0 .flex {
  display: flex; justify-content: flex-end; gap: var(--sp-4);
}
.launch-community-moderators #cancel-btn,
.launch-community-moderators #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-community-moderators #confirm-btn {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-community-moderators > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-community-moderators #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-community-moderators #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-community-moderators #analytics-consent [data-analytics-accept],
.launch-community-moderators #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-community-moderators #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-community-moderators #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — report submission form only
   Scoped beneath body.launch-report-form: GET /c/:slug/report
   (Pages.report_form_page), the member-facing report submission form.
   Exists only because the real reporting surface cannot emit the reference
   markup exactly:
   - the create-* form fragment (hidden target_type/target_id inputs, the
     required reason <select> with its five real backend values, the optional
     details textarea with its advisory maxlength, and the .ph-mask target
     excerpt) is treated as pinned, so the legacy markup is spliced verbatim
     and skinned here onto the approved community-shell anatomy (page head
     band over a single quiet form column — filing a concise civic report,
     not opening a support ticket);
   - no report categories, severity, attachments or workflow states are
     invented: every control styled here already exists in the renderer;
   - the sidebar carries no permanent Report entry — reporting is a
     contextual action, so no navitem is active on this route;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - for a private community the renderer keeps its inner ph-no-capture
     guard div inside <main>; display:contents keeps it out of the flex
     chain so both privacy shapes share one layout;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-report-form .launch-user { position: relative; }
.launch-report-form .launch-user > summary { list-style: none; }
.launch-report-form .launch-user > summary::-webkit-details-marker { display: none; }
.launch-report-form .launch-user .avatar { background: var(--moss); }
.launch-report-form .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-report-form .launch-user__menu a,
.launch-report-form .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-report-form .launch-user__menu a:hover,
.launch-report-form .launch-user__menu button:hover { background: var(--surface2); }
.launch-report-form .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-report-form #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-report-form .launch-rail__img,
.launch-report-form .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ------------------------------------------------------ */

.launch-report-form .launch-side-id { min-width: 0; display: block; }
.launch-report-form .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Form anatomy ----------------------------------------------------------- */

/* Private communities keep the renderer's inner replay guard; keep it out of
   the flex chain so both privacy shapes share one layout. */
.launch-report-form .main > .ph-no-capture { display: contents; }

/* create-wrap fills <main> as a column: fixed head band over the scrolling
   form; create-panel is a legacy grouping div with no launch-side geometry. */
.launch-report-form .create-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-report-form .create-panel { display: contents; }

/* Page head band (reference .page__head--tight geometry): serif title over
   the renderer's real context sentence, its /c/:slug accent in mono moss. */
.launch-report-form .create-head {
  flex: none; padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-report-form .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink);
}
.launch-report-form .create-sub {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-1);
  line-height: var(--lh-prose);
}
.launch-report-form .create-sub .accent {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--moss);
}

/* The form is the scroller: one restrained left-aligned column under the
   band, capped at a reading measure — a civic filing, not a dashboard. */
.launch-report-form .create-form {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-10) 28px 70px;
}
.launch-report-form .create-form > * { max-width: 620px; }

.launch-report-form .create-field { margin-bottom: var(--sp-8); }
.launch-report-form .create-label {
  display: block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.launch-report-form .create-label .req { color: var(--clay); }
.launch-report-form .create-label .create-label-opt,
.launch-report-form .create-label-opt {
  font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--muted);
}

/* Target preview: the reported content reads primary — the renderer's real
   trimmed excerpt behind a thin slate rule, masked from replay (.ph-mask is
   the analytics contract; here it doubles as the excerpt hook because the
   char-count hint is the only other create-hint on the page). */
.launch-report-form .create-form .create-hint.ph-mask {
  font-family: var(--serif); font-size: var(--fs-14); color: var(--ink);
  line-height: var(--lh-prose); background: var(--surface2);
  border-left: 2px solid var(--slate); border-radius: 0 var(--r-1) var(--r-1) 0;
  padding: var(--sp-4) var(--sp-6); overflow-wrap: anywhere;
}

/* Inset controls: hairline frame, tight radii, quiet slate focus. */
.launch-report-form .create-select,
.launch-report-form .create-textarea {
  width: 100%; font-family: var(--sans); font-size: var(--fs-13);
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
}
.launch-report-form .create-textarea { resize: vertical; }
.launch-report-form .create-textarea::placeholder { color: var(--muted); }
.launch-report-form .create-select:focus,
.launch-report-form .create-textarea:focus {
  outline: none; border-color: var(--slate);
}

/* Field hints (the 1000-character note): quiet mono metadata. */
.launch-report-form .create-form .create-hint {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-2);
}

/* Actions: moss submit (a constructive civic filing, not a destructive act)
   beside the quiet mono cancel back to the reported content. The legacy
   --block modifier loses its full-width meaning inside this measured column. */
.launch-report-form .create-actions {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}
.launch-report-form .create-btn {
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-12-5); color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-8); text-decoration: none;
}
.launch-report-form .create-btn:hover {
  background: color-mix(in srgb, var(--moss) 88%, #000);
}
.launch-report-form .create-btn.create-btn--secondary {
  color: var(--slate); background: var(--surface);
  border-color: var(--line2); font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-11-5);
}
.launch-report-form .create-btn.create-btn--secondary:hover {
  background: var(--surface2); color: var(--ink);
}
.launch-report-form .create-btn--block { width: auto; }

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-report-form > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-report-form #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-report-form #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-report-form #analytics-consent [data-analytics-accept],
.launch-report-form #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-report-form #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-report-form #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — flat community home only
   Scoped beneath body.launch-flat-community: the flat (sections_enabled =
   false) branch of GET /c/:slug (Pages.community_page). The structured
   branch keeps its own earlier section; nothing here may leak outside this
   root. Exists only because the real single-feed page cannot emit the
   reference markup exactly:
   - the feed rows are the untouched shared Components.render_post markup
     (also used by the legacy / and /all feeds, which must not change), so
     their legacy utility classes are inert here and the whole row anatomy —
     vote column, meta line, title, preview, footer — is re-provided by
     these rules and skinned onto the launch thread-ledger language;
   - the vote buttons keep the legacy text-orange-500 / text-[#69C3D2] state
     classes the optimistic-vote script toggles; they map to the clay and
     slate accents exactly as on the other converted vote surfaces;
   - the Rule A/B/C moderation dialogs and ban dialogs are legacy <dialog>
     markup (Tailwind classes inert); they are kept readable and usable;
   - the connected-projects fragment (ccp-*) is byte-pinned by its fragment
     suites, so it is spliced verbatim and skinned in place (single-column:
     it sits in the narrow side stack on this route);
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome -------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-flat-community .launch-user { position: relative; }
.launch-flat-community .launch-user > summary { list-style: none; }
.launch-flat-community .launch-user > summary::-webkit-details-marker { display: none; }
.launch-flat-community .launch-user .avatar { background: var(--moss); }
.launch-flat-community .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-flat-community .launch-user__menu a,
.launch-flat-community .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-flat-community .launch-user__menu a:hover,
.launch-flat-community .launch-user__menu button:hover { background: var(--surface2); }
.launch-flat-community .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-flat-community #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head, crest). */
.launch-flat-community .launch-rail__img,
.launch-flat-community .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ----------------------------------------------------- */

.launch-flat-community .launch-side-id { min-width: 0; display: block; }

/* Factual visibility marker (private communities only; public is unmarked). */
.launch-flat-community .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Header band ----------------------------------------------------------- */

/* Optional banner (real stored image only; no gradient placeholder). */
.launch-flat-community .launch-banner {
  border-bottom: var(--bw) solid var(--line2); background: var(--surface2);
}
.launch-flat-community .launch-banner-img {
  display: block; width: 100%; max-height: 180px; object-fit: cover;
}

/* Identity column mirrors the reference's inline flex:1;min-width:0. */
.launch-flat-community .launch-chead-id { flex: 1; min-width: 0; }

/* The action column holds real forms (join/leave); each form is one row and
   its submit control fills it like the reference's static buttons. */
.launch-flat-community .chead__actions form { display: flex; margin: 0; }
.launch-flat-community .chead__actions form .btn { flex: 1; }

/* Leave = the reference's Joined affordance: quiet until hover warns. */
.launch-flat-community .launch-leave:hover {
  border-color: var(--danger); color: var(--danger); background: var(--surface);
}

/* ---- Feed column ------------------------------------------------------------ */

.launch-flat-community .launch-flat-body { padding-top: 20px; }
.launch-flat-community .launch-flat-sortbar { margin-top: 0; padding-bottom: 12px; }
.launch-flat-community .launch-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-7);
}

/* The ledger: flat rows over hairlines, no cards. Rows are the untouched
   legacy render_post markup — every rule below re-provides its layout. */
.launch-flat-community .launch-flat-ledger {
  border-top: var(--bw) solid var(--line);
}
.launch-flat-community .launch-flat-ledger > .cursor-pointer {
  display: flex; gap: var(--sp-7); padding: 13px var(--sp-3);
  border-bottom: var(--bw) solid var(--line); cursor: pointer;
}
.launch-flat-community .launch-flat-ledger > .cursor-pointer:hover { background: var(--surface2); }

/* Mono empty state (legacy markup, its utility classes inert). */
.launch-flat-community .launch-flat-ledger > .border-dashed {
  border: var(--bw) dashed var(--line2); border-radius: var(--r-2);
  margin-top: var(--sp-7); padding: 36px var(--sp-10); text-align: center;
  font-family: var(--mono); font-size: var(--fs-12-5); color: var(--muted);
  cursor: default;
}

/* Vote column: ▲ muted / ▼ line2 (deliberately asymmetric), mono score. */
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child {
  flex: none; width: 30px; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-1); padding-top: 2px; cursor: default;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child form {
  margin: 0; padding: 0; display: flex;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child button,
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child > a {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-12); line-height: 1; color: var(--line2);
  text-decoration: none;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child form:first-child button,
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child > a:first-child {
  color: var(--muted);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child button:hover,
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child > a:hover {
  color: var(--ink);
}
/* Optimistic-vote state classes toggled by the shared script. Full-chain
   selectors so they outweigh the muted/line2 column defaults above. */
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child form button.text-orange-500 { color: var(--clay); }
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child form button.text-\[\#69C3D2\] { color: var(--slate); }
.launch-flat-community .launch-flat-ledger .cursor-pointer > div:first-child > span {
  font-family: var(--mono); font-size: var(--fs-12); font-weight: 700;
  color: var(--ink);
}

/* Main column of a row. */
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 { flex: 1; min-width: 0; }

/* Meta line: mono facts; the community self-link a shade heavier. */
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child a {
  color: var(--muted); text-decoration: none;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child a:first-child {
  font-weight: 600; color: var(--ink);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child a:hover {
  color: var(--ink); text-decoration: underline;
}
.launch-flat-community .launch-flat-ledger .text-gray-300 { color: var(--line2); }
.launch-flat-community .launch-flat-ledger .mod-badge {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--moss);
  border: var(--bw) solid currentColor; border-radius: var(--r-1); padding: 0 3px;
}
.launch-flat-community .launch-flat-ledger .text-gray-400.italic { font-style: italic; }

/* Moderation controls in the meta line: mono outline chips. Amber (mod) maps
   to ochre, red (admin) to danger, both text-and-border only. Child-of-span
   selectors so the buttons INSIDE the sibling <dialog>s are never caught. */
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > button,
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > form > button {
  cursor: pointer; background: var(--surface); color: var(--muted);
  border: var(--bw) solid var(--line2); border-radius: var(--r-1);
  font-family: var(--mono); font-size: var(--fs-10); line-height: 1.7;
  padding: 0 5px;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > button:hover,
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > form > button:hover {
  color: var(--ink); border-color: var(--muted);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > button.text-amber-700 {
  color: var(--ochre); border-color: currentColor; background: none;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > button.text-red-700 {
  color: var(--danger); border-color: currentColor; background: none;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:first-child span > span.text-red-500 {
  font-family: var(--mono); font-size: var(--fs-10); color: var(--danger);
}
.launch-flat-community .launch-flat-ledger dialog .text-red-500 { color: var(--danger); }
.launch-flat-community .launch-flat-ledger .cursor-pointer form.inline { display: inline-flex; margin: 0; }

/* Title, link chip, image, preview. (Title scoped as a direct child so the
   <h3> inside the moderation dialogs keeps its own dialog rules.) */
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > h3 {
  margin-top: 2px; font-size: var(--fs-15-5); font-weight: 600;
  line-height: var(--lh-title);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > h3 a {
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > h3 a:hover { color: var(--moss); }
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > .z-10 a {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--slate);
  text-decoration: none; overflow-wrap: anywhere;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > .z-10 a:hover { text-decoration: underline; }
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > a > img {
  display: block; max-width: 100%; max-height: 320px; object-fit: contain;
  background: var(--surface3); border: var(--bw) solid var(--line);
  border-radius: var(--r-2); margin-top: var(--sp-4);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer p.ph-mask {
  margin-top: var(--sp-2); font-size: var(--fs-13); line-height: var(--lh-ui);
  color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Row footer: comments link + Share, mono, gap 14. */
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:last-child {
  display: flex; align-items: center; gap: 14px; margin-top: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:last-child a {
  color: var(--muted); text-decoration: none; display: inline-flex;
  align-items: center; gap: 4px;
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:last-child a:hover { color: var(--ink); }
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:last-child button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}
.launch-flat-community .launch-flat-ledger .cursor-pointer > .flex-1 > div:last-child button:hover { color: var(--ink); }
.launch-flat-community .launch-flat-ledger .text-emerald-600 { color: var(--moss); }

/* ---- Side panels ------------------------------------------------------------ */

/* Moderators (usernames only — the page holds no per-mod roles). */
.launch-flat-community .launch-mods { padding: var(--sp-4) 14px; }
.launch-flat-community .launch-modrow {
  display: flex; align-items: center; gap: 9px; padding: var(--sp-2) 0;
  font-size: var(--fs-13); color: var(--ink); text-decoration: none;
}
.launch-flat-community .launch-modrow:hover .launch-mod-name { text-decoration: underline; }
.launch-flat-community .launch-manage-mods {
  padding: var(--sp-4) 14px var(--sp-6);
  border-top: var(--bw) solid var(--line);
}
.launch-flat-community .launch-manage-mods a { font-size: var(--fs-11); }

/* Rules panel body. */
.launch-flat-community .launch-rules {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Mod tools: factual state line + the real toggle form. */
.launch-flat-community .launch-modtool-state {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin: 0 0 var(--sp-5);
}
.launch-flat-community .panel__body form { margin: 0; }

/* ---- Connected projects (pinned ccp-* fragment, skinned in place) ---------- */

/* The fragment's own <section> becomes the panel frame; in this route's
   narrow side stack the grid collapses to one column. */
.launch-flat-community .ccp-section {
  border: var(--bw) solid var(--line); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden;
}
.launch-flat-community .ccp-title {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--muted);
  margin: 0; padding: var(--sp-6) var(--sp-8) 2px;
}
.launch-flat-community .ccp-sub {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin: 0; padding: 0 var(--sp-8) var(--sp-6);
  border-bottom: var(--bw) solid var(--line);
}
.launch-flat-community .ccp-projects {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--bw);
  background: var(--line);
}
.launch-flat-community .ccp-project {
  background: var(--surface); padding: 11px var(--sp-7); min-width: 0;
}
.launch-flat-community .ccp-identity p { margin: 0; }
.launch-flat-community .ccp-name {
  margin: 0; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-13-5); color: var(--ink);
}
.launch-flat-community .ccp-kind {
  font-size: var(--fs-11); color: var(--muted); margin-top: var(--sp-1);
}
.launch-flat-community .ccp-namespace,
.launch-flat-community .ccp-verification,
.launch-flat-community .ccp-connected {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
  margin-top: var(--sp-1);
}
.launch-flat-community .ccp-website {
  font-size: var(--fs-11); margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-flat-community .ccp-website-link { color: var(--slate); }
.launch-flat-community .ccp-repos { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.launch-flat-community .ccp-repo {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-flat-community .ccp-repo-link { color: var(--slate); }
.launch-flat-community .ccp-repo-name { color: var(--muted); }
.launch-flat-community .ccp-marker {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--muted);
  border: var(--bw) solid var(--line2); border-radius: var(--r-6); padding: 0 5px;
}
.launch-flat-community .ccp-primary { color: var(--moss); border-color: var(--moss); }

/* ---- Moderation dialogs + shared confirm modal ------------------------------- */

/* Legacy moderation <dialog>s (Tailwind classes inert here): keep them
   readable and usable; mod/admin-only surface. */
.launch-flat-community dialog {
  border: var(--bw) solid var(--line2); border-radius: var(--r-4);
  padding: var(--sp-9); max-width: 28rem; width: calc(100% - 2rem);
  background: var(--surface); color: var(--ink); cursor: default;
}
.launch-flat-community dialog::backdrop { background: rgba(31, 36, 33, .45); }
.launch-flat-community dialog h3 { font-size: var(--fs-15); font-weight: 700; }
.launch-flat-community dialog p { font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-1); }
.launch-flat-community dialog form {
  display: flex; flex-direction: column; gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.launch-flat-community dialog label { display: flex; flex-direction: column; gap: var(--sp-2); }
.launch-flat-community dialog label span { font-size: var(--fs-12-5); font-weight: 600; }
.launch-flat-community dialog textarea {
  width: 100%; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-13); min-height: 70px;
}
.launch-flat-community dialog form > div.flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-flat-community dialog button {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
  font-family: var(--sans); line-height: normal;
}
.launch-flat-community dialog button[type='submit'] {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* Shared confirm modal (own-post delete): the script composes it from legacy
   utility class names; the stable .fixed.inset-0 pair and the #cancel-btn /
   #confirm-btn ids are the hooks. */
.launch-flat-community .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-flat-community .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-flat-community .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-flat-community .fixed.inset-0 h3 { font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3); }
.launch-flat-community .fixed.inset-0 p { font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7); }
.launch-flat-community .fixed.inset-0 .flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-flat-community #cancel-btn,
.launch-flat-community #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-flat-community #confirm-btn { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---- Gate + consent -------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-flat-community > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-flat-community #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-flat-community #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-flat-community #analytics-consent [data-analytics-accept],
.launch-flat-community #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-flat-community #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-flat-community #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — post creation only
   Scoped beneath body.launch-post-creation: the three states of GET
   /new-post (Pages.new_post_form, Pages.choose_community_page,
   Pages.join_to_post_page) — the global composer. Exists only because the
   real creation surface cannot emit the reference markup exactly:
   - the create-* fragments (the /posts multipart form with its hidden
     community_id, the required section <select> for structured communities,
     the title/url/image/content fields, the chooser's community list and
     the members-only join gate with its real POST /join form) are treated
     as pinned, so the legacy markup is spliced verbatim inside the
     .create-shell marker and skinned here onto the approved anatomy: page
     head band over one restrained form column — drafting a durable
     community contribution, not posting to a social network;
   - no drafts, previews, tags, attachments-beyond-image, post types or
     sections are invented: every control styled here already exists in the
     renderer, and flat communities simply render no section field;
   - validation failures answer via the legacy shared msg_page (out of
     scope), so this section carries no error-notice skin of its own;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-post-creation .launch-user { position: relative; }
.launch-post-creation .launch-user > summary { list-style: none; }
.launch-post-creation .launch-user > summary::-webkit-details-marker { display: none; }
.launch-post-creation .launch-user .avatar { background: var(--moss); }
.launch-post-creation .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-post-creation .launch-user__menu a,
.launch-post-creation .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-post-creation .launch-user__menu a:hover,
.launch-post-creation .launch-user__menu button:hover { background: var(--surface2); }
.launch-post-creation .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-post-creation #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed rail tile. */
.launch-post-creation .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Composer anatomy ------------------------------------------------------- */

/* create-shell fills <main> as a column: fixed head band over the scrolling
   state below; create-wrap/create-panel are legacy grouping divs with no
   launch-side geometry of their own. */
.launch-post-creation .create-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-post-creation .create-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-post-creation .create-panel { display: contents; }

/* Page head band: serif title over the renderer's real subtitle; the
   destination path (/c/:slug accent in the title) reads as mono moss. */
.launch-post-creation .create-head {
  flex: none; padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-post-creation .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink);
}
.launch-post-creation .create-title .accent {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-16);
  color: var(--moss);
}
.launch-post-creation .create-sub {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-1);
  line-height: var(--lh-prose);
}

/* ---- The creation form (member + community state) --------------------------- */

/* The form is the scroller: one restrained left-aligned column under the
   band, capped at a reading measure. Direct child of the panel only — the
   join gate's inner form must keep its card flow. */
.launch-post-creation .create-panel > .create-form {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-10) 28px 70px;
}
.launch-post-creation .create-panel > .create-form > * { max-width: 620px; }

.launch-post-creation .create-field { margin-bottom: var(--sp-8); }
.launch-post-creation .create-label {
  display: block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.launch-post-creation .create-label .req { color: var(--clay); }
.launch-post-creation .create-label .create-label-opt,
.launch-post-creation .create-label-opt {
  font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--muted);
}

/* Inset controls: hairline frame, tight radii, quiet slate focus. */
.launch-post-creation .create-input,
.launch-post-creation .create-select,
.launch-post-creation .create-textarea {
  width: 100%; font-family: var(--sans); font-size: var(--fs-13);
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
}
.launch-post-creation .create-textarea { resize: vertical; }
.launch-post-creation .create-input::placeholder,
.launch-post-creation .create-textarea::placeholder { color: var(--muted); }
.launch-post-creation .create-input:focus,
.launch-post-creation .create-select:focus,
.launch-post-creation .create-textarea:focus {
  outline: none; border-color: var(--slate);
}

/* Image input: the native picker restyled as a quiet mono control. */
.launch-post-creation .create-file {
  width: 100%; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
}
.launch-post-creation .create-file::file-selector-button {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-11-5);
  color: var(--muted); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-5); margin-right: var(--sp-5); cursor: pointer;
}

/* Field hints (WebP conversion note): quiet mono metadata. */
.launch-post-creation .create-hint {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-2);
}

/* Actions: moss submit — a constructive, durable contribution. The legacy
   --block modifier loses its full-width meaning inside this measured column. */
.launch-post-creation .create-actions {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}
.launch-post-creation .create-btn {
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-12-5); color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-8); text-decoration: none;
}
.launch-post-creation .create-btn:hover {
  background: color-mix(in srgb, var(--moss) 88%, #000);
}
.launch-post-creation .create-btn--block { width: auto; }

/* ---- The community chooser (no ?community state) ---------------------------- */

/* The list is the scroller: hairline ledger rows, not cards. Each row is the
   renderer's real link into /new-post?community=:slug. */
.launch-post-creation .create-list {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-6) 28px var(--sp-10);
}
.launch-post-creation .create-comm {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); max-width: 620px;
  padding: var(--sp-6) var(--sp-2); border-bottom: var(--bw) solid var(--line);
}
.launch-post-creation .create-comm:hover { background: var(--surface2); }
.launch-post-creation .create-comm-name {
  display: block; font-weight: 600; font-size: var(--fs-13-5);
  color: var(--ink); line-height: var(--lh-title);
}
.launch-post-creation .create-comm-slug {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-top: var(--sp-1);
}
.launch-post-creation .create-comm-go {
  flex: none; font-family: var(--mono); font-size: var(--fs-11-5);
  color: var(--slate); white-space: nowrap;
}
.launch-post-creation .create-comm:hover .create-comm-go { color: var(--ink); }

/* Chooser footer: fixed quiet strip under the list (the /bring fallback). */
.launch-post-creation .create-panel > .create-foot {
  flex: none; padding: var(--sp-6) 28px; background: var(--surface);
  border-top: var(--bw) solid var(--line2);
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--muted);
}
.launch-post-creation .create-link { color: var(--slate); }
.launch-post-creation .create-link:hover { color: var(--ink); }

/* ---- The members-only join gate (non-member state) -------------------------- */

/* Narrow wrap centres one flat bordered card; the gate's inner form and
   footer keep their card flow (the scroller rules above are direct-child
   scoped away from here). */
.launch-post-creation .create-wrap--narrow {
  align-items: center; justify-content: center; padding: var(--sp-12);
}
.launch-post-creation .create-gate {
  width: 100%; max-width: 400px; text-align: center;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-13) var(--sp-12);
}
.launch-post-creation .create-gate-icon {
  width: 40px; height: 40px; margin: 0 auto var(--sp-7);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
}
.launch-post-creation .create-gate-icon svg { width: 18px; height: 18px; }
.launch-post-creation .create-gate-text {
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-prose);
  margin-top: var(--sp-3);
}
.launch-post-creation .create-gate-name {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--moss);
}
.launch-post-creation .create-gate .create-form { margin-top: var(--sp-9); }
.launch-post-creation .create-gate .create-btn--block {
  display: block; width: 100%; text-align: center;
}
.launch-post-creation .create-gate .create-foot {
  margin-top: var(--sp-7); font-family: var(--mono); font-size: var(--fs-11);
}

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-post-creation > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-post-creation #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-post-creation #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-post-creation #analytics-consent [data-analytics-accept],
.launch-post-creation #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-post-creation #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-post-creation #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — start thread from chat only
   Scoped beneath body.launch-start-thread: GET/POST
   /c/:slug/ch/:channel_slug/messages/:message_id/start-thread
   (Pages.start_thread_form), the contextual form that crystallizes a live
   conversation into a durable thread. Exists only because the real promotion
   surface cannot emit the reference markup exactly:
   - the create-* form fragment (the hidden seed input, the msg_<id>
     candidate checkboxes in their chronological order, the required
     title with its 300 maxlength, the optional introduction textarea, the
     required section <select> for structured communities and the Dream CSRF
     tag) is treated as pinned, so the legacy markup is spliced verbatim
     inside the .create-shell marker and skinned here onto the approved
     community-shell anatomy: mono context crumb + page head band over one
     restrained form column — preserving a useful live conversation as
     durable knowledge, not copying chat into a generic posting form;
   - no summaries, generated titles, drag selection, previews or extra
     workflow steps are invented: every control styled here already exists
     in the renderer, and the only script is the renderer's pre-existing
     page-scoped selection counter;
   - the candidate ledger keeps its flat rows: seed row locked (clay
     provenance tag), author/time metadata in mono, moss checkboxes;
   - renderer-owned validation states re-render this same document; the
     .st-error notice reads ochre (pending/attention), never a red banner;
   - the sidebar carries no permanent Start-thread entry — promotion is a
     contextual action, so no navitem is active on this route;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class; honoured on the badge element only — no global
     .hidden utility is defined;
   - for a private community the launch shell marks .shell ph-no-capture
     (the legacy wrapper had no inner guard on this route, so none exists
     inside <main>);
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-start-thread .launch-user { position: relative; }
.launch-start-thread .launch-user > summary { list-style: none; }
.launch-start-thread .launch-user > summary::-webkit-details-marker { display: none; }
.launch-start-thread .launch-user .avatar { background: var(--moss); }
.launch-start-thread .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-start-thread .launch-user__menu a,
.launch-start-thread .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-start-thread .launch-user__menu a:hover,
.launch-start-thread .launch-user__menu button:hover { background: var(--surface2); }
.launch-start-thread .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-start-thread #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed tile (rail, sidebar head). */
.launch-start-thread .launch-rail__img,
.launch-start-thread .launch-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Community sidebar ------------------------------------------------------ */

.launch-start-thread .launch-side-id { min-width: 0; display: block; }
.launch-start-thread .launch-side-vis {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--ochre);
  padding: var(--sp-2) 9px var(--sp-1);
}

/* ---- Form anatomy ----------------------------------------------------------- */

/* Mono context crumb (Cartographic chrome outside the pinned fragment):
   community / #channel / start thread. */
.launch-start-thread .launch-st-context {
  flex: none; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); padding: var(--sp-4) 28px 0;
}
.launch-start-thread .launch-st-context a { color: var(--slate); text-decoration: none; }
.launch-start-thread .launch-st-context a:hover { color: var(--ink); }
.launch-start-thread .launch-st-context b { font-weight: 600; color: var(--ink); }
.launch-start-thread .launch-st-context__sep { color: var(--line2); }

/* create-shell/create-wrap fill <main> as a column: crumb + fixed head band
   over the scrolling form; create-panel is a legacy grouping div with no
   launch-side geometry of its own. */
.launch-start-thread .create-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-start-thread .create-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-start-thread .create-panel { display: contents; }

/* Page head band: serif title over the renderer's real subtitle; the
   #channel accent in the title reads as mono moss (live sigil). */
.launch-start-thread .create-head {
  flex: none; padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-start-thread .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink);
}
.launch-start-thread .create-title .accent {
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-16);
  color: var(--moss);
}
.launch-start-thread .create-sub {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-1);
  line-height: var(--lh-prose);
}

/* Renderer-owned validation notice: ochre attention, thin rule, no banner
   theatrics. Sits between the head band and the form. */
.launch-start-thread .st-error {
  flex: none; font-family: var(--mono); font-size: var(--fs-12);
  color: var(--ochre); background: var(--surface2);
  border-left: 2px solid var(--ochre);
  padding: var(--sp-4) 28px; margin: 0;
}

/* The form is the scroller: one restrained left-aligned column under the
   band, capped at a reading measure. */
.launch-start-thread .create-form {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-8) 28px 70px;
}
.launch-start-thread .create-form > * { max-width: 680px; }

.launch-start-thread .create-field { margin-bottom: var(--sp-8); }
.launch-start-thread .create-label {
  display: block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.launch-start-thread .create-label .req { color: var(--clay); }
.launch-start-thread .create-label .create-label-opt,
.launch-start-thread .create-label-opt {
  font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--muted);
}

/* Field hints (selection guidance, introduction note): quiet mono metadata. */
.launch-start-thread .create-hint {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-2); margin-bottom: var(--sp-3);
}

/* ---- Candidate-message ledger ------------------------------------------------ */

/* Flat hairline ledger, not chat bubbles: each row is the renderer's real
   <label> so the whole row toggles its checkbox. */
.launch-start-thread .st-msglist {
  display: flex; flex-direction: column;
  max-height: 340px; overflow-y: auto; scrollbar-width: thin;
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface);
}
.launch-start-thread .st-msg {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  padding: var(--sp-4) var(--sp-6); cursor: pointer;
  border-bottom: var(--bw) solid var(--line);
}
.launch-start-thread .st-msg:last-child { border-bottom: 0; }
.launch-start-thread .st-msg:hover { background: var(--surface2); }
.launch-start-thread .st-msg--seed { background: var(--surface2); cursor: default; }
.launch-start-thread .st-check {
  margin-top: 2px; flex: none; accent-color: var(--moss);
  width: 13px; height: 13px;
}
.launch-start-thread .st-msg-body {
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
}
.launch-start-thread .st-msg-meta { display: flex; align-items: center; gap: var(--sp-4); }
.launch-start-thread .st-msg-author {
  font-family: var(--mono); font-size: var(--fs-11-5); font-weight: 600;
  color: var(--ink);
}
.launch-start-thread .st-msg-time {
  font-family: var(--mono); font-size: var(--fs-10-5); color: var(--muted);
}
.launch-start-thread .st-seed-tag {
  font-family: var(--mono); font-size: var(--fs-10); text-transform: uppercase;
  letter-spacing: var(--ls-kicker); color: var(--clay);
  border: var(--bw) solid var(--clay); border-radius: var(--r-1);
  padding: 0 var(--sp-2);
}
.launch-start-thread .st-msg-text {
  font-size: var(--fs-13); color: var(--ink); line-height: var(--lh-prose);
  overflow-wrap: anywhere;
}

/* ---- Inset controls ----------------------------------------------------------- */

.launch-start-thread .create-input,
.launch-start-thread .create-select,
.launch-start-thread .create-textarea {
  width: 100%; font-family: var(--sans); font-size: var(--fs-13);
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
}
.launch-start-thread .create-textarea { resize: vertical; }
.launch-start-thread .create-input::placeholder,
.launch-start-thread .create-textarea::placeholder { color: var(--muted); }
.launch-start-thread .create-input:focus,
.launch-start-thread .create-select:focus,
.launch-start-thread .create-textarea:focus {
  outline: none; border-color: var(--slate);
}

/* Actions: moss submit (preserving knowledge is constructive) beside the
   quiet mono cancel back to the live channel. The legacy --block modifier
   loses its full-width meaning inside this measured column. */
.launch-start-thread .create-actions {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}
.launch-start-thread .create-btn {
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-12-5); color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-8); text-decoration: none;
}
.launch-start-thread .create-btn:hover {
  background: color-mix(in srgb, var(--moss) 88%, #000);
}
.launch-start-thread .create-btn--block { width: auto; }
.launch-start-thread .st-cancel {
  font-family: var(--mono); font-size: var(--fs-11-5); color: var(--slate);
  text-decoration: none;
}
.launch-start-thread .st-cancel:hover { color: var(--ink); }

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-start-thread > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-start-thread #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-start-thread #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-start-thread #analytics-consent [data-analytics-accept],
.launch-start-thread #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-start-thread #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-start-thread #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — password recovery only
   Scoped beneath body.launch-forgot-password / body.launch-reset-password.
   Both routes also carry the shared .launch-auth root, so the existing
   /login-/signup chrome rules (command-field link cells, consent banner
   overlay) apply unchanged and are NOT restated here. This section exists
   only because the two recovery forms keep their legacy inner markup
   verbatim — action/method, CSRF placement, names, ids, the hidden token
   field and the auth-form/auth-field/auth-input/auth-btn/auth-alert/
   auth-foot classes — so those legacy classes are skinned to the launch
   card idiom here instead of being renamed to the login/signup classes.
   Each rule mirrors an existing base rule (noted inline); no new visual
   vocabulary is introduced.
   ========================================================================== */

/* The preserved <form class='auth-form'> is itself the card (mirrors
   .auth__card: thin line, tight radius, paper surface, no shadow). */
body.launch-forgot-password .auth-form,
body.launch-reset-password .auth-form {
  margin-top: var(--sp-11); border: var(--bw) solid var(--line);
  border-radius: var(--r-4); background: var(--surface); padding: var(--sp-10);
}

/* Field rhythm and mono labels (mirror .field / .label). */
body.launch-forgot-password .auth-field,
body.launch-reset-password .auth-field { margin-bottom: var(--sp-8); }
body.launch-forgot-password .auth-label,
body.launch-reset-password .auth-label {
  display: block; font-family: var(--mono); font-size: var(--fs-11);
  color: var(--muted); margin-bottom: 5px;
}

/* Inset inputs (mirror .input + .input--inset, moss focus ring-by-border). */
body.launch-forgot-password .auth-input,
body.launch-reset-password .auth-input {
  width: 100%; font-family: var(--sans); font-size: var(--fs-14);
  color: var(--ink); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: 9px var(--sp-6); outline: none;
}
body.launch-forgot-password .auth-input:focus,
body.launch-reset-password .auth-input:focus { border-color: var(--moss); }
body.launch-forgot-password .auth-input::placeholder,
body.launch-reset-password .auth-input::placeholder {
  color: var(--muted); opacity: .8;
}

/* Moss primary action (mirrors .btn + .btn--primary + .btn--block, with the
   card's submit offset from the /login integration section). */
body.launch-forgot-password .auth-btn,
body.launch-reset-password .auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3); width: 100%; margin-top: var(--sp-8);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-13);
  border-radius: var(--r-2); border: var(--bw) solid var(--moss);
  padding: 9px var(--sp-9); cursor: pointer; white-space: nowrap;
  text-decoration: none; color: #fff; background: var(--moss);
}
body.launch-forgot-password .auth-btn:hover,
body.launch-reset-password .auth-btn:hover { filter: brightness(1.06); }

/* Renderer-owned validation alert above the reset form (mirrors
   .notice--rejected: flat, quiet, non-alarming; scoped to both roots even
   though only /reset-password renders it today). */
body.launch-forgot-password .auth-alert,
body.launch-reset-password .auth-alert {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: 13px var(--sp-8);
  font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-body);
  margin-top: var(--sp-7);
}

/* Quiet mono foot link back to /login (mirrors .auth__foot). */
body.launch-forgot-password .auth-foot,
body.launch-reset-password .auth-foot {
  text-align: center; margin-top: var(--sp-9);
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
}

/* ==========================================================================
   EARDE INTEGRATION — privacy policy only
   Scoped beneath body.launch-privacy (GET /privacy through
   launch_entry_page). The legal document keeps its legacy inner markup
   byte-for-byte — headings, paragraphs, lists, the /settings and
   /export-data links, and the Tailwind utility classes it has always
   carried. Those utility classes are inert without the CDN, so they serve
   here purely as scoping hooks (.max-w-2xl = the document column,
   .space-y-8 = the section stack), the same skin-the-legacy-markup idiom
   as the password-recovery section above. Each rule mirrors an existing
   base rule (noted inline); no new visual vocabulary is introduced.
   ========================================================================== */

/* Readable long-form measure inside the wrapper's .container--form column
   (mirrors the capped content columns; ~65ch at base body size). */
body.launch-privacy .max-w-2xl { max-width: 640px; margin: 0 auto; }

/* Serif document title (mirrors .page__title at the community/project
   title size). */
body.launch-privacy .max-w-2xl h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-27);
  line-height: var(--lh-tight); color: var(--ink);
  margin-bottom: var(--sp-4);
}

/* Existing plain-terms subtitle as the quiet mono context line under the
   title (mirrors .breadcrumb / mono meta). */
body.launch-privacy .max-w-2xl h1 + p {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-bottom: var(--sp-14);
}

/* Section rhythm (replaces the inert space-y-8 utility). */
body.launch-privacy .space-y-8 > section + section { margin-top: var(--sp-13); }

/* Section headings over a thin separator (mirrors .panel h2 / the fs-19
   section-title step; the legacy markup already drew a bottom border). */
body.launch-privacy .space-y-8 h2 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-19);
  color: var(--ink); padding-bottom: var(--sp-3);
  border-bottom: var(--bw) solid var(--line);
  margin-bottom: var(--sp-6);
}

/* Long-form body text (mirrors the prose line-height step). */
body.launch-privacy .space-y-8 p {
  font-size: var(--fs-14); line-height: var(--lh-prose); color: var(--ink);
}
body.launch-privacy .space-y-8 p + p { margin-top: var(--sp-6); }

/* Restore the semantic bullet lists the global reset strips (the legacy
   list-disc/list-inside utilities are inert). */
body.launch-privacy .space-y-8 ul {
  list-style: disc; padding-left: var(--sp-11);
  margin-top: var(--sp-5);
}
body.launch-privacy .space-y-8 li {
  font-size: var(--fs-13-5); line-height: var(--lh-body); color: var(--ink);
}
body.launch-privacy .space-y-8 li + li { margin-top: var(--sp-3); }

/* Inline document links: keep the system slate but underline for in-prose
   affordance (base `a` rule is unchanged elsewhere). */
body.launch-privacy .space-y-8 a {
  color: var(--slate); text-decoration: underline;
  text-underline-offset: 2px;
}

/* Analytics consent banner (markup shared with the legacy layout; mirrors
   the .launch-bring block byte-for-byte under this root). */
body.launch-privacy #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
body.launch-privacy #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
body.launch-privacy #analytics-consent [data-analytics-accept],
body.launch-privacy #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
body.launch-privacy #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
body.launch-privacy #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — shared message page only
   Scoped beneath body.launch-message-page (Pages.msg_page through
   launch_message_page). One neutral sheet for every handler-authored
   message document — success, info and error alike, across ~400 call
   sites in every status family, several under byte-identity
   anti-enumeration pins — so nothing here may key on status, route or
   resource. The sheet reuses the base .auth / .auth__head / .auth__card
   column (measured width, thin line, tight radius, paper surface, no
   shadow); only the message-specific pieces are skinned here. The glyph
   variants are the renderer's existing alert_type contract restated in
   launch tones: moss success, slate info, clay error — quiet accents,
   never a full-page treatment. No new visual vocabulary is introduced.
   ========================================================================== */

/* Brand mark above the sheet keeps its historical /feed recovery link. */
body.launch-message-page .launch-msg__brand {
  display: inline-block; line-height: 0; text-decoration: none;
}

/* Static generic context label (mirrors .section-head__kicker). */
body.launch-message-page .launch-msg__kicker {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin: var(--sp-6) 0 0;
}
body.launch-message-page .auth__title { margin-top: var(--sp-4); }

/* The card centres its short message column. */
body.launch-message-page .launch-msg__card {
  text-align: center; padding: var(--sp-11) var(--sp-10);
}

/* Alert glyph well (mirrors .notif__icon: bordered well, tight radius). */
body.launch-message-page .launch-msg__icon {
  width: 34px; height: 34px; margin: 0 auto;
  display: grid; place-items: center;
  border: var(--bw) solid var(--line2); border-radius: var(--r-3);
  background: var(--surface2); color: var(--muted);
}
body.launch-message-page .launch-msg__icon svg { width: 16px; height: 16px; }
body.launch-message-page .launch-msg__icon--success {
  color: var(--moss); border-color: var(--moss);
}
body.launch-message-page .launch-msg__icon--info { color: var(--slate); }
body.launch-message-page .launch-msg__icon--error { color: var(--clay); }

/* Caller-supplied message body; long tokens (slugs, addresses) must wrap. */
body.launch-message-page .launch-msg__text {
  font-size: var(--fs-13-5); line-height: var(--lh-prose); color: var(--ink);
  margin: var(--sp-7) 0 0; overflow-wrap: anywhere;
}

/* Thin rule between the message and its return-to-context action. */
body.launch-message-page .launch-msg__foot {
  margin-top: var(--sp-9); padding-top: var(--sp-8);
  border-top: var(--bw) solid var(--line);
}

/* The renderer's own Go back link (mirrors .btn: quiet secondary). */
body.launch-message-page .launch-msg__back {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-13);
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: 7px var(--sp-9); text-decoration: none; white-space: nowrap;
}
body.launch-message-page .launch-msg__back:hover { background: var(--surface2); }

/* Analytics consent banner (markup shared with the legacy layout, whose
   utility classes are inert without Tailwind — same overlay rules as the
   other launch scopes, re-scoped). */
body.launch-message-page #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
body.launch-message-page #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
body.launch-message-page #analytics-consent [data-analytics-accept],
body.launch-message-page #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
body.launch-message-page #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
body.launch-message-page #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — global admin dashboard only
   Scoped beneath body.launch-global-admin: GET /admin
   (Pages.admin_dashboard_page). Exists only because the real dashboard
   cannot emit the reference markup exactly:
   - the four operational panels (status ledger, recent users, pending
     signups, banned users) are the legacy admin-* fragments spliced
     verbatim — tables, badges, suspicious-signal flags and the unban POST
     form keep their markup and are re-skinned here as a flat civic
     registry: thin rules, no zebra, no cards beyond a hairline panel box;
   - the unban action is restorative, not destructive, so it takes the moss
     neutral treatment; clay/danger are reserved for the admin/banned
     status chips whose semantics are genuinely alarming;
   - the ph-no-capture class on each table is the replay-masking contract
     (emails, IPs, usernames) and doubles as no CSS hook at all — masking
     stays intact by leaving the markup alone;
   - the confirm-modal overlay is built by the shared behavior script from
     legacy utility class names; the stable .fixed.inset-0 pair and the
     #cancel-btn / #confirm-btn ids are the hooks (unban confirmation);
   - the desktop-only gate panel ships in mobile-gate.css; only the
     launch-scope "hide the app" rule for this route lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
body.launch-global-admin .launch-user { position: relative; }
body.launch-global-admin .launch-user > summary { list-style: none; }
body.launch-global-admin .launch-user > summary::-webkit-details-marker { display: none; }
body.launch-global-admin .launch-user .avatar { background: var(--moss); }
body.launch-global-admin .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
body.launch-global-admin .launch-user__menu a,
body.launch-global-admin .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
body.launch-global-admin .launch-user__menu a:hover,
body.launch-global-admin .launch-user__menu button:hover { background: var(--surface2); }
body.launch-global-admin .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
body.launch-global-admin #notif-badge.hidden { display: none; }

/* Real community avatars fill the fixed 42px rail tile. */
body.launch-global-admin .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Head band -------------------------------------------------------------- */

/* Serif title over a mono operational context line. */
body.launch-global-admin .launch-admin-ctx {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
}

/* ---- Panels ----------------------------------------------------------------- */

/* Registry sections: hairline box, tight radius, no shadow, no gradient. */
body.launch-global-admin .admin-wrap {
  display: flex; flex-direction: column; gap: var(--sp-9);
  padding-top: var(--sp-9);
}
body.launch-global-admin .admin-panel {
  background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-2); padding: var(--sp-8) var(--sp-9) var(--sp-9);
}
body.launch-global-admin .admin-panel-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-16);
  color: var(--ink); margin: 0 0 var(--sp-1);
}
body.launch-global-admin .admin-panel-desc {
  font-size: var(--fs-12-5); color: var(--muted); line-height: 1.5;
  margin: 0 0 var(--sp-7);
}
body.launch-global-admin .admin-empty {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
  padding: var(--sp-6) 0; text-align: center;
}

/* ---- Status ledger ---------------------------------------------------------- */

/* Count-free config ledger: hairline-separated rows, mono labels, outline
   value chips. Semantics: ok = moss, off/quiet = muted, warn = ochre,
   misconfigured = clay. */
body.launch-global-admin .admin-stats { display: flex; flex-direction: column; }
body.launch-global-admin .admin-stat {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); padding: var(--sp-4) 0;
  border-bottom: var(--bw) solid var(--line);
}
body.launch-global-admin .admin-stat:last-child { border-bottom: 0; }
body.launch-global-admin .admin-stat-label {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
}
body.launch-global-admin .admin-stat-val {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 1px var(--sp-4); border-radius: var(--r-2);
  border: var(--bw) solid var(--line2); color: var(--muted);
  background: var(--surface);
}
body.launch-global-admin .admin-stat-val--ok   { color: var(--moss);  border-color: var(--moss); }
body.launch-global-admin .admin-stat-val--off  { color: var(--muted); border-color: var(--line2); }
body.launch-global-admin .admin-stat-val--warn { color: var(--ochre); border-color: var(--ochre); }
body.launch-global-admin .admin-stat-val--bad  { color: var(--clay);  border-color: var(--clay); }

/* ---- Data tables ------------------------------------------------------------ */

body.launch-global-admin .admin-table-wrap { overflow-x: auto; }
body.launch-global-admin .admin-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-13);
}
body.launch-global-admin .admin-table thead th {
  font-family: var(--mono); font-size: var(--fs-10-5); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  text-align: left; padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--bw) solid var(--line2); white-space: nowrap;
}
body.launch-global-admin .admin-table tbody td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--bw) solid var(--line);
  color: var(--ink); vertical-align: middle;
}
body.launch-global-admin .admin-table tbody tr:last-child td { border-bottom: 0; }
body.launch-global-admin .admin-user-link {
  font-family: var(--mono); font-weight: 600; color: var(--ink);
  text-decoration: none;
}
body.launch-global-admin .admin-user-link:hover {
  color: var(--moss); text-decoration: underline;
}
body.launch-global-admin .admin-cell-muted { color: var(--muted); }
body.launch-global-admin .admin-cell-mono {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--muted);
}
body.launch-global-admin .admin-num {
  font-family: var(--mono); text-align: right; color: var(--ink);
}
body.launch-global-admin .admin-num--zero { color: var(--muted); }

/* ---- Badges + suspicious-signal flags --------------------------------------- */

/* Outline chips, profile idiom: admin = clay, banned = danger. */
body.launch-global-admin .admin-badge {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: 0 var(--sp-3); border-radius: var(--r-2); margin-left: var(--sp-3);
  border: var(--bw) solid var(--line2); color: var(--muted);
  background: var(--surface);
}
body.launch-global-admin .admin-badge--admin  { color: var(--clay);   border-color: var(--clay); }
body.launch-global-admin .admin-badge--banned { color: var(--danger); border-color: var(--danger); }
body.launch-global-admin .admin-flag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  font-weight: 600; padding: 0 var(--sp-3); border-radius: var(--r-2);
  margin: 1px var(--sp-2) 1px 0;
  color: var(--ochre); border: var(--bw) solid var(--ochre);
  background: var(--surface);
}
body.launch-global-admin .admin-flag--quiet { color: var(--muted); border-color: var(--line2); }

/* ---- Unban action ----------------------------------------------------------- */

/* Restorative moss action; POST /admin/unban/user/:id form kept verbatim. */
body.launch-global-admin .admin-act-form { display: inline; margin: 0; padding: 0; }
body.launch-global-admin .admin-btn-unban {
  font-family: var(--mono); font-size: var(--fs-11); font-weight: 600;
  cursor: pointer; color: var(--moss); background: var(--surface);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-6);
}
body.launch-global-admin .admin-btn-unban:hover { color: #fff; background: var(--moss); }

/* ---- Confirm modal ---------------------------------------------------------- */

/* Overlay composed by the shared behavior script from legacy utility class
   names; the stable .fixed.inset-0 pair and the #cancel-btn / #confirm-btn
   ids are the hooks. */
body.launch-global-admin .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
body.launch-global-admin .fixed.inset-0.opacity-0 { opacity: 0; }
body.launch-global-admin .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
body.launch-global-admin .fixed.inset-0 h3 {
  font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3);
}
body.launch-global-admin .fixed.inset-0 p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7);
}
body.launch-global-admin .fixed.inset-0 .flex {
  display: flex; justify-content: flex-end; gap: var(--sp-4);
}
body.launch-global-admin #cancel-btn,
body.launch-global-admin #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
body.launch-global-admin #confirm-btn {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* ---- Gate + consent --------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-global-admin > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
body.launch-global-admin #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
body.launch-global-admin #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
body.launch-global-admin #analytics-consent [data-analytics-accept],
body.launch-global-admin #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
body.launch-global-admin #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
body.launch-global-admin #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ==========================================================================
   EARDE INTEGRATION — final create-page callers only
   Pass 19: the last two legacy create_page documents.

   1) body.launch-new-community — GET /new-community
      (Pages.new_community_form through launch_app_page). A global-admin
      administrative utility, not the onboarding flow: /bring, GitHub
      verification and project setup remain the product path, and nothing
      links here. The create-* fragment (the POST /communities form with its
      Dream CSRF field, hidden section/channel counts, name/slug/description
      fields, default #general and General chips, and the JS-managed extra
      rows) is treated as pinned legacy markup, spliced verbatim inside the
      .create-shell marker and skinned onto the approved anatomy: a mono
      administrative context strip, a serif head band, one measured inset
      form column, thin rules, a moss primary action. No new fields,
      options, or onboarding illustration are invented.

   2) body.launch-message-page .create-shell — the review queue's degraded
      document (Project_home_review_pages, shell unavailable). The neutral
      message wrapper owns the page; only the minimal rules needed to keep
      the spliced queue fragment readable live here, keyed on the
      .create-shell marker that exists in no other message document. No
      status-, route- or resource-derived selector is introduced.
   ========================================================================== */

/* ---- Launch chrome (same rules as the other launch app scopes) ------------- */

.launch-new-community .launch-user { position: relative; }
.launch-new-community .launch-user > summary { list-style: none; }
.launch-new-community .launch-user > summary::-webkit-details-marker { display: none; }
.launch-new-community .launch-user .avatar { background: var(--moss); }
.launch-new-community .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-new-community .launch-user__menu a,
.launch-new-community .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-new-community .launch-user__menu a:hover,
.launch-new-community .launch-user__menu button:hover { background: var(--surface2); }
.launch-new-community .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it.
   Badge element only — deliberately NOT a global .hidden utility. */
.launch-new-community #notif-badge.hidden { display: none; }

/* Real community avatars fill their fixed rail tile. */
.launch-new-community .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Administrative context strip ------------------------------------------ */

/* Mono, factual, ahead of the create-shell marker: names the utility and
   its route, never sells it as onboarding. */
.launch-new-community .launch-newcomm-context {
  flex: none; display: flex; align-items: baseline; gap: var(--sp-5);
  padding: var(--sp-4) 28px; background: var(--surface2);
  border-bottom: var(--bw) solid var(--line);
  font-family: var(--mono); font-size: var(--fs-10-5);
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
}
.launch-new-community .launch-newcomm-context-label { color: var(--muted); }
.launch-new-community .launch-newcomm-context-path {
  text-transform: none; letter-spacing: normal; color: var(--slate);
}

/* ---- Form anatomy ------------------------------------------------------------ */

/* main is the column: context strip, head band, then the scrolling form. */
.launch-new-community .main {
  display: flex; flex-direction: column; min-height: 0;
}
.launch-new-community .create-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-new-community .create-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.launch-new-community .create-panel { display: contents; }

/* Head band: compact serif title over the renderer's factual subtitle. */
.launch-new-community .create-head {
  flex: none; padding: 15px 28px; background: var(--surface);
  border-bottom: var(--bw) solid var(--line2);
}
.launch-new-community .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink);
}
.launch-new-community .create-sub {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-1);
  line-height: var(--lh-prose); max-width: 620px;
}

/* The form is the scroller: one measured inset column. */
.launch-new-community .create-panel > .create-form {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--sp-10) 28px 70px;
}
.launch-new-community .create-panel > .create-form > * { max-width: 620px; }

.launch-new-community .create-field { margin-bottom: var(--sp-8); }
.launch-new-community .create-label {
  display: block; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.launch-new-community .create-label .req { color: var(--clay); }

/* Inset controls: hairline frame, tight radii, quiet slate focus. */
.launch-new-community .create-input,
.launch-new-community .create-select,
.launch-new-community .create-textarea {
  width: 100%; font-family: var(--sans); font-size: var(--fs-13);
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
}
.launch-new-community .create-textarea { resize: vertical; min-height: 84px; }
.launch-new-community .create-input::placeholder,
.launch-new-community .create-textarea::placeholder { color: var(--muted); }
.launch-new-community .create-input:focus,
.launch-new-community .create-select:focus,
.launch-new-community .create-textarea:focus {
  outline: none; border-color: var(--slate);
}

/* Slug field: mono /c/ prefix welded to its input. */
.launch-new-community .create-slug {
  display: flex; align-items: stretch;
}
.launch-new-community .create-slug-prefix {
  display: flex; align-items: center; font-family: var(--mono);
  font-size: var(--fs-12); color: var(--muted); background: var(--surface2);
  border: var(--bw) solid var(--line2); border-right: 0;
  border-radius: var(--r-2) 0 0 var(--r-2); padding: 0 var(--sp-4);
}
.launch-new-community .create-slug .create-input {
  border-radius: 0 var(--r-2) var(--r-2) 0; font-family: var(--mono);
}

/* Field hints: quiet mono metadata. */
.launch-new-community .create-hint {
  font-family: var(--mono); font-size: var(--fs-11); color: var(--muted);
  margin-top: var(--sp-2);
}

/* Channel / section groups: thin-ruled subsections, mono sigils. */
.launch-new-community .create-group {
  margin-bottom: var(--sp-9); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}
.launch-new-community .create-group-head { margin-bottom: var(--sp-5); }
.launch-new-community .create-group-title {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-13);
  color: var(--ink);
}
.launch-new-community .create-group-title .sigil {
  font-family: var(--mono); color: var(--moss); margin-right: var(--sp-2);
}
.launch-new-community .create-group-desc {
  font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-1);
  line-height: var(--lh-prose);
}

/* Default chips (#general / General): locked ledger rows, not buttons. */
.launch-new-community .create-chip {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface2); border: var(--bw) solid var(--line);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-3); max-width: 620px;
}
.launch-new-community .create-chip-sigil {
  font-family: var(--mono); color: var(--moss);
}
.launch-new-community .create-chip-name {
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
}
.launch-new-community .create-chip-lock {
  margin-left: auto; font-family: var(--mono); font-size: var(--fs-10);
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--muted);
}

/* JS-added extra rows: one hairline row per channel/section. */
.launch-new-community .create-rows { display: block; }
.launch-new-community .create-row {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3); max-width: 620px;
}
.launch-new-community .create-row-sigil {
  flex: none; font-family: var(--mono); color: var(--muted);
}
.launch-new-community .create-row .create-input { flex: 1; min-width: 0; }
.launch-new-community .create-row .create-select { flex: none; width: auto; }
.launch-new-community .create-row-remove {
  flex: none; cursor: pointer; font-size: var(--fs-13); line-height: 1;
  color: var(--muted); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-4);
}
.launch-new-community .create-row-remove:hover { color: var(--clay); }

/* Add-row affordance: quiet secondary, never the page's primary action. */
.launch-new-community .create-add {
  cursor: pointer; font-family: var(--mono); font-size: var(--fs-11-5);
  color: var(--slate); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-6);
}
.launch-new-community .create-add:hover { background: var(--surface2); }

/* Actions: moss submit above a thin closing rule. */
.launch-new-community .create-actions {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}
.launch-new-community .create-btn {
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-12-5); color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-8); text-decoration: none;
}
.launch-new-community .create-btn:hover {
  background: color-mix(in srgb, var(--moss) 88%, #000);
}
.launch-new-community .create-btn--block { width: auto; }

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-new-community > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-new-community #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-new-community #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-new-community #analytics-consent [data-analytics-accept],
.launch-new-community #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-new-community #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-new-community #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}

/* ---- Degraded review queue inside the neutral message document -------------- */

/* Keyed on the .create-shell marker, which no other message document
   contains; nothing here derives from status, route or resource. Just
   enough for the spliced queue fragment to read as one measured column. */
body.launch-message-page .create-shell {
  width: 100%; max-width: 680px; margin: 0 auto;
  padding: var(--sp-10) var(--sp-8) var(--sp-13);
}
body.launch-message-page .create-shell .create-head { margin-bottom: var(--sp-8); }
body.launch-message-page .create-shell .create-title {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-22);
  color: var(--ink);
}
body.launch-message-page .create-shell .create-sub {
  font-size: var(--fs-12-5); color: var(--muted); margin-top: var(--sp-1);
  line-height: var(--lh-prose);
}
body.launch-message-page .create-shell .phrv-request-list {
  list-style: none; margin: 0; padding: 0;
}
body.launch-message-page .create-shell .phrv-request {
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface); padding: var(--sp-7) var(--sp-8);
  margin-bottom: var(--sp-6);
}
body.launch-message-page .create-shell .phrv-actions {
  display: flex; gap: var(--sp-4); margin-top: var(--sp-6);
  padding-top: var(--sp-6); border-top: var(--bw) solid var(--line);
}
body.launch-message-page .create-shell .phrv-actions button {
  cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-12); color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7);
}
body.launch-message-page .create-shell .phrv-actions .phrv-accept button {
  color: #fff; background: var(--moss); border-color: var(--moss);
}

/* ==========================================================================
   EARDE INTEGRATION — legacy post fallback only
   Scoped beneath body.launch-legacy-post: the GET /p/:id safe fallback
   (Pages.post_page), which renders only for the pathological unmappable post
   (community_slug = "") — every mappable post 301s to its canonical thread
   URL before this page exists. Exists only because the fallback's warm-card
   fragment is pinned byte-for-byte (post card, recursive comment tree, every
   vote/comment/delete/mod_delete/ban/join form, the mod/admin/ban <dialog>s,
   the toggleComment ids and the optimistic-vote DOM contract), so only the
   outer document wrapper changed and the legacy Tailwind class names arrive
   inert. The pinned fragment is skinned here onto the Cartographic grammar:
   - a route-scoped structural subset of the exact utility class names the
     fragment carries (flex/gap/width/spacing/whitespace) — mapped only under
     this root, never globally;
   - reply/collapse toggles flip the legacy `hidden` class on comment
     content/children/reply forms, so a route-scoped equivalent is defined
     beneath THIS root only (the sticky right column re-opts in by the
     .w-80.hidden pair) — still no global .hidden utility;
   - the optimistic-vote script toggles legacy Tailwind colour class names on
     the vote buttons; those exact names are mapped to launch accents here
     (same mapping as the canonical thread route);
   - the shared confirm-modal script composes its overlay from legacy utility
     class names; the stable .fixed.inset-0 pair and the #cancel-btn /
     #confirm-btn ids are the hooks;
   - the security-critical mod/admin/ban <dialog>s keep their legacy Tailwind
     markup verbatim; they are kept readable and usable via element rules;
   - the notification badge is revealed by the shared script removing the
     legacy `hidden` class (badge element rule, as everywhere else);
   - the desktop-only gate panel ships in mobile-gate.css; only this route's
     launch-scope "hide the app" rule lives here;
   - the analytics consent banner markup is shared with the legacy layout
     (same rules as the other launch sections, re-scoped).
   ========================================================================== */

/* ---- Launch chrome ---------------------------------------------------------- */

/* Top-bar user menu: pure-CSS <details>, real logout POST form inside. */
.launch-legacy-post .launch-user { position: relative; }
.launch-legacy-post .launch-user > summary { list-style: none; }
.launch-legacy-post .launch-user > summary::-webkit-details-marker { display: none; }
.launch-legacy-post .launch-user .avatar { background: var(--moss); }
.launch-legacy-post .launch-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-3);
  box-shadow: var(--shadow-overlay);
}
.launch-legacy-post .launch-user__menu a,
.launch-legacy-post .launch-user__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2); cursor: pointer;
}
.launch-legacy-post .launch-user__menu a:hover,
.launch-legacy-post .launch-user__menu button:hover { background: var(--surface2); }
.launch-legacy-post .launch-user__menu form {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--line);
}

/* Notification badge: hidden until the shared one-shot fetch reveals it. */
.launch-legacy-post #notif-badge.hidden { display: none; }

/* Real community avatars fill the fixed 42px rail tile. */
.launch-legacy-post .launch-rail__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block;
}

/* ---- Main pane: this route's scroll owner + centred reading column ---------- */

/* The pinned fragment has no .scroll wrapper, so the main pane itself scrolls. */
.launch-legacy-post .main { display: block; overflow-y: auto; scrollbar-width: thin; }
.launch-legacy-post .main > .flex {
  max-width: var(--content-feed); margin: 0 auto;
  padding: var(--sp-12) var(--sp-13) var(--sp-15);
}

/* ---- Structural subset of the pinned fragment's legacy class names ---------- */

.launch-legacy-post .hidden { display: none; }
.launch-legacy-post .flex { display: flex; }
.launch-legacy-post .inline { display: inline; }
.launch-legacy-post .block { display: block; }
.launch-legacy-post .flex-col { flex-direction: column; }
/* Desktop-only surface: the lg: variants are unconditionally active. */
.launch-legacy-post .lg\:flex-row { flex-direction: row; }
.launch-legacy-post .flex-wrap { flex-wrap: wrap; }
.launch-legacy-post .flex-1 { flex: 1 1 0%; }
.launch-legacy-post .flex-shrink-0 { flex-shrink: 0; }
.launch-legacy-post .items-start { align-items: flex-start; }
.launch-legacy-post .items-center { align-items: center; }
.launch-legacy-post .justify-center { justify-content: center; }
.launch-legacy-post .justify-end { justify-content: flex-end; }
.launch-legacy-post .gap-1 { gap: 4px; }
.launch-legacy-post .gap-1\.5 { gap: 6px; }
.launch-legacy-post .gap-2 { gap: 8px; }
.launch-legacy-post .gap-3 { gap: 12px; }
.launch-legacy-post .gap-4 { gap: 16px; }
.launch-legacy-post .gap-6 { gap: 24px; }
.launch-legacy-post .space-y-1 > * + * { margin-top: 4px; }
.launch-legacy-post .min-w-0 { min-width: 0; }
.launch-legacy-post .w-full { width: 100%; }
.launch-legacy-post .w-4 { width: 16px; }
.launch-legacy-post .h-4 { height: 16px; }
.launch-legacy-post .w-7 { width: 28px; }
.launch-legacy-post .h-7 { height: 28px; }
.launch-legacy-post .w-8 { width: 32px; }
.launch-legacy-post .h-8 { height: 32px; }
.launch-legacy-post .self-start { align-self: flex-start; }
.launch-legacy-post .overflow-hidden { overflow: hidden; }
.launch-legacy-post .overflow-y-auto { overflow-y: auto; }
.launch-legacy-post .whitespace-pre-wrap { white-space: pre-wrap; }
.launch-legacy-post .break-words { overflow-wrap: anywhere; }
.launch-legacy-post .break-all { word-break: break-all; }
.launch-legacy-post .object-contain { object-fit: contain; }
.launch-legacy-post .object-cover { object-fit: cover; }
.launch-legacy-post .max-h-\[700px\] { max-height: 700px; }
.launch-legacy-post .text-center { text-align: center; }
.launch-legacy-post .uppercase { text-transform: uppercase; letter-spacing: var(--ls-kicker); }
.launch-legacy-post .italic { font-style: italic; }
.launch-legacy-post .leading-none { line-height: 1; }
.launch-legacy-post .leading-snug { line-height: var(--lh-title); }
.launch-legacy-post .leading-relaxed { line-height: var(--lh-read); }
.launch-legacy-post .cursor-pointer { cursor: pointer; }

/* Spacing names the fragment actually carries (Tailwind 4px scale). */
.launch-legacy-post .m-0 { margin: 0; }
.launch-legacy-post .mx-1 { margin-left: 4px; margin-right: 4px; }
.launch-legacy-post .mt-0 { margin-top: 0; }
.launch-legacy-post .mt-0\.5 { margin-top: 2px; }
.launch-legacy-post .mt-2 { margin-top: 8px; }
.launch-legacy-post .mt-3 { margin-top: 12px; }
.launch-legacy-post .mt-4 { margin-top: 16px; }
.launch-legacy-post .mt-6 { margin-top: 24px; }
.launch-legacy-post .mb-1 { margin-bottom: 4px; }
.launch-legacy-post .mb-2 { margin-bottom: 8px; }
.launch-legacy-post .mb-3 { margin-bottom: 12px; }
.launch-legacy-post .mb-4 { margin-bottom: 16px; }
.launch-legacy-post .mb-6 { margin-bottom: 24px; }
.launch-legacy-post .mb-8 { margin-bottom: 32px; }
.launch-legacy-post .ml-1 { margin-left: 4px; }
.launch-legacy-post .ml-1\.5 { margin-left: 6px; }
.launch-legacy-post .ml-2\.5 { margin-left: 10px; }
.launch-legacy-post .ml-3 { margin-left: 12px; }
.launch-legacy-post .p-0 { padding: 0; }
.launch-legacy-post .p-3 { padding: 12px; }
.launch-legacy-post .p-5 { padding: 20px; }
.launch-legacy-post .p-6 { padding: 24px; }
.launch-legacy-post .px-1\.5 { padding-left: 6px; padding-right: 6px; }
.launch-legacy-post .px-2 { padding-left: 8px; padding-right: 8px; }
.launch-legacy-post .px-3 { padding-left: 12px; padding-right: 12px; }
.launch-legacy-post .px-4 { padding-left: 16px; padding-right: 16px; }
.launch-legacy-post .px-6 { padding-left: 24px; padding-right: 24px; }
.launch-legacy-post .py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.launch-legacy-post .py-1 { padding-top: 4px; padding-bottom: 4px; }
.launch-legacy-post .py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.launch-legacy-post .py-2 { padding-top: 8px; padding-bottom: 8px; }
.launch-legacy-post .py-3 { padding-top: 12px; padding-bottom: 12px; }
.launch-legacy-post .py-4 { padding-top: 16px; padding-bottom: 16px; }
.launch-legacy-post .py-5 { padding-top: 20px; padding-bottom: 20px; }
.launch-legacy-post .pl-3 { padding-left: 12px; }
.launch-legacy-post .pr-2 { padding-right: 8px; }
.launch-legacy-post .pt-1 { padding-top: 4px; }
.launch-legacy-post .pt-4 { padding-top: 16px; }
.launch-legacy-post .pb-8 { padding-bottom: 32px; }

/* Borders and radii (arbitrary-value colour names stay inert; the line
   tokens supply every colour). Tight civic radii, flat elevation. */
.launch-legacy-post .border { border: var(--bw) solid var(--line); }
.launch-legacy-post .border-0 { border: 0; }
.launch-legacy-post .border-t { border-top: var(--bw) solid var(--line); }
.launch-legacy-post .border-b { border-bottom: var(--bw) solid var(--line); }
.launch-legacy-post .border-l-2 { border-left: var(--bw-accent) solid var(--line); }
.launch-legacy-post .rounded { border-radius: var(--r-1); }
.launch-legacy-post .rounded-r { border-top-right-radius: var(--r-1); border-bottom-right-radius: var(--r-1); }
.launch-legacy-post .rounded-xl { border-radius: var(--r-3); }
.launch-legacy-post .rounded-2xl { border-radius: var(--r-4); }
.launch-legacy-post .rounded-full { border-radius: 999px; }

/* ---- Type + colour mapping (legacy names → launch tokens) ------------------- */

.launch-legacy-post .text-\[10px\] { font-size: var(--fs-10); }
.launch-legacy-post .text-xs { font-size: var(--fs-11); }
.launch-legacy-post .text-sm { font-size: var(--fs-13); }
.launch-legacy-post .text-base { font-size: var(--fs-14); }
.launch-legacy-post .text-lg { font-size: var(--fs-16); }
.launch-legacy-post .font-medium { font-weight: 500; }
.launch-legacy-post .font-semibold { font-weight: 600; }
.launch-legacy-post .font-bold { font-weight: 700; }
.launch-legacy-post .font-mono { font-family: var(--mono); }
.launch-legacy-post .text-white { color: #fff; }
.launch-legacy-post .text-gray-900,
.launch-legacy-post .text-gray-800,
.launch-legacy-post .text-gray-700 { color: var(--ink); }
.launch-legacy-post .text-gray-600,
.launch-legacy-post .text-gray-500,
.launch-legacy-post .text-gray-400 { color: var(--muted); }
.launch-legacy-post .text-red-500,
.launch-legacy-post .text-red-600,
.launch-legacy-post .text-red-700,
.launch-legacy-post .text-red-900 { color: var(--danger); }
.launch-legacy-post .text-amber-700,
.launch-legacy-post .text-amber-900 { color: var(--ochre); }
.launch-legacy-post .text-green-700 { color: var(--moss); }
.launch-legacy-post .text-blue-600 { color: var(--slate); }
.launch-legacy-post .text-\[\#C94C4C\] { color: var(--clay); }
.launch-legacy-post .text-\[\#69C3D2\] { color: var(--slate); }
/* Active-vote colours: the exact legacy class names the vote script toggles. */
.launch-legacy-post .text-orange-500 { color: var(--clay); }
.launch-legacy-post .text-emerald-600 { color: var(--moss); }
.launch-legacy-post .bg-white { background: var(--surface); }
.launch-legacy-post .bg-gray-50,
.launch-legacy-post .bg-gray-100 { background: var(--surface2); }
.launch-legacy-post .bg-transparent { background: transparent; }
.launch-legacy-post .bg-\[\#DFF5F8\] { background: var(--surface3); }
.launch-legacy-post .bg-\[\#F0EDE4\] { background: var(--surface2); }

/* Author badges rendered by render_author (legacy Tailwind classes inert). */
.launch-legacy-post .mod-badge {
  font-family: var(--mono); font-size: var(--fs-9); color: var(--clay);
  margin-left: 4px;
}
.launch-legacy-post .bg-green-100 { background: var(--surface2); }
.launch-legacy-post .bg-red-100 { background: var(--surface2); }

/* ---- Post card + comments skin ---------------------------------------------- */

/* The pinned card title (h1.font-bold beats the .text-lg utility above). */
.launch-legacy-post h1.font-bold {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-24);
  line-height: var(--lh-tight); color: var(--ink);
}
.launch-legacy-post .ph-mask { font-size: var(--fs-15); line-height: var(--lh-read); }
.launch-legacy-post .w-80 { width: var(--aside-w); flex: none; }
/* The sticky right column carries the legacy `hidden lg:flex` pair; on this
   desktop-only surface the lg: branch wins (three classes beat the scoped
   .hidden above regardless of order). */
.launch-legacy-post .w-80.hidden { display: flex; }
.launch-legacy-post .sticky { position: sticky; }
.launch-legacy-post .top-20 { top: 0; }
.launch-legacy-post .h-\[calc\(100vh-5rem\)\] { max-height: calc(100vh - var(--topbar-h) - 40px); }

/* Buttons: quiet text controls by default; solid submits are named below.
   (Without Tailwind's preflight the UA default would paint grey chips.) */
.launch-legacy-post button {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit; padding: 0;
}
.launch-legacy-post button.border { border: var(--bw) solid var(--line2); }
.launch-legacy-post button.px-2 { padding-left: 8px; padding-right: 8px; }
.launch-legacy-post button.px-3 { padding-left: 12px; padding-right: 12px; }
.launch-legacy-post button.px-4 { padding-left: 16px; padding-right: 16px; }
.launch-legacy-post button.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.launch-legacy-post button.py-1 { padding-top: 4px; padding-bottom: 4px; }
.launch-legacy-post button.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.launch-legacy-post button.py-2 { padding-top: 8px; padding-bottom: 8px; }

/* Solid primary submits: top-level comment composer, reply forms, join. */
.launch-legacy-post form[action='/comments'] button[type='submit'],
.launch-legacy-post form[action='/join'] button[type='submit'] {
  color: #fff; background: var(--moss);
  border: var(--bw) solid var(--moss); border-radius: var(--r-2);
  font-weight: 600; font-size: var(--fs-12);
  padding: var(--sp-3) var(--sp-7);
}
.launch-legacy-post form[action='/comments'] button[type='submit']:hover,
.launch-legacy-post form[action='/join'] button[type='submit']:hover { filter: brightness(1.06); }

/* Vote arrows keep the optimistic-vote DOM contract: bare mono glyphs. */
.launch-legacy-post form[action='/vote'] button,
.launch-legacy-post form[action='/vote-comment'] button {
  font-family: var(--mono); font-weight: 700; line-height: 1;
}

/* Textareas (composer, replies, dialog reasons). */
.launch-legacy-post textarea {
  width: 100%; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-13); min-height: 70px;
}
.launch-legacy-post textarea:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; }
.launch-legacy-post .resize-y { resize: vertical; }
.launch-legacy-post .resize-none { resize: none; }

/* Comment thread line + row hover keep their quiet legacy roles. */
.launch-legacy-post .border-l-2 { border-left-color: var(--line2); }
.launch-legacy-post .hover\:bg-\[\#EDE9DF\]:hover { background: var(--surface2); }

/* The sidebar's Create Post anchor is the fragment's one white-on-accent
   link; its legacy background class is inert, so the accent is re-supplied
   (otherwise white text sits invisible on the panel). */
.launch-legacy-post a.text-white { background: var(--moss); }
.launch-legacy-post a.text-white:hover { color: #fff; filter: brightness(1.06); }

/* ---- Legacy moderation <dialog>s (Tailwind classes inert) ------------------- */

.launch-legacy-post dialog {
  border: var(--bw) solid var(--line2); border-radius: var(--r-4);
  padding: var(--sp-9); max-width: 28rem; width: calc(100% - 2rem);
  background: var(--surface); color: var(--ink);
}
.launch-legacy-post dialog::backdrop { background: rgba(31, 36, 33, .45); }
.launch-legacy-post dialog form {
  display: flex; flex-direction: column; gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.launch-legacy-post dialog textarea {
  width: 100%; border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  background: var(--surface2); padding: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-13); min-height: 70px;
}
.launch-legacy-post dialog button {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-legacy-post dialog button[type='submit'] {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* ---- Shared confirm modal ---------------------------------------------------- */

/* The script composes it from legacy utility class names; the stable
   .fixed.inset-0 pair and the #cancel-btn / #confirm-btn ids are the hooks. */
.launch-legacy-post .fixed.inset-0 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 36, 33, .45); transition: opacity .2s;
}
.launch-legacy-post .fixed.inset-0.opacity-0 { opacity: 0; }
.launch-legacy-post .fixed.inset-0 > div {
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-4); padding: var(--sp-9);
  max-width: 24rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-overlay);
}
.launch-legacy-post .fixed.inset-0 h3 { font-size: var(--fs-15); font-weight: 700; margin-bottom: var(--sp-3); }
.launch-legacy-post .fixed.inset-0 p { font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-7); }
.launch-legacy-post .fixed.inset-0 .flex { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.launch-legacy-post #cancel-btn,
.launch-legacy-post #confirm-btn {
  cursor: pointer; border: var(--bw) solid var(--line2);
  border-radius: var(--r-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-7); font-size: var(--fs-12); font-weight: 600;
}
.launch-legacy-post #confirm-btn { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---- Gate + consent ---------------------------------------------------------- */

/* Desktop-only gate: hide this route's launch app under the shared
   breakpoint; the gate panel itself is styled by mobile-gate.css. */
@media (max-width: 800px) {
  body.launch-legacy-post > .app { display: none !important; }
}

/* Analytics consent banner (markup shared with the legacy layout). */
.launch-legacy-post #analytics-consent {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 50; width: calc(100% - 2rem); max-width: 28rem;
  background: var(--surface); border: var(--bw) solid var(--line2);
  border-radius: var(--r-3); padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--shadow-overlay);
}
.launch-legacy-post #analytics-consent p {
  font-size: var(--fs-13); color: var(--muted); margin-bottom: var(--sp-5);
}
.launch-legacy-post #analytics-consent [data-analytics-accept],
.launch-legacy-post #analytics-consent [data-analytics-refuse] {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-12);
  border: var(--bw) solid var(--line2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-7); cursor: pointer;
  background: var(--surface); color: var(--muted); margin-right: var(--sp-4);
}
.launch-legacy-post #analytics-consent [data-analytics-accept] {
  color: #fff; background: var(--moss); border-color: var(--moss);
}
.launch-legacy-post #analytics-consent [data-analytics-error] {
  color: var(--danger); font-size: var(--fs-11);
}