/* ============================================================
   community.css
   The community lane's stylesheet: the directory, one community,
   the member's own communities, and stewardship.

   PORTED, NOT DESIGNED. Every rule here is the
   first edition's, lifted out of the four <style> blocks its
   pages carried inline and collapsed into one canonical copy.
   Nothing was restyled, renamed or "improved"; the class names
   and the values are the ones the owner already directed.

   WHAT WAS COLLAPSED, since the centralization rule asks for it
   to be said out loud. Four rules existed in more than one of
   the four pages, in identical form:
       .crumb a      Community.aspx and CommunitySteward.aspx
       .inlineform   Communities.aspx, Community.aspx,
                     CommunitySteward.aspx
       .cfilters     Communities.aspx and Community.aspx
       .cmeta        Communities.aspx (as a tree meta span) and
                     Community.aspx (as an activity meta line)
   The first three were byte-identical and one copy is kept. The
   fourth was NOT: the two pages used the same class name for two
   different things, a small inline span in the tree and a block
   meta line under an announcement. Both are kept, scoped, and
   .ctree .cmeta is the tree one. Flagged as a duplicate pattern,
   because a shared class name doing two jobs is exactly what
   makes a later fix fix only one of them.

   Everything the reader's text-size control touches is in rem or
   em, and nothing holding text sits in a fixed pixel box, so
   A- / A+ reaches all of it. Checked at 150% and 200%.
   ============================================================ */

/* ---- directory: sections and the tradition tree ------------- */

/* Directory shapes reuse the account-list tokens (pklist/pkitem/pkname/pkmeta)
   plus a light tree indent for nested communities. */
