/* ==========================================================================
   EARDE — Persistent community shell.
   Cool-grey, IBM Plex, "Slackware-ish" layout for in-app community pages.
   This is the canonical Earde visual direction; on this branch every rule is
   deliberately scoped under .community-shell so it can't touch the rest of the
   (still-warm) site. Hand-written, no build step — loaded only on shell pages.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   ROOT — tokens declared on the shell (not :root) so they stay contained,
   plus the multi-pane grid. Sized to the viewport minus the top command bar.
   -------------------------------------------------------------------------- */
.community-shell {
  /* cool-grey neutrals + accents (subset ported from the prototype) */
  --paper:   oklch(0.948 0.004 250);
  --panel:   oklch(0.995 0.002 250);
  --panel-2: oklch(0.972 0.004 250);
  --panel-3: oklch(0.958 0.005 250);
  --ink:     oklch(0.255 0.012 262);
  --ink-2:   oklch(0.430 0.011 262);
  --ink-3:   oklch(0.580 0.009 262);
  --line:    oklch(0.866 0.006 255);
  --line-2:  oklch(0.800 0.007 255);
  --frame:   oklch(0.300 0.012 262);
  --frame-ink: oklch(0.965 0.003 250);
  --red:     oklch(0.555 0.155 27);

  --cs-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cs-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --cs-rail-w: 232px;
  --cs-aside-w: 320px;
  --cs-nav-h: 64px;   /* approximate height of the layout top command bar */

  display: grid;
  grid-template-columns: 64px var(--cs-rail-w) 1fr;
  height: calc(100dvh - var(--cs-nav-h));
  overflow: hidden;
  font-family: var(--cs-sans);
  color: var(--ink);
  background: var(--paper);
}
.community-shell.with-aside {
  grid-template-columns: 64px var(--cs-rail-w) 1fr var(--cs-aside-w);
}
.community-shell a { color: var(--red); text-decoration: none; }
.community-shell a:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   COL 1 — community / server rail
   -------------------------------------------------------------------------- */
.community-shell .cs-rail {
  background: var(--frame);
  border-right: 1px solid var(--frame);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 12px 0; overflow-y: auto;
}
.community-shell .cs-rail-item {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--cs-mono); font-weight: 700; font-size: 14px;
  color: oklch(0.85 0.01 255); background: oklch(0.36 0.012 262);
  border: 1px solid oklch(0.42 0.012 262); border-radius: 3px;
  position: relative;
}
.community-shell .cs-rail-item:hover { background: oklch(0.42 0.012 262); color: #fff; }
.community-shell .cs-rail-item.active { border-color: var(--red); color: #fff; }
.community-shell .cs-rail-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; background: var(--red); border-radius: 0 2px 2px 0;
}

/* --------------------------------------------------------------------------
   COL 2 — community sidebar (channel + forum-section lists)
   -------------------------------------------------------------------------- */
.community-shell .cs-side {
  background: var(--panel-2);
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; overflow: hidden;
}
.community-shell .cs-side-head {
  padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: var(--panel);
}
.community-shell .cs-side-name {
  font-family: var(--cs-mono); font-weight: 700; font-size: 15px; color: var(--ink);
}
.community-shell .cs-side-slug { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.community-shell .cs-side-scroll { flex: 1; overflow-y: auto; padding: 10px 8px; }

.community-shell .cs-group { margin-bottom: 14px; }
.community-shell .cs-group-label {
  font-family: var(--cs-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 8px;
}
.community-shell .cs-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 2px;
  font-size: 14px; color: var(--ink-2);
  border: 1px solid transparent;
}
.community-shell .cs-item:hover { background: var(--panel-3); color: var(--ink); }
.community-shell .cs-item.active {
  background: var(--panel); border-color: var(--line-2); color: var(--ink); font-weight: 600;
}
.community-shell .cs-item-sigil { font-family: var(--cs-mono); color: var(--ink-3); font-weight: 600; }
.community-shell .cs-item.active .cs-item-sigil { color: var(--red); }
.community-shell .cs-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-shell .cs-item-badge {
  margin-left: auto; font-family: var(--cs-mono); font-size: 10px; font-weight: 600;
  background: var(--red); color: #fff; padding: 0 5px; border-radius: 7px;
  min-width: 16px; text-align: center;
}

/* --------------------------------------------------------------------------
   COL 3 — main pane. The shell provides the column; pages fill it. .cs-main-head
   / .cs-main-body are optional slots a page can use for a sticky header + a
   scrolling body.
   -------------------------------------------------------------------------- */
.community-shell .cs-main {
  display: flex; flex-direction: column; overflow: hidden; background: var(--panel);
}
.community-shell .cs-main-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-2); background: var(--panel);
  font-family: var(--cs-mono); font-weight: 700; font-size: 16px; color: var(--ink);
}
.community-shell .cs-main-body { flex: 1; overflow-y: auto; padding: 14px 18px; }

