/* Community tab: one board of short posts. Colours come from the page's variables; the Kakao button and the
   profile colours are the same in both themes (scripts/build-light-theme.mjs keeps them). */
.community-view .mobile-result{display:none!important}
.community-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.community-heading h1{margin:0}
/* On one line, with room between its pieces (the owner's requests of 2026-10-15): a long name is cut short, and on
   a narrow phone the buttons are a little smaller rather than wrapped onto a second line. The buttons stand a little
   further from the name than from each other. */
.community-account{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0;max-width:100%}
.community-account>:not(button)+button{margin-left:6px}
.community-account>*{flex:none}
.community-account strong{flex:0 1 auto;min-width:2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* With every mark at once (운영자, 오픈톡 인증, the nickname before) the marks give way too, after the name, so the
   buttons always stay on the screen. */
.community-account :is(.community-badge,.community-previous){flex:0 1 auto;min-width:1.6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-account strong{flex-shrink:50}
.community-account button{white-space:nowrap}
@media(max-width:480px){.community-account{gap:8px}.community-account button{padding-inline:10px;font-size:12px}.community-account>:not(button)+button{margin-left:4px}.community-account>.community-previous{display:none}}
@media(max-width:400px){.community-account{gap:6px}.community-account button{padding-inline:7px;font-size:11.5px}.community-account>:not(button)+button{margin-left:0}.community-account>.community-avatar{display:none}}
.community-account button[aria-pressed=true]{background:var(--selected);color:var(--button-text)}
.community-status{margin:0}
.community-status:not(:empty){margin-bottom:14px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--soft);font-size:13px}
/* The list and the menu cards beside it. The list takes what room there is up to its own width; the cards take
   the rest, and go under the list when there is not enough for both. */
/* The community is as wide as every other menu (the page's own width and margins; for a while it took the whole
   window, 2026-10-10 to 10-12). The list of posts and the cards share that width, the cards side by side as far as
   there is room. The visitor can change this: the edge between the list and the cards, and the right and bottom
   edges of each card, are dragged (community-sizes.mjs). */
/* The price views, across the top of the tab. */
.community-prices{margin-bottom:8px}
.community-layout{display:flex;align-items:flex-start}
/* The ways to the cards: only where the cards lie under the list (a phone, a narrow window). */
.community-jump{display:none}
.community-board{flex:3 1 520px;min-width:0;max-width:900px;margin-bottom:0}
.community-layout[data-split] .community-board{flex:0 1 var(--community-board);max-width:none}
.community-cards{flex:2 1 380px;min-width:300px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
/* An edge to drag. It is a strip wider than the line it shows, so it is easy to take hold of; the line shows
   when it is pointed at, focused or being dragged. */
.community-size{position:absolute;z-index:2;touch-action:none}
.community-size::after{content:'';position:absolute;border-radius:2px;background:transparent}
.community-size[data-edge=right]{top:10px;bottom:10px;right:-7px;width:14px;cursor:ew-resize}
.community-size[data-edge=right]::after{top:0;bottom:0;left:5px;width:4px}
.community-size[data-edge=bottom]{left:10px;right:10px;bottom:-7px;height:14px;cursor:ns-resize}
.community-size[data-edge=bottom]::after{left:0;right:0;top:5px;height:4px}
.community-size:is(:hover,:focus-visible,[data-dragging])::after{background:var(--muted)}
.community-size:focus-visible{outline:none}
.community-split{position:relative;flex:0 0 20px;align-self:stretch;top:auto;bottom:auto;right:auto;width:auto;min-height:120px}
.community-split[data-edge=right]::after{top:10px;bottom:10px;left:8px}
.community-sizing{user-select:none;-webkit-user-select:none}
.community-sizing iframe{pointer-events:none}
@media(max-width:1000px){
  .community-jump{display:flex;gap:6px;margin:0 0 14px;padding-bottom:4px;overflow-x:auto;scrollbar-width:thin}
  .community-jump[hidden]{display:none}
  .community-jump button{flex:0 0 auto;min-height:44px;padding:0 13px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:13px;white-space:nowrap}
  .community-layout{flex-direction:column;align-items:stretch;gap:20px}
  .community-split{display:none}
  .community-board,.community-layout[data-split] .community-board{flex:0 1 auto;max-width:none}
  .community-cards{flex:0 1 auto;min-width:0}
}
.community-card{position:relative;display:flex;flex-direction:column;flex:1 1 330px;min-width:0;max-width:100%;padding:16px 18px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.community-card[data-width]{flex:0 1 var(--card-width)}
/* A card given a height is never shorter than what it has to show: its fixed parts and a few rows of its list
   (or a useful piece of the preview). A height asked for below that gives that. */
.community-card[data-height]{height:var(--card-height);min-height:min-content}
.community-card[data-height] .community-ref-scroll{flex:1 1 0;max-height:none;min-height:132px}
.community-card[data-height] .community-card-frame{flex:1 1 0;height:auto;min-height:240px}
@media(max-width:700px){.community-card .community-size[data-edge=right]{display:none}.community-card[data-width]{flex:1 1 330px}}
.community-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-6px -10px 2px 0}
.community-card-head h2{margin:0;font-size:15px;overflow-wrap:anywhere}
.community-card-head h2:focus-visible{outline-offset:3px}
.community-card-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;background:transparent;color:var(--muted)}
/* A guide item: in a card's list to be picked up, above the writing box once attached, and under a post. */
.community-card-kinds{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.community-card-kinds:empty{display:none}
.community-card-kinds button{min-height:44px;background:transparent;color:var(--muted)}
.community-card-kinds button[aria-pressed=true]{background:var(--selected);color:var(--button-text)}
.community-card input[type=search]{margin-top:12px;min-height:44px}
.community-ref-note{margin-top:8px}
.community-ref-scroll{max-height:336px;margin-top:6px;border-block:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;container-type:inline-size}
.community-ref-scroll[hidden]{display:none}
.community-ref-list{margin:0;padding:0;list-style:none}
.community-ref-row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 0;border-top:1px solid var(--line);cursor:grab}
.community-ref-row:first-child{border-top:0}
.community-ref-title{flex:1 1 auto;display:flex;align-items:center;gap:4px 5px;min-width:0;overflow:hidden}
/* The name gives way before the marks do. Its share is made so large that the marks' share of a shortfall is
   nothing a browser can lay out: a mark narrower by any fraction would show as cut short. */
.community-ref-title strong{flex:0 100000000 auto;min-width:3.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-ref-title strong[data-letters="1"]{min-width:1em}
.community-ref-title strong[data-letters="2"]{min-width:2em}
.community-ref-title strong[data-letters="3"]{min-width:3em}
.community-ref-marks{flex:0 1 auto;display:flex;align-items:center;gap:4px;min-width:0}
.community-ref-marks .community-chip{flex:0 1 auto;min-width:0;padding:1px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container (max-width:270px){.community-ref-title{gap:4px 3px}.community-ref-marks{gap:3px}.community-ref-marks .community-chip{padding:1px 3px}}
.community-ref-row:is(:hover,:focus-within) :is(.community-ref-title,.community-ref-marks){flex-wrap:wrap}
.community-ref-row:is(:hover,:focus-within) strong{white-space:normal;overflow-wrap:anywhere}
.community-ref-row button{flex:0 0 auto;min-height:32px;padding:0 9px;font-size:12px}
/* The list that "#" and a word in the writing box opens, under the box: the items that answer to the word. */
.community-tags-anchor{position:relative;height:0}
.community-tags{position:absolute;z-index:8;top:6px;left:0;right:0;max-height:300px;margin:0;padding:4px 0;list-style:none;border:1px solid var(--line);border-radius:8px;background:var(--soft);box-shadow:0 10px 28px #00000073;overflow-y:auto;overscroll-behavior:contain}
.community-tags[hidden]{display:none}
.community-tags-option{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;padding:6px 14px;cursor:pointer}
.community-tags-option strong{overflow-wrap:anywhere}
.community-tags-option .community-chip{flex:0 0 auto}
.community-tags-option:is(:hover,[aria-selected=true]){background:var(--selected);color:var(--button-text)}
.community-tags-note{padding:10px 14px;color:var(--muted);font-size:13px}
/* A short piece to read (a guide's entry, an effect, a way of enhancing): a row like the others, to drag and to
   put onto a post, whose name is pressed to open it. Under the name is its text, of which the start shows until
   it is opened. */
.community-brief-row{flex-wrap:wrap;gap:2px 8px;padding:7px 6px 9px 0}
.community-ref-row .community-brief-title{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0;min-height:32px;padding:0;border-radius:4px;background:transparent;color:var(--ink);font-size:14px;text-align:left;cursor:pointer}
.community-brief-title strong{overflow-wrap:anywhere}
.community-brief-title .community-chip{flex:0 0 auto}
.community-brief-text{flex:0 0 100%;min-width:0}
.community-brief-text p{margin:2px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6;overflow-wrap:anywhere}
.community-brief-row:not([data-open]) .community-brief-text p:not(:first-child){display:none}
.community-brief-row:not([data-open]) .community-brief-text p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.community-ref{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.community-ref-head{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-height:30px}
/* An outfit's items worn, folded under its picture, and the button that keeps it in one's closet. */
.community-ref-worn{margin-top:8px}
.community-ref-worn>summary{cursor:pointer;color:var(--muted);font-size:13px}
.community-ref-worn[open]>summary{margin-bottom:4px}
/* A line: the slot in bold in the title colour, the item's name in the colour of the text, every row lined up. */
.community-ref-worn>p{display:grid;grid-template-columns:4.8em minmax(0,1fr);gap:10px;align-items:baseline;margin:0;padding:5px 2px;border-top:1px solid var(--line);color:var(--ink);font-size:13px}
.community-ref-worn>p:first-of-type{border-top:0}
.community-ref-worn>p>b{color:var(--title);font-weight:700;white-space:nowrap}
.community-ref-worn>p>span{overflow-wrap:anywhere}
.community-ref-keep{margin-top:10px}
/* A name with alt nicknames: shown when it is pointed at, pressed or reached by the keyboard (2026-10-16). */
.community-name{position:relative;display:inline-flex;align-items:center;min-height:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:help}
.community-name>strong{text-decoration:underline dotted;text-decoration-color:var(--muted);text-underline-offset:4px}
.community-alts{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:5;padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.community-name:hover>.community-alts,.community-name:focus-visible>.community-alts,.community-name[aria-expanded=true]>.community-alts{display:block}
.community-faction{color:var(--title)}
.community-alts-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
/* "@" in a writing box: the nicknames to call, under the box (2026-10-16). */
.community-comment-write{position:relative}
.community-mentions-anchor{position:absolute;left:0;right:0;top:100%;z-index:6}
.community-tags-anchor .community-mentions{position:static}
.community-mentions{margin:4px 0 0;padding:4px;list-style:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.28);max-height:240px;overflow-y:auto}
.community-mention{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--ink);text-align:left;font-weight:600}
.community-mention:hover,.community-mention:focus-visible{background:var(--soft)}
/* The bell beside the account, and its list (2026-10-16). */
.community-bell-wrap{position:relative}
.community-bell{position:relative;display:inline-grid;place-items:center;min-width:42px;padding:0 10px}
.community-bell-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#c0392f;color:#ffffff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.community-bell-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(360px,calc(100vw - 32px));max-height:min(70vh,520px);overflow-y:auto;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.community-bell-panel h2{margin:0 0 8px;font-size:15px}
.community-bell-list{margin:0;padding:0;list-style:none}
.community-bell-list li{border-top:1px solid var(--line)}
.community-bell-list li:first-child{border-top:0}
.community-bell-list a{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;color:var(--ink);text-decoration:none}
.community-bell-list .community-avatar{flex:0 0 auto}
.community-bell-list a>span:not(.community-avatar){display:flex;flex-wrap:wrap;gap:2px 4px;min-width:0;font-size:13px}
.community-bell-text{flex-basis:100%;color:var(--muted);overflow-wrap:anywhere}
.community-bell-list time{flex-basis:100%;color:var(--muted);font-size:12px}
.community-bell-new a{background:var(--soft);border-radius:6px}
.community-bell-device{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.community-bell-device .community-note{margin-top:6px}
@media(max-width:520px){.community-alts-fields{grid-template-columns:1fr}}
/* Several outfits on a post, one at a time: arrows over the picture, a dot for each below it (2026-10-16). */
.community-slide-stage{position:relative}
.community-slide-stage .community-ref-stage{touch-action:pan-y}
.community-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;min-height:44px;padding:0 0 3px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:24px;line-height:1;opacity:.92}
.community-slide-prev{left:8px}
.community-slide-next{right:8px}
.community-slide-nav{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:2px}
.community-slide-dot{display:grid;place-items:center;width:24px;height:24px;min-height:24px;padding:0;border:0;background:transparent}
.community-slide-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--line)}
.community-slide-dot[aria-current=true]::before{background:var(--title)}
.community-slide-count{margin-left:6px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.community-ref-more{margin-top:6px}
.community-ref-head strong{overflow-wrap:anywhere}
/* A mark may be long (the jobs a listing is for): it takes the width there is and breaks its words, rather than
   push the page wider than a phone. */
.community-ref-head .community-ref-mark{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.community-ref>p{margin:5px 0 0;font-size:13px;overflow-wrap:anywhere}
.community-ref-see{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-7px -4px -7px 0;font-size:13px}
.community-ref .community-quiet{margin:-7px -8px -7px 0}
.community-attached:empty{display:none}
.community-attached .community-ref{margin:0 0 10px}
.community-ref-stage{display:flex;flex-direction:column;align-items:center;margin:8px 0 4px;border:1px solid var(--line);border-radius:6px;background:var(--input)}
.community-ref-failed{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin:0 0 8px;padding:0 10px}
.community-ref-failed[hidden]{display:none}
.community-ref-stage:has(.community-ref-failed:not([hidden])) .community-ref-picture{height:24px}
.community-ref-picture{display:block;width:180px;height:160px;max-width:100%;image-rendering:pixelated}
.community-card-frame{display:block;width:100%;height:560px;margin-top:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.community-card-wear{width:100%;min-height:44px;margin-top:10px}
.community-card-told:empty{display:none}
/* While a guide item is held over the writing box, the box shows it will take it. */
.community-composer[data-drop]{outline:2px dashed var(--accent);outline-offset:6px;border-radius:6px}
.community-card-result{margin:8px 0 0;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
/* The enhancement practice inside the row of the way of enhancing that is opened: the row is the whole width of
   the list, the practice's own heading and its row of ways give way to the card's, and under it is the button
   that puts the result onto a post. The list of such a card is given more height, since the practice is in it. */
.community-row-tool{flex:0 0 100%;min-width:0;margin-top:6px;padding:4px 0 10px;border-top:1px solid var(--line);cursor:auto}
.community-card-tool[hidden],.community-tool-note[hidden]{display:none}
.community-card-tool .enh-heading,.community-card-tool .enh-modes{display:none}
.community-brief-row[data-open]:has(.community-row-tool) .community-brief-text{display:none}
.community-card[data-card="growth/enhancement"] .community-ref-scroll{max-height:760px}
.community-card-open{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;border-radius:6px;background:var(--button);color:var(--button-text);font-weight:600;text-decoration:none}
.community-card-new{position:relative;flex:1 1 330px;min-width:0}
.community-card-add{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:68px;border:1px dashed var(--muted);border-radius:10px;background:transparent;color:var(--ink)}
.community-card-add[aria-expanded=true]{color:var(--button-text)}
.community-card-new[hidden]{display:none}
.community-card-menu{position:absolute;z-index:5;bottom:calc(100% + 6px);left:0;min-width:220px;max-width:100%;max-height:min(70vh,520px);box-sizing:border-box;padding:5px 0;border:1px solid var(--line);border-radius:8px;background:var(--soft);box-shadow:0 10px 28px #00000073;overflow-y:auto;overscroll-behavior:contain}
.community-card-branch{display:grid;grid-template-columns:44px minmax(0,1fr)}
.community-card-twist{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border-radius:0;background:transparent;color:var(--muted)}
.community-card-twist[aria-expanded=true] svg{transform:rotate(90deg)}
.community-card-pick{display:block;width:100%;min-height:44px;padding:0 15px 0 2px;border-radius:0;background:transparent;color:var(--button-text);text-align:left}
.community-card-taken{display:flex;align-items:center;min-height:44px;padding:0 15px 0 2px;color:var(--muted)}
.community-card-leaves{grid-column:1/-1;margin:0 0 4px 21px;border-left:1px solid var(--line)}
.community-card-leaves .community-card-pick{padding-left:24px}
/* The categories share the board's width in equal parts (the owner's request of 2026-10-15). */
.community-filters{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px;margin-bottom:18px}
.community-filters button{min-width:0;padding-inline:4px;white-space:nowrap;background:transparent;color:var(--muted)}
.community-filters button[aria-pressed=true]{background:var(--selected);color:var(--button-text)}
.community-signin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.community-signin p{margin:0;font-size:13px}
.community-signin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.community-kakao{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:0;border-radius:12px;background:#fee500;color:#000000d9;font:inherit;font-weight:600;text-decoration:none}
.community-kakao:disabled{opacity:.5;cursor:not-allowed}
/* Signing in, at the right end of the site's header, while the community is the tab that is open. */
.community-login{display:none;margin-left:auto}
.community-view .community-login{display:flex;align-items:center}
.community-login:empty{display:none}
/* The button for the page's colours stands in the header right after it. */
.community-login+.theme-cycle{margin-left:10px}
.community-note{margin:0;font-size:12px;color:var(--muted)}
.community-write-row{display:flex;gap:8px}
.community-write-row select{flex:0 0 auto;width:auto;min-height:44px}
.community-write-row input{flex:1 1 auto;min-height:44px}
.community-write-row button{flex:0 0 auto;min-height:44px}
/* The outfits of the writer's closet, under the writing box while the 옷장 button is pressed. */
.community-closet{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.community-closet:empty{display:none}
.community-closet button{min-height:40px}
.community-closet .community-note{margin:0}
.community-write-hint{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:var(--muted)}
.community-count{flex:0 0 auto;font-variant-numeric:tabular-nums}
.community-profile{display:grid;gap:10px;max-width:420px}
.community-profile h2{margin:0}
.community-profile label,.community-label{font-size:13px;font-weight:600}
.community-colors{display:flex;flex-wrap:wrap;gap:10px}
.community-colors button{width:44px;min-height:44px;padding:0;border:3px solid transparent;border-radius:50%;background:var(--avatar)}
.community-colors button[aria-pressed=true]{border-color:var(--button-text)}
.community-profile-actions{display:flex;gap:8px}
.community-profile-actions button{min-height:44px}
/* The first sign-in: what is agreed to, each line a box to tick and a link to read it whole. */
.community-consent{display:grid;gap:10px;max-width:560px}
.community-consent h2{margin:0}
.community-consent-summary{display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--soft);font-size:13px}
.community-consent-summary dt{font-weight:700}
.community-consent-summary dd{margin:0;color:var(--muted)}
.community-consent label{flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:500}
.community-consent input[type=checkbox]{flex:none}
.community-consent-all{padding:10px 0;border-bottom:1px solid var(--line);font-weight:700!important}
.community-consent-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.community-consent-items li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.community-consent-items a{font-size:12px;white-space:nowrap}
.community-consent-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.community-consent-actions button{min-height:44px}
@media(max-width:520px){.community-consent-summary{grid-template-columns:1fr}.community-consent-summary dd{margin-bottom:4px}}
.community-avatar{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--avatar);color:#14161b;font-size:13px;font-weight:700}
/* The list keeps some height when it has few posts or none (the owner's request of 2026-10-15). */
.community-feed{margin-top:18px;min-height:clamp(260px,45vh,520px)}
.community-guide-must{color:var(--ink);font-weight:650}
.community-post{padding:16px 0 6px;border-top:1px solid var(--line)}
.community-post-head{display:flex;align-items:center;gap:9px;min-width:0}
.community-post-head strong{min-width:0;overflow-wrap:anywhere}
.community-post-head time{flex:0 0 auto;margin-left:auto;font-size:12px;color:var(--muted)}
.community-chip{flex:0 0 auto;padding:1px 8px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:650}
.community-post-text{margin:10px 0 2px;font-size:15px;white-space:pre-line;overflow-wrap:anywhere}
/* In the list a post's words are the link to its own page: they look like the words they are. */
a.community-post-text{display:block;color:var(--muted);text-decoration:none}
a.community-post-text:hover,a.community-post-text:focus-visible{color:var(--ink)}
/* A post on its own page: the way back above, then the heading with who is signed in, the post and its comments. */
.community-post-page main{max-width:860px;padding-bottom:38px}
.community-post-nav{margin:0 0 18px}
.community-back{font-size:14px;font-weight:650;text-decoration:none}
.community-back:hover,.community-back:focus-visible{text-decoration:underline}
.community-post-page .community-post{padding-top:0;border-top:0}
.community-post-page .community-empty{border-top:0}
.community-post-page .community-comments{margin-top:10px}
.community-comments h2{margin:0 0 10px;font-size:14px}
.community-post-actions{display:flex;align-items:center;gap:4px}
.community-like,.community-comments-toggle,.community-quiet{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 8px;background:transparent;color:var(--muted);font-size:13px;font-weight:400}
.community-like[aria-pressed=true]{color:var(--error)}
.community-comments-toggle[aria-expanded=true],.community-quiet[aria-expanded=true]{color:var(--ink)}
.community-spacer{flex:1 1 auto}
.community-badge{flex:0 0 auto;padding:1px 7px;border:1px solid var(--accent);border-radius:7px;color:var(--accent);font-size:11px;font-weight:650}
.community-badge-staff{border-color:var(--green);color:var(--green)}
/* The nickname a member had before: beside the new one, giving way before the name does. */
.community-previous{flex:0 1 auto;min-width:0;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
/* Comments sit under their post, set in from it. */
.community-comments{margin:2px 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.community-comments ul{margin:0 0 10px;padding:0;list-style:none}
.community-comment{padding:10px 0 2px;border-top:1px solid var(--line)}
.community-comment:first-child{padding-top:0;border-top:0}
.community-comment .community-avatar{width:24px;height:24px;font-size:11px}
.community-comment-text{margin:6px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.community-comment .community-post-actions{min-height:0}
.community-comment-write{display:flex;gap:8px}
.community-comment-write input{flex:1 1 auto;min-height:44px}
.community-comment-write button{flex:0 0 auto;min-height:44px}
.community-report{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.community-report select{flex:0 1 180px;width:auto;min-height:44px}
.community-report button{min-height:44px}
.community-leave{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.community-signin .community-leave{flex:1 1 100%}
.community-danger{min-height:44px;border-color:var(--error);background:transparent;color:var(--error)}
.community-guide{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.community-guide summary{min-height:30px;font-weight:600;color:var(--ink)}
.community-guide ul{margin:8px 0 0;padding-left:18px}
.community-guide li{margin:4px 0}
/* The admin's corner: the same cards as the board, one list of reports and one of members. */
.community-admin{max-width:860px;box-sizing:border-box;margin-bottom:20px;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.community-admin[hidden]{display:none}
.community-admin h2{margin:0 0 6px}
.community-admin h3{margin:18px 0 10px;font-size:14px}
.community-admin-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.community-admin-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.community-admin-search label{font-size:13px;font-weight:600}
.community-admin-search input{flex:1 1 180px;width:auto;min-height:44px}
.community-admin-search button,.community-admin-head button{min-height:44px}
.community-admin-item{padding:14px 0;border-top:1px solid var(--line)}
.community-admin-item .community-post-head .community-note{margin-left:auto}
.community-admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.community-admin-actions button{min-height:44px}
.community-admin-actions button[aria-pressed=true]{background:var(--selected);color:var(--button-text)}
.community-empty{margin:0;padding:34px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}
.community-more{display:block;margin:14px auto 0}
.community-more[hidden]{display:none}
@media(max-width:700px){
  .community-write-row{flex-wrap:wrap}
  .community-write-row input{order:-1;flex:1 1 100%}
  .community-write-row select{flex:1 1 auto}
  .community-admin{padding:20px 17px}
  .community-ref-row button{min-width:44px;min-height:44px}
  .community-ref-row .community-brief-title{min-height:44px}
}