.cdirsec{margin-top:18px}
.cdirsec .k{color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.ctree{margin:0;padding:0;list-style:none}
.ctree ul{margin:4px 0 4px 18px;padding:0;list-style:none;border-left:1px solid var(--edge)}
.ctree li{margin:6px 0;padding-left:10px}
.ctree .cname{font-weight:650}
.ctree .cmeta{color:var(--faint);font-size:.8rem;margin-left:6px}

/* Top-level traditions collapse by default: the full unfiltered tree renders
   at 28,000px otherwise. Same "+"/"-" disclosure marker the site already uses
   for its other details panels. */
.ctree details{margin:2px 0}
.ctree details>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctree details>summary::-webkit-details-marker{display:none}
.ctree details>summary::before{content:"+";color:var(--gold);font-family:var(--serif);font-size:1.05rem;line-height:1;width:1ch;flex:none}
.ctree details[open]>summary::before{content:"\2013"}
.ctree details>summary:hover{color:var(--gold)}

/* ---- filter rows ------------------------------------------- */

.cfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.cfilters .fld{margin:0;flex:1 1 160px}
.cfilters .fld.small{flex:0 1 110px}
/* The distance box takes a whole street address, so it gets twice the basis of
   an ordinary field and still wraps to its own line rather than squeezing the
   row. In em, not px: at 200% text the field grows with the text inside it. */
.cfilters .fld.wide{flex:2 1 20em}
/* A <select> whose width is not set sizes itself to its WIDEST option, and as
   a flex item that width becomes an automatic minimum it refuses to shrink
   below. min-width:0 releases that floor so a long option cannot set the width
   of a whole filter row; every control then fills its own field instead. */
.cfilters .fld{min-width:0}
.cfilters select,.cfilters input{width:100%;max-width:100%}
.fldhint{display:block;margin-top:4px;color:var(--faint);font-size:.75rem;line-height:1.35}

/* Tradition on its own full-width row, in both forms. It carries a couple of
   hundred options with one at fifty-five characters; a whole row is enough to
   show that in full, so nothing is clipped and no cap is needed. The list
   scrolls, as a long dropdown always has. */
.ctrad{margin:0 0 12px}
.ctrad select,#reqParent{width:100%;max-width:100%}

/* "about 3.2 mi away" on a radius result row. Same weight as the rest of the
   meta line, in the gold used for the one fact a row is being ranked by. */
.cdist{color:var(--gold-soft)}

/* ---- inline join controls ---------------------------------- */

/* Inline per-row join control (topic tree and organization search results). */
.rowjoin{display:inline-block;margin-left:8px;vertical-align:middle}
.rowjoin .btn{padding:8px 12px;font-size:.8rem}
.inlineform{display:inline;margin:0}

/* ---- one community ----------------------------------------- */

.crumb a{color:var(--gold-soft)}
.cbody p{line-height:1.7;margin:0 0 12px}
.cdet{margin:0;padding:0;list-style:none}
.cdet li{margin:5px 0;color:var(--muted)}
.cdet .k{color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;margin-right:8px}
.cmembers{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* the organization's own photo, ruling 546: same sizing tokens as the
   admin settings preview (border, radius, padding), scoped to this
   public stylesheet rather than pulling in admin.css for one rule. */
.cphoto{width:8.75em;height:8.75em;border:1px solid var(--edge);border-radius:8px;background:var(--panel);padding:.625em;display:grid;place-items:center;overflow:hidden;margin:0 0 14px}
.cphoto img{max-width:100%;max-height:100%;height:auto;display:block}

/* ---- community activity ------------------------------------ */

/* rem and em throughout and no fixed-height box around anything holding text,
   so the A- / A+ control reaches all of it and a long announcement or event
   title wraps rather than spilling. */
.cact{margin:22px 0 0;padding:16px 18px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2)}
.cacth{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin:0 0 12px}
.cannc{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--edge);min-width:0}
.cannc:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.cannc h4{font-family:var(--serif);font-size:1rem;margin:0 0 3px;line-height:1.35;overflow-wrap:anywhere}
.cpin{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 7px;vertical-align:middle}
.cact .cmeta{color:var(--faint);font-size:.8rem;line-height:1.5}
.cannb{color:var(--muted);font-size:.92rem;line-height:1.6;margin:8px 0 0;overflow-wrap:anywhere}
.cevlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.cevlist li{padding:11px 0;border-bottom:1px solid var(--edge);min-width:0}
.cevlist li:last-child{border-bottom:0;padding-bottom:0}
.cevt{font-weight:600;overflow-wrap:anywhere}
.cevt a{color:var(--ink);text-decoration:none}
.cevt a:hover{color:var(--gold)}
.cevd{color:var(--muted);font-size:.88rem;line-height:1.5;margin:5px 0 0}
/* The zone sits beside the time rather than replacing it: a congregation
   posting 7pm means 7pm where they are, and a reader elsewhere needs both. */
.czone{color:var(--faint);font-size:.78rem}

/* ---- things that were inline style attributes --------------- */

/* The first edition set these with style="..." on the element. The rule
   forbids that, and the appearance is unchanged: same values, named. */
.cnote{margin:0 0 14px}
.cnote-tight{margin:0 0 12px}
.cnote-flush{margin:0}
.cnote-top{margin-top:0}
.cnote-gap{margin-top:14px}
.cactions-flush{margin:0}
.cactions-gap{margin-top:16px}
.cjoinlink{text-decoration:none;display:inline-flex;align-items:center}

/* h1.page rather than h2.page (w1970-orgtrust, audit finding 8): the page
   had no h1 at all and no landmark for js/panel-speak.js to find, so its own
   Read This Page Aloud control never appeared and the page carried no real
   heading. campaign.css, email.css and embed.css already solved the
   identical problem the identical way: site.css only styles h2.page, so the
   tag becomes h1 here in the code-behind and this rule restates h2.page's
   own declarations, verbatim, so the two render identically. */
.adminwrap h1.page{font-family:var(--serif);font-size:2rem;margin:0 0 6px;font-weight:600}

/* ---- The moderation panel's ported forms (rp-social, 2026-08-04). The first
   edition wrote each of these inline on the element; the look is unchanged.
   .opt is the muted "(optional)" inside a field label, which contact.css
   already styles the same way for its own form. */
.adminwrap .fld label .opt{color:var(--faint);font-weight:400;font-size:.82rem}
.modhead{margin:20px 0 8px}
.modsub{margin:14px 0 8px}
.modlist{margin-top:12px}