/* ============================================================================
   Resonance — "Join a community": the one card, and the one address form inside it.
   Work Order 78, August 9 2026. Companion to assets/community-join.js.
   ============================================================================
   IT CARRIES ITS OWN STYLES BECAUSE IT IS LOADED BY TWO PAGES WITH TWO DIFFERENT
   STYLESHEETS. network.html has assets/network.css and assets/member.css; account.html has
   neither — every rule that page uses is inline in its own <style> block. A shared component
   that leaned on either of those would look right on one page and unstyled on the other, and
   pulling member.css onto the account page would have restyled its nav (both files define
   .nav, .nav-links and .nav-logo) for the sake of two font sizes. So the component brings
   what it needs, in its own `.jc-` namespace, and depends on NOTHING but the design tokens in
   assets/style.css, which every page in the product already loads.

   .jc- IS A NEW PREFIX ON PURPOSE, checked against both stylesheets before it was chosen: no
   selector in network.css, member.css or account.html's inline block begins with it, so
   loading this file changes nothing that was already on either page.

   ONE THIN WHITE CARD, COLLAPSED (Matt, August 9 2026). It is a real <details>, which is the
   same choice WO59 made for the list inside it and for the same reasons: the keyboard, the
   screen reader, the Escape key and the disclosure triangle arrive with it and none of them
   have to be written, and — the one that matters here — a shut card takes ONE LINE of the
   page. This sits above a member's own communities and must not push them off the first
   screen.
   ============================================================================ */

.jc-card { background: var(--white); border: 1px solid rgba(33,29,22,.09); border-radius: 18px;
  box-shadow: 0 6px 16px rgba(20,20,20,.05); margin: 14px 0 22px; max-width: 720px; }

/* THE HEAD IS THE WHOLE OF THE SHUT CARD: a title and one grey line saying what is inside, in
   the account page's own card grammar (.acct-cardtitle / .acct-cardline) so a member who has
   met one of these has met both. list-style: revert keeps the browser's own triangle, which is
   the affordance that says "this opens". */
.jc-head { cursor: pointer; padding: 15px 20px; list-style: revert; }
.jc-head::-webkit-details-marker { color: #8C8375; }
.jc-headline { display: block; font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 600; color: var(--ink); }
.jc-headsub { display: block; font-size: .9rem; color: var(--ink-soft); line-height: 1.5;
  margin-top: 2px; }
.jc-head:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 16px; }

/* THE BODY'S FIVE BLOCKS, separated by a hairline each. The hairline is the only thing
   dividing them: five headed panels inside one card would be a page pretending to be a card. */
.jc-body { padding: 2px 20px 20px; }
.jc-body > * + * { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(33,29,22,.09); }
/* …and a block that has nothing to say takes no room and grows no hairline (Principle 9: no
   heading over an absence). The eligible list is the one that can be genuinely empty. */
.jc-body > :empty { display: none; }

.jc-sub { font-size: .92rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.55; }
.jc-label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.jc-input { width: 100%; max-width: 340px; font: inherit; padding: 11px 15px; border-radius: 12px;
  border: 1.5px solid rgba(33,29,22,.14); background: var(--white); display: block;
  margin-bottom: 10px; box-sizing: border-box; }
.jc-input:focus { outline: none; border-color: #B4653C; box-shadow: 0 0 0 4px rgba(180,101,60,.16); }
.jc-go { max-width: 340px; }

/* THE ANSWER TAKES NO ROOM UNTIL IT HAS SOMETHING TO SAY, and it grows DOWNWARDS, so the
   Send button does not shift out from under a thumb (the rule forum.css's composer line
   already keeps). */
.jc-said { font-size: .9rem; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.55;
  max-width: 420px; }
.jc-said:empty { display: none; }

/* THE ONE-CLICK DOOR ON AN ELIGIBLE ROW (WO78 (2)). It sits beside "Get in with a code" and
   is the quieter of the two, because it is the smaller act: it asks for a code, it does not
   claim to put anybody in a room. */
.jc-mailme { font: inherit; font-size: .92rem; font-weight: 700; background: none; border: none;
  padding: 0; margin-left: 14px; cursor: pointer; color: var(--orange-deep, #B54800);
  text-decoration: underline; text-underline-offset: 3px; }
.jc-mailme:hover { color: #8F3A00; }
.jc-mailme:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.jc-mailme[disabled] { opacity: .55; cursor: default; text-decoration: none; }

/* THE ACCOUNT PAGE'S POINTER at the four blocks that live in the network page's card. A
   sentence, not a button: the act is over there and this is a direction to it. */
.jc-elsewhere { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; margin: 16px 0 0;
  max-width: 460px; }

@media (max-width: 460px) {
  .jc-head { padding: 14px 16px; }
  .jc-body { padding: 2px 16px 18px; }
  .jc-input, .jc-go { max-width: none; }
}