/* Community — clean modern SaaS-dashboard look (owner-approved 2026-07-19):
   soft grey canvas, white rounded cards with feather shadows, one vivid
   blue accent, all-sans (Inter) type, pill buttons & chips.
   All values live in the .cmty scoped token layer below — components
   reference tokens only, never raw hexes. */

.cmty {
  /* -- scoped token layer ------------------------------------------- */
  --c-bg: #e9eef6;          /* icy blue-grey canvas */
  --c-surface: #ffffff;
  --c-surface-2: #f3f7fc;
  --c-ink: #1e2430;
  --c-ink-2: #5a6376;
  --c-ink-3: #94a0b4;
  --c-line: #e4eaf3;
  --c-line-strong: #d2dbe8;
  --c-accent: #1273eb;      /* vivid blue — the single accent */
  --c-accent-ink: #ffffff;
  --c-accent-soft: #e4eefc;
  --c-alert: #d93a2b;       /* rescue alerts only — clear red */
  --c-alert-soft: #fdecea;
  --c-shadow: 0 2px 4px rgba(23, 48, 92, .05), 0 12px 32px -16px rgba(23, 48, 92, .14);
  --c-serif: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* legacy alias — headings are sans now */
  --c-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--c-sans);
  min-height: 100%;
  padding: 28px clamp(20px, 4vw, 48px) 64px;
}

.cmty a { color: inherit; text-decoration: none; }

/* -- masthead --------------------------------------------------------- */
.cmty-masthead { max-width: 1100px; margin: 0 auto 26px; }
.cmty-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-accent); margin: 0 0 6px;
}
.cmty-masthead h1 {
  font-family: var(--c-sans); font-weight: 700; font-size: clamp(25px, 3vw, 32px);
  letter-spacing: -0.02em; margin: 0 0 6px;
}
.cmty-masthead .cmty-sub { color: var(--c-ink-2); font-size: 15px; margin: 0; max-width: 62ch; }

/* -- "back to app" chip (mobile only) ----------------------------------
   Rendered in the topbar greet on every community page for logged-in
   customers (deck/community/_greet.html). Desktop = pure Deck, so the
   chip only exists at phone widths, where the visitor most likely came
   from the mobile app (/services). */
.cmty-apphome { display: none; }
@media (max-width: 760px) {
  .cmty-apphome {
    display: inline-flex; align-items: center;
    font: 600 12.5px/1 'Inter', -apple-system, 'Segoe UI', sans-serif;
    color: #1273eb; background: #e4eefc;
    padding: 7px 12px; border-radius: 999px; margin-right: 10px;
    text-decoration: none; white-space: nowrap;
  }
}

/* -- inbox link + notifications bell ----------------------------------- */
.cmty-masthead { position: relative; }
.cmty-bell-group {
  position: absolute; top: 2px; right: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.cmty-bell {
  font: 600 13px/1 var(--c-sans); color: var(--c-ink-2);
  padding: 9px 15px; border: 0;
  border-radius: 999px; background: var(--c-surface);
  box-shadow: var(--c-shadow);
  display: inline-flex; align-items: center; gap: 8px;
}
.cmty-bell:hover { color: var(--c-accent); }
.cmty-bell--quiet { background: transparent; box-shadow: none; color: var(--c-ink-3); }
.cmty-bell-badge {
  background: var(--c-alert); color: var(--c-accent-ink);
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 2px 7px; min-width: 12px; text-align: center;
}
.cmty-crumb .cmty-bell-group { position: static; }
.cmty-thread-row.is-unread { background: var(--c-accent-soft); }
@media (max-width: 700px) { .cmty-bell-group { position: static; margin-bottom: 10px; } }

/* -- generic layout --------------------------------------------------- */
.cmty-cols {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
}
@media (max-width: 960px) { .cmty-cols { grid-template-columns: 1fr; } }

.cmty-panel {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--c-shadow);
}

