/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The community board.

   EVERY COLOUR COMES FROM app.css's TWO PALETTES, through a token. A
   literal here is a colour that works in one theme, which is how a white
   label on a white pill reached two releases of this product -- twice.
   If a shade is needed that no token carries, the token is the thing to
   add, not a hex value in this file. */

/* BLOCK, EXPLICITLY. app.css sets `main{display:grid}` for the
   marketplace's map-and-list layout, and every page that reuses that
   stylesheet inherits it -- which put this card in a narrow column about
   a third of the width it was given. landing.css's header warns about
   exactly this; it catches the next page too. */
.cwrap{display:block;max-width:760px;margin:0 auto;padding:26px 22px 70px}

/* ---- signed in, not a member yet ---- */
.ccard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px}
.ccard h1{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.5px}
.ccard > .muted{margin:0 0 22px;max-width:60ch}

/* Three steps, and the one you are on is the only one that is bright.
   All three are visible throughout: somebody deciding whether to start
   should be able to see the whole ask, not discover a second and a third
   one after committing to the first. */
.jsteps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.jstep{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;
  padding:16px 0;border-top:1px solid var(--line);opacity:.5}
.jstep:first-child{border-top:0}
.jstep.on,.jstep.done{opacity:1}
.jstep h2{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.2px}
.jstep .muted.small{margin:0 0 12px;max-width:58ch}
.jn{width:30px;height:30px;border-radius:50%;background:var(--bg);
  color:var(--mut);border:1px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-size:14px}
.jstep.on .jn{background:var(--accent);color:var(--onfill);border-color:transparent}
.jstep.done .jn{background:var(--okbg);color:var(--ok);border-color:var(--ok)}
.jstep.done .jn::after{content:"✓"}
.jstep.done .jn{font-size:0}
.jstep.done .jn::after{font-size:15px}

.jgo{display:flex;align-items:flex-end;gap:8px;padding-bottom:2px}
.jsaid{margin:8px 0 0;font-size:13px;color:var(--ink2)}
.jsaid.bad{color:var(--crit)}
.cfoot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}

/* ---- in ---- */
.cin .ccard{max-width:620px}
.cgo{margin:20px 0 16px}
.primary.big{display:inline-block;padding:13px 26px;border-radius:10px;
  font-size:15.5px;font-weight:700;text-decoration:none}
/* A suspended member gets the sentence and not the button. A control that
   is there and refuses on press teaches nothing. */
.primary.big.off{opacity:.45;pointer-events:none}
.csusp{margin:16px 0 0;padding:11px 14px;border-radius:9px;
  background:var(--critbg);color:var(--crit);border:1px solid var(--critline);
  font-size:13.5px}

/* ---- no account ----
   The account is offered UNDER the way in to read, and quieter than it.
   Reading needs nothing; the account is for posting, and the layout says
   which of those is the point of the page. */
.gact{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:640px){
  .cwrap{padding:18px 14px 60px}
  .ccard{padding:20px 18px}
  .jstep{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .jgo{flex-direction:column;align-items:stretch}
}