/* --------------------------------------------------------------------------
   COL 4 — optional right pane
   -------------------------------------------------------------------------- */
.community-shell .cs-aside {
  background: var(--panel-2); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; overflow-y: auto;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — drop the aside, then the sidebar, on narrow viewports.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .community-shell.with-aside { grid-template-columns: 64px var(--cs-rail-w) 1fr; }
  .community-shell .cs-aside { display: none; }
}
@media (max-width: 820px) {
  .community-shell,
  .community-shell.with-aside { grid-template-columns: 56px 1fr; }
  .community-shell .cs-side { display: none; }
}

/* --------------------------------------------------------------------------
   CHAT CHANNEL — message stream + composer filling the main pane. Ported from
   the prototype's .chat-head/.msg/.composer, renamed cs-* and scoped here.
   SSR only on this branch: no presence/typing/live styling.
   -------------------------------------------------------------------------- */
.community-shell .cs-hash { color: var(--red); }
.community-shell .cs-ch-topic {
  font-family: var(--cs-sans); font-weight: 400; font-size: 12.5px; color: var(--ink-3);
  border-left: 1px solid var(--line-2); padding-left: 12px;
}

/* The chat body packs rows tighter than the default cs-main-body padding and pins the
   stream to the bottom when it is shorter than the viewport (newest message visible).
   margin-top:auto on the first row (not justify-content:flex-end) keeps the top of an
   overflowing stream scrollable — flex-end clips it in some engines. */
.community-shell .cs-chat-body {
  padding: 10px 0; display: flex; flex-direction: column;
}
.community-shell .cs-chat-body > :first-child { margin-top: auto; }
.community-shell .cs-msg {
  display: flex; gap: 11px; padding: 5px 18px;
}
.community-shell .cs-msg:hover { background: var(--panel-2); }
.community-shell .cs-msg-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 3px;
  font-family: var(--cs-mono); font-weight: 700; font-size: 13px;
  background: var(--panel-3); color: var(--ink-2); border: 1px solid var(--line);
}
.community-shell .cs-msg-body { flex: 1; min-width: 0; }
.community-shell .cs-msg-meta { display: flex; align-items: baseline; gap: 8px; }
.community-shell .cs-msg-author { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.community-shell .cs-msg-time { font-family: var(--cs-mono); font-size: 11px; color: var(--ink-3); }
.community-shell .cs-msg-text {
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.community-shell .cs-msg-deleted { font-style: italic; color: var(--ink-3); }
.community-shell .cs-msg-empty { padding: 24px 18px; color: var(--ink-3); font-size: 14px; }

.community-shell .cs-composer {
  flex-shrink: 0; border-top: 1px solid var(--line-2); background: var(--panel); padding: 12px 16px;
}
.community-shell .cs-composer form { display: flex; gap: 10px; align-items: flex-end; }
.community-shell .cs-composer textarea {
  flex: 1; border: 1px solid var(--line-2); border-radius: 2px; background: var(--panel-2);
  font-family: var(--cs-sans); font-size: 14.5px; color: var(--ink);
  padding: 9px 12px; min-height: 22px; resize: vertical; outline: none;
}
.community-shell .cs-composer textarea:focus { border-color: var(--red); }
.community-shell .cs-send {
  flex-shrink: 0; cursor: pointer; border: 1px solid var(--red); border-radius: 2px;
  background: var(--red); color: #fff; font-family: var(--cs-sans); font-weight: 600;
  font-size: 14px; padding: 9px 18px;
}
.community-shell .cs-send:hover { filter: brightness(1.05); }
.community-shell .cs-composer-note {
  margin-top: 6px; font-family: var(--cs-mono); font-size: 11px; color: var(--ink-3);
}
/* Anon / non-member prompt reuses the composer frame but lays out inline. */
.community-shell .cs-composer-prompt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2);
}
.community-shell .cs-composer-prompt form { display: inline-flex; }