/* -- editorial hero ----------------------------------------------------- */
.cmty-hero { max-width: 1100px; margin: 0 auto 26px; }
.cmty-hero img {
  display: block; width: 100%; max-height: 340px; object-fit: cover;
  object-position: center 35%;
  border-radius: 20px; border: 0;
  box-shadow: var(--c-shadow);
}
.cmty-hero--space img { max-height: 220px; }

/* -- space directory (home) ------------------------------------------ */
.cmty-space-row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border-bottom: 1px solid var(--c-line);
  transition: background 140ms ease;
}
.cmty-space-row:last-child { border-bottom: 0; }
.cmty-space-row:hover { background: var(--c-surface-2); }
.cmty-space-row .thumb {
  width: 96px; height: 66px; object-fit: cover; flex: none;
  border-radius: 12px; border: 1px solid var(--c-line);
}
.cmty-space-row .body { flex: 1; min-width: 0; }
.cmty-space-row .name {
  display: block;
  font-family: var(--c-sans); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--c-ink);
}
.cmty-space-row:hover .name { color: var(--c-accent); }
.cmty-space-row .tag { display: block; color: var(--c-ink-2); font-size: 13.5px; margin-top: 2px; }
.cmty-space-row .count {
  font-variant-numeric: tabular-nums; color: var(--c-ink-3); font-size: 12.5px;
  white-space: nowrap;
  background: var(--c-surface-2); border-radius: 999px; padding: 5px 11px;
}

/* -- how it works ------------------------------------------------------- */
.cmty-how { margin-top: 24px; padding: 22px 24px; }
.cmty-how h2 {
  font-family: var(--c-sans); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 16px;
}
.cmty-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
.cmty-steps li { position: relative; padding-left: 44px; }
.cmty-steps .n {
  position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-soft); color: var(--c-accent);
  font: 700 13px var(--c-sans);
}
.cmty-steps b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.cmty-steps span:not(.n) { font-size: 13.5px; color: var(--c-ink-2); line-height: 1.55; }
.cmty-steps a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .cmty-steps { grid-template-columns: 1fr; } }

/* -- side column ------------------------------------------------------ */
.cmty-side h3 {
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--c-ink); margin: 0 0 10px;
}
.cmty-side .cmty-panel { padding: 16px 18px; margin-bottom: 20px; }
.cmty-recent-item { display: block; padding: 9px 0; border-bottom: 1px solid var(--c-line); }
.cmty-recent-item:last-child { border-bottom: 0; }
.cmty-recent-item .t { font-size: 14px; font-weight: 500; line-height: 1.35; }
.cmty-recent-item .m { font-size: 12px; color: var(--c-ink-3); margin-top: 2px; }
.cmty-recent-item:hover .t { color: var(--c-accent); }

/* -- buttons ---------------------------------------------------------- */
.cmty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13.5px/1 var(--c-sans); letter-spacing: .01em;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface); color: var(--c-ink);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.cmty-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cmty-btn--primary {
  background: var(--c-accent); border-color: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: 0 6px 16px -8px rgba(18, 115, 235, .55);
}
.cmty-btn--primary:hover { background: #0d5fc7; border-color: #0d5fc7; color: var(--c-accent-ink); }
.cmty-btn--quiet { border-color: transparent; background: transparent; color: var(--c-ink-2); }
.cmty-btn--quiet:hover { background: var(--c-surface-2); border-color: transparent; color: var(--c-ink); }
.cmty-btn[disabled] { opacity: .5; cursor: default; }

/* -- space page: filter bar + thread list ----------------------------- */
.cmty-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.cmty-filter {
  font: 500 13px/1 var(--c-sans); color: var(--c-ink-2);
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  background: var(--c-surface);
}
.cmty-filter:hover { color: var(--c-accent); }
.cmty-filter.is-active {
  background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent);
  font-weight: 600;
}
.cmty-toolbar .grow { flex: 1; }

