/* ==========================================================================
   community.crewbyte.io
   Loaded after base.css and site.css.

   Design position: this is a trade forum, not a social network. The things it
   borrows from Reddit and Discord — vote scores, avatars everywhere, coloured
   usernames, karma — all push the same behaviour, which is posting for
   attention. An operations community wants the opposite: fewer, longer, more
   specific posts from people willing to say what actually happened on their
   site.

   So the ranking signals are deliberately absent. What is loud instead:

     1. Who is talking, and whether they run one site or ten. The badge and the
        organisation name do more work here than any score would.
     2. Whether a thread has an answer. "Answered" and "From CrewByte" are the
        only two flags that get colour.
     3. The text. Everything else is hairlines and space.
   ========================================================================== */

body.cmy {
  background: var(--paper);
  color: var(--ink-600);
}

.cmy .wrap { padding-inline: clamp(16px, 4vw, 32px); }

/* ------------------------------------------------------------------- nav */
.cmy-nav .brand { display: flex; align-items: center; gap: var(--s3); }
.cmy-nav__tag {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  border: 1px solid rgba(53, 183, 154, .4);
  border-radius: 999px;
  padding: 3px 9px;
}
.site-nav__links a.is-active { color: #F8F7F4; }

.cmy-bell { position: relative; }
.cmy-bell b {
  display: inline-block;
  margin-left: 5px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  text-align: center;
}

/* The tab bar the header collapses into. Sticky, because a forum is a place
   you move around in rather than a page you read once. */
.cmy-tabs { display: none; }
@media (max-width: 860px) {
  .cmy-tabs {
    display: flex;
    gap: 2px;
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0 clamp(12px, 3vw, 20px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cmy-tabs::-webkit-scrollbar { display: none; }
  .cmy-tabs a {
    flex: 0 0 auto;
    padding: 13px 12px;
    font-size: .875rem;
    font-weight: 560;
    color: var(--ink-400);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .cmy-tabs a.is-active { color: var(--ink-900); border-bottom-color: var(--accent); }
}

.cmy-strip {
  padding: 12px 0;
  font-size: .875rem;
  color: var(--ink-500);
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------ hero */
.cmy-hero {
  background: var(--ink-900);
  color: rgba(248, 247, 244, .74);
  padding-block: clamp(40px, 6vw, 72px);
}
.cmy-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.032em;
  color: #F8F7F4;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.cmy-hero__sub { font-size: 1.0625rem; line-height: 1.6; max-width: 54ch; }
.cmy-hero__note { color: rgba(248, 247, 244, .5); margin-top: var(--s4); max-width: 52ch; }
.cmy-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .cmy-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

.cmy-rules {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-md);
  padding: var(--s5);
}
.cmy-rules h2 { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: var(--s4); }
.cmy-rules .ticks li { color: rgba(248, 247, 244, .72); font-size: .875rem; }
.cmy-rules .tiny { margin-top: var(--s4); }

/* --------------------------------------------------------------- layout */
.cmy-section { padding-block: clamp(32px, 5vw, 56px); }
.cmy-page { padding-block: clamp(28px, 4vw, 48px); max-width: 1100px; }
.cmy-page__head { margin-bottom: var(--s6); }
.cmy-page h1 { font-size: clamp(1.5rem, 3vw, 2.125rem); letter-spacing: -.028em; margin-bottom: var(--s3); }
.cmy-page__sub { color: var(--ink-400); max-width: 68ch; line-height: 1.6; }
.cmy-h { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); margin-bottom: var(--s4); }
.cmy-crumb { font-size: .8125rem; margin-bottom: var(--s3); }
.cmy-muted { color: var(--ink-300); }

.cmy-split { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1000px) {
  .cmy-split { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; }
}

/* ---------------------------------------------------------------- pinned */
.cmy-pins { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .cmy-pins { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.cmy-pin {
  display: block;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.cmy-pin:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cmy-pin h3 { font-size: 1rem; letter-spacing: -.015em; color: var(--ink-900); margin-bottom: var(--s2); }
.cmy-pin .tiny { color: var(--ink-300); }
.cmy-pin--official { border-left: 3px solid var(--accent); }

/* ------------------------------------------------------------- listings */
.cmy-list { list-style: none; margin: 0; padding: 0; }
.cmy-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.cmy-row:first-child { border-top: 0; }
.cmy-row__main { flex: 1 1 auto; min-width: 0; }
.cmy-row__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 580;
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--ink-900);
  text-decoration: none;
  margin-bottom: 4px;
}
.cmy-row__title:hover { color: var(--accent); }
.cmy-row__meta { font-size: .8125rem; color: var(--ink-300); line-height: 1.5; }
.cmy-row__meta a { color: var(--ink-400); }
.cmy-row__count { flex: 0 0 auto; text-align: right; min-width: 60px; }
.cmy-row__count b { display: block; font-size: 1.0625rem; font-weight: 640; color: var(--ink-700); }
.cmy-row__count span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-200); }

.cmy-flag {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-400);
  vertical-align: middle;
  margin-right: 6px;
}
.cmy-flag--official { background: var(--accent); color: #fff; }
.cmy-flag--solved { background: #DCEEE9; color: #0F6E5A; }
.cmy-flag--hidden { background: #F6DFDC; color: #97302A; }

.cmy-org {
  font-size: .75rem;
  color: var(--ink-300);
  border-left: 1px solid var(--line-strong);
  padding-left: 7px;
  margin-left: 4px;
}

/* ------------------------------------------------------------ categories */
.cmy-cats { list-style: none; margin: 0; padding: 0; }
.cmy-cats li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.cmy-cats li:first-child { border-top: 0; }
.cmy-cats a { display: flex; justify-content: space-between; gap: var(--s3); text-decoration: none; }
.cmy-cats__name { font-weight: 560; color: var(--ink-900); }
.cmy-cats__n { font-size: .8125rem; color: var(--ink-300); font-variant-numeric: tabular-nums; }
.cmy-cats .tiny { color: var(--ink-300); margin-top: 2px; }

/* ---------------------------------------------------------------- thread */
.cmy-thread { padding-block: clamp(24px, 4vw, 40px); max-width: 820px; }
.cmy-thread__head { margin-bottom: var(--s6); }
.cmy-thread h1 { font-size: clamp(1.5rem, 3.2vw, 2.125rem); line-height: 1.2; letter-spacing: -.026em; margin-bottom: var(--s3); }
.cmy-thread__meta { font-size: .875rem; color: var(--ink-300); }
.cmy-tags { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); }
.cmy-tags a { font-size: .75rem; color: var(--ink-400); text-decoration: none; background: var(--paper-sunk); padding: 3px 9px; border-radius: 999px; }
.cmy-tags a:hover { color: var(--accent); }

.cmy-post { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.cmy-post:first-of-type { border-top: 0; }
.cmy-post--official {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--s5);
  margin-block: var(--s5);
}
.cmy-post--solution { background: #F4FAF8; border-radius: var(--r-sm); padding-inline: var(--s5); }
.cmy-post--muted { opacity: .72; }

.cmy-official, .cmy-solved {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s3);
}
.cmy-post__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.cmy-post__name { font-weight: 620; color: var(--ink-900); text-decoration: none; font-size: .9375rem; }
.cmy-post__when { font-size: .8125rem; color: var(--ink-300); text-decoration: none; margin-left: auto; }
.cmy-post__edited { font-size: .75rem; color: var(--ink-200); font-style: italic; }

.cmy-badge {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-400);
}
.cmy-badge--owner { background: #E4EFEB; color: #0F6E5A; }
.cmy-badge--moderator,
.cmy-badge--admin { background: var(--ink-900); color: #F8F7F4; }

/* The post body. Generous measure and leading — people paste temperature logs
   and half a procedure in here, and it has to survive that. */
.cmy-body { font-size: 1rem; line-height: 1.68; color: var(--ink-700); }
.cmy-body p { margin-bottom: var(--s4); }
.cmy-body p:last-child { margin-bottom: 0; }
.cmy-body h2 { font-size: 1.1875rem; margin: var(--s5) 0 var(--s3); letter-spacing: -.018em; }
.cmy-body h3 { font-size: 1.0625rem; margin: var(--s5) 0 var(--s3); }
.cmy-body ul, .cmy-body ol { margin: 0 0 var(--s4) var(--s5); }
.cmy-body li { margin-bottom: 6px; }
.cmy-body blockquote {
  border-left: 2px solid var(--line-strong);
  padding-left: var(--s4);
  margin: 0 0 var(--s4);
  color: var(--ink-400);
}
.cmy-body pre {
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: var(--s4);
  overflow-x: auto;
  margin-bottom: var(--s4);
}
.cmy-body code { font-family: var(--font-mono); font-size: .875em; }
.cmy-body :not(pre) > code { background: var(--paper-sunk); padding: 2px 5px; border-radius: 4px; }
.cmy-body img { max-width: 100%; height: auto; border-radius: var(--r-xs); border: 1px solid var(--line); }
.cmy-body--small { font-size: .9375rem; }

.cmy-post__foot { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.cmy-act {
  font: inherit;
  font-size: .8125rem;
  font-weight: 560;
  color: var(--ink-400);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.cmy-act:hover { color: var(--ink-900); border-color: var(--line-strong); }
.cmy-act--quiet { border-color: transparent; color: var(--ink-200); }
.cmy-act--mod { border-color: #E2C4C0; color: #97302A; }

.cmy-edit, .cmy-report, .cmy-reportmember { margin-top: var(--s4); padding: var(--s4); background: var(--paper-sunk); border-radius: var(--r-sm); }

/* -------------------------------------------------------------- composer */
.cmy-reply, .cmy-form { margin-top: var(--s6); }
.cmy-composer { font-family: var(--font-mono); font-size: .875rem; line-height: 1.6; }
.cmy-draft { min-height: 1.2em; }
.cmy-draft.is-saved { color: var(--accent); }

.cmy-note {
  padding: var(--s5);
  background: var(--paper-sunk);
  border-radius: var(--r-sm);
  margin-block: var(--s5);
  font-size: .9375rem;
  line-height: 1.6;
}
.cmy-note--warn { background: #FBF3E8; border-left: 3px solid var(--warn); }
.cmy-cta { border-left: 3px solid var(--accent); }
.cmy-note p { margin-bottom: var(--s2); }
.cmy-note p:last-child { margin-bottom: 0; }

.cmy-empty {
  padding: clamp(28px, 5vw, 48px) var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--ink-400);
}
.cmy-empty .strong { color: var(--ink-700); margin-bottom: var(--s2); display: block; }
.cmy-empty p { max-width: 52ch; margin-inline: auto; line-height: 1.6; }

.cmy-search { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.cmy-search .input { flex: 1 1 240px; }

.cmy-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); }

/* --------------------------------------------------------------- profile */
.cmy-profile { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; margin-bottom: var(--s6); }
.cmy-profile__meta { font-size: .875rem; color: var(--ink-300); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.cmy-profile__bio { margin-top: var(--s3); max-width: 56ch; color: var(--ink-500); }
.cmy-profile__counts { display: flex; gap: var(--s6); }
.cmy-profile__counts dt { font-size: 1.5rem; font-weight: 660; color: var(--ink-900); letter-spacing: -.03em; }
.cmy-profile__counts dd { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-300); }

/* ------------------------------------------------------------ moderation */
.cmy-mod { margin-bottom: var(--s7); }
.cmy-count { font-size: .75rem; color: var(--ink-300); font-variant-numeric: tabular-nums; }
.cmy-card {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  margin-bottom: var(--s4);
}
.cmy-quote {
  border-left: 2px solid var(--line-strong);
  padding-left: var(--s4);
  margin: var(--s3) 0;
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.6;
}
.cmy-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.cmy-inline { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; flex: 1 1 320px; }
.cmy-inline .input { flex: 1 1 200px; }

.cmy-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cmy-table th {
  text-align: left;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-300);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
.cmy-table td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }

.cmy-log { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.cmy-log li { padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--ink-500); }
.cmy-log li:first-child { border-top: 0; }
.cmy-log__who { font-weight: 600; color: var(--ink-700); margin-right: 6px; }

.cmy-modbar { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.cmy-modbar__row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.cmy-prose h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: var(--s6) 0 var(--s3); }
.cmy-prose p { margin-bottom: var(--s4); line-height: 1.7; max-width: 68ch; }
.cmy-prose .ticks { margin-bottom: var(--s4); }

.cmy-notes { list-style: none; margin: 0; padding: 0; }
.cmy-note-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.cmy-note-row:first-child { border-top: 0; }
.cmy-note-row.is-unread { font-weight: 560; }
.cmy-note-row.is-unread::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; margin-top: 8px; }

.cmy-foot { margin-top: clamp(48px, 7vw, 96px); }