.cmty-thread-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 14px; align-items: baseline;
  padding: 15px 20px; border-bottom: 1px solid var(--c-line);
  transition: background 140ms ease;
}
.cmty-thread-row:last-child { border-bottom: 0; }
.cmty-thread-row:hover { background: var(--c-surface-2); }
.cmty-thread-row .title { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.cmty-thread-row:hover .title { color: var(--c-accent); }
.cmty-thread-row .excerpt {
  font-size: 13px; color: var(--c-ink-3); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cmty-thread-row .meta { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; }
.cmty-thread-row .stats {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--c-ink-2); white-space: nowrap;
}
.cmty-thread-row .stats .when { display: block; font-size: 11.5px; color: var(--c-ink-3); margin-top: 3px; }

/* type badges — soft rounded chips */
.cmty-badge {
  justify-self: start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-ink-2);
}
.cmty-badge--alert { background: var(--c-alert-soft); color: var(--c-alert); }
.cmty-badge--question, .cmty-badge--event, .cmty-badge--listing {
  background: var(--c-accent-soft); color: var(--c-accent);
}
.cmty-pin { color: var(--c-accent); font-size: 11px; font-weight: 700; margin-right: 6px; }

/* -- reading pane ------------------------------------------------------ */
.cmty-article { max-width: 760px; margin: 0 auto; }
.cmty-crumb { font-size: 12.5px; color: var(--c-ink-3); margin-bottom: 14px; }
.cmty-crumb a:hover { color: var(--c-accent); }
.cmty-article h1 {
  font-family: var(--c-sans); font-weight: 700;
  font-size: clamp(23px, 2.6vw, 29px); line-height: 1.25;
  letter-spacing: -0.02em; margin: 0 0 10px;
}
.cmty-byline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--c-ink-3);
  padding-bottom: 18px; border-bottom: 1px solid var(--c-line); margin-bottom: 22px;
}
.cmty-byline .who { color: var(--c-ink); font-weight: 600; }

.cmty-body { font-size: 15.5px; line-height: 1.72; color: var(--c-ink); max-width: 70ch; }
.cmty-body p { margin: 0 0 1em; }
.cmty-body ul { margin: 0 0 1em; padding-left: 1.3em; }
.cmty-body blockquote {
  margin: 0 0 1em; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--c-accent-soft); color: var(--c-ink-2);
}
.cmty-body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.cmty-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.cmty-imgs img {
  max-width: min(100%, 360px); border-radius: 14px;
  border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow);
}

.cmty-actions { display: flex; gap: 10px; align-items: center; margin: 22px 0 34px; }
.cmty-react.is-active { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); }

/* replies */
.cmty-replies h2 {
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--c-ink); margin: 0 0 4px;
}
.cmty-reply { padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.cmty-reply .head { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--c-ink-3); margin-bottom: 8px; }
.cmty-reply .head .who { color: var(--c-ink); font-weight: 600; font-size: 13.5px; }
.cmty-reply .quoted { font-size: 12px; color: var(--c-ink-3); font-style: italic; }
.cmty-reply .cmty-body { font-size: 14.5px; }
.cmty-reply .foot { display: flex; gap: 6px; margin-top: 10px; }
.cmty-reply .foot .cmty-btn { padding: 6px 12px; font-size: 12px; }
.cmty-reply.is-accepted { border-left: 3px solid var(--c-accent); padding-left: 16px; }
.cmty-accepted-tag { color: var(--c-accent); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* -- composer ---------------------------------------------------------- */
.cmty-composer { padding: 20px 22px; }
.cmty-composer h2 {
  font-family: var(--c-sans); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 14px;
}
.cmty-field { margin-bottom: 14px; }
.cmty-field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--c-ink-2); margin-bottom: 6px;
}
.cmty-input, .cmty-textarea, .cmty-select {
  width: 100%; font: 400 14.5px/1.55 var(--c-sans); color: var(--c-ink);
  background: var(--c-surface-2); border: 1px solid transparent;
  border-radius: 12px; padding: 10px 14px; outline: none; box-sizing: border-box;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.cmty-input:focus, .cmty-textarea:focus, .cmty-select:focus {
  background: var(--c-surface); border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.cmty-textarea { min-height: 150px; resize: vertical; }
.cmty-hint { font-size: 12px; color: var(--c-ink-3); margin-top: 5px; }
.cmty-error {
  background: var(--c-alert-soft); color: var(--c-alert);
  border: 1px solid color-mix(in srgb, var(--c-alert) 25%, transparent);
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.cmty-notice {
  background: var(--c-accent-soft); color: var(--c-accent);
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.cmty-upload-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cmty-upload-strip img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--c-line); }

/* -- reputation badge --------------------------------------------------- */
.cmty-member-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-accent);
  background: var(--c-accent-soft); border-radius: 999px; padding: 3px 9px;
}

/* -- structured fact card (listings / events) -------------------------- */
.cmty-facts {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: 14px; padding: 12px 16px; margin: 0 0 20px;
  box-shadow: var(--c-shadow);
}
.cmty-facts.is-resolved { border-left-color: var(--c-line-strong); opacity: .85; }
.cmty-fact {
  font-size: 13px; color: var(--c-ink-2);
  padding-right: 12px; border-right: 1px solid var(--c-line);
}
.cmty-fact:last-of-type { border-right: 0; }
.cmty-fact b { color: var(--c-ink); font-weight: 650; }
.cmty-fact--done { color: var(--c-accent); font-weight: 650; }

/* -- consent gate ------------------------------------------------------ */
.cmty-gate { max-width: 520px; margin: 40px auto; }
.cmty-gate .cmty-panel { padding: 30px 32px; }
.cmty-gate h1 { font-family: var(--c-sans); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.cmty-gate .lead { color: var(--c-ink-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; }
.cmty-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--c-ink-2); line-height: 1.55; margin: 16px 0 20px;
}
.cmty-consent input { margin-top: 3px; accent-color: var(--c-accent); }

/* -- guidelines page --------------------------------------------------- */
.cmty-doc { max-width: 720px; margin: 0 auto; }
.cmty-doc .cmty-body h2 {
  font-family: var(--c-sans); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; margin: 1.6em 0 .5em;
}

/* -- empty / warming states ------------------------------------------- */
.cmty-empty {
  text-align: center; color: var(--c-ink-3); font-size: 14.5px;
  padding: 56px 20px;
}
.cmty-empty .big { font-family: var(--c-sans); font-size: 17px; font-weight: 700; color: var(--c-ink-2); margin-bottom: 6px; }

/* -- inbox: mail-style three-pane view ---------------------------------- */
.cmty--inbox .cmty-masthead,
.cmty-inbox { max-width: 1360px; }
.cmty-inbox {
  margin: 0 auto;
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 240px;
  gap: 20px; align-items: start;
}

/* left: conversation list */
.cmty-inbox-list {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 18px; box-shadow: var(--c-shadow);
  padding: 8px;
  position: sticky; top: 20px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.cmty-convo {
  display: block; padding: 13px 14px; border-radius: 13px;
  transition: background 140ms ease;
}
.cmty-convo + .cmty-convo { margin-top: 2px; }
.cmty-convo:hover { background: var(--c-surface-2); }
.cmty-convo .head { display: flex; align-items: baseline; gap: 10px; }
.cmty-convo .title {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  line-height: 1.35; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cmty-convo .when { font-size: 11px; color: var(--c-ink-3); white-space: nowrap; }
.cmty-convo .sub { display: block; font-size: 11.5px; color: var(--c-ink-3); margin-top: 3px; }
.cmty-convo .excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px; color: var(--c-ink-3); line-height: 1.5; margin-top: 4px;
}
.cmty-convo .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: var(--c-accent); margin-right: 7px; vertical-align: 2px;
}
.cmty-convo.is-unread .title { font-weight: 700; }
/* the open conversation — solid blue card, like the reference's selected mail */
.cmty-convo.is-selected,
.cmty-convo.is-selected:hover {
  background: var(--c-accent); color: var(--c-accent-ink);
  box-shadow: 0 8px 20px -10px rgba(18, 115, 235, .6);
}
.cmty-convo.is-selected .when,
.cmty-convo.is-selected .sub,
.cmty-convo.is-selected .excerpt { color: rgba(255, 255, 255, .75); }
.cmty-convo.is-selected .dot { background: var(--c-accent-ink); }

/* middle: reading pane */
.cmty-inbox-read {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 18px; box-shadow: var(--c-shadow);
  padding: 24px 28px; min-width: 0;
}
.cmty-inbox-back { margin-bottom: 16px; }
.cmty-inbox-back a:hover { color: var(--c-accent); }
.cmty-inbox-read h1 {
  font-family: var(--c-sans); font-weight: 700; font-size: 21px;
  line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 10px;
}
.cmty-inbox-read .cmty-body { font-size: 15px; }
/* the nested composer sits inside an already-elevated panel — flatten it */
.cmty-inbox-read .cmty-composer {
  background: var(--c-surface-2); border: 0; box-shadow: none;
}
.cmty-inbox-read .cmty-input,
.cmty-inbox-read .cmty-textarea { background: var(--c-surface); }

/* right: context rail */
.cmty-inbox-rail {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 18px; box-shadow: var(--c-shadow);
  padding: 18px;
  position: sticky; top: 20px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.cmty-inbox-rail h3 {
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--c-ink); margin: 0 0 10px;
}
.cmty-inbox-rail h3 + * { margin-bottom: 18px; }
.cmty-inbox-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.cmty-inbox-photos img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--c-line);
}
.cmty-people { display: flex; flex-direction: column; gap: 4px; }
.cmty-person { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.cmty-person .ava {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-soft); color: var(--c-accent);
  font: 700 14px var(--c-sans);
}
.cmty-person .body { min-width: 0; }
.cmty-person .nm { display: block; font-size: 13px; font-weight: 600; }
.cmty-person .rl { display: block; font-size: 11.5px; color: var(--c-ink-3); }

/* inbox responsive: drop the rail, then go single-pane like a phone mail app.
   Breakpoints are viewport-based but the deck shell's left rail eats
   ~90–280px of it, so the rail drops earlier than a bare 3-pane would. */
@media (max-width: 1360px) {
  .cmty-inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .cmty-inbox-rail { display: none; }
}
@media (max-width: 900px) {
  .cmty-inbox { grid-template-columns: 1fr; }
  .cmty-inbox-list { position: static; max-height: none; }
  .cmty-inbox.has-selection .cmty-inbox-list { display: none; }
  .cmty-inbox-read { padding: 18px 16px; }
}

/* -- desktop canvas ------------------------------------------------------
   The Deck shell always reserves a right-rail grid column (deck.css), but
   community pages render no right rail — the empty column just squeezed
   the community to ~60% width. community.css loads ONLY on community
   pages, and :has() scopes this to a canvas that actually holds .cmty,
   so no other space is affected. */
.canvas-wrap:has(> .cmty) { grid-template-columns: minmax(0, 1fr); }

/* -- phone layout -------------------------------------------------------
   These rules ship in community.css, which loads ONLY on community pages,
   so overriding the Deck shell here cannot affect any other space. The
   desktop-first shell keeps its fixed rail beside the canvas even at
   phone width (content squeezes + overflows), so on small screens we
   drop the rail entirely and let the community own the full width. */
@media (max-width: 760px) {
  .shell { display: block; }
  .shell > .rail { display: none; }
  .canvas-wrap { width: 100%; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .topbar .searchbox { order: 3; flex: 1 1 100%; }

  .cmty { padding: 18px 14px 48px; }
  .cmty-hero img { max-height: 190px; border-radius: 16px; }
  .cmty-hero--space img { max-height: 140px; }
  .cmty-thread-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cmty-thread-row .stats { text-align: left; }
  .cmty-space-row { align-items: flex-start; }
  .cmty-space-row .thumb { width: 72px; height: 54px; margin-top: 2px; }
  .cmty-space-row .count { display: none; }
  .cmty-masthead h1 { font-size: 23px; }
  .cmty-article h1 { font-size: 21px; }
  .cmty-gate { margin: 16px auto; }
  .cmty-gate .cmty-panel { padding: 22px 18px; }
  .cmty-composer { padding: 16px 14px; }
}