.community-page { background: #fff; color: #292c30; }
.content-shell[hidden], .embedded-community[hidden] { display: none; }
.community-layout.embedded-community { margin-top: 0; margin-bottom: 0; padding-top: 32px; padding-bottom: 48px; align-content: start; }
.embedded-community .community-intro .demo-note { font-size: 12px; color: #999; }
.community-header { max-width: 1180px; margin: auto; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.community-brand { font-size: 18px; font-weight: 800; }
.community-brand span { font-size: 13px; font-weight: 400; color: #888; margin-left: 18px; }
.demo-note { font-size: 12px; color: #999; }
.community-layout { max-width: 1180px; margin: 40px auto 72px; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 40px; }
.community-main, .community-aside { min-width: 0; }
.community-intro { margin-bottom: 32px; }
.small-label { color: #888; font-size: 11px; font-weight: 600; margin: 0 0 12px; }
.community-intro h1 { font-size: 32px; line-height: 1.4; white-space: normal; text-shadow: none; font-weight: 700; }
.community-intro > p:last-child { color: #858585; font-size: 14px; margin: 12px 0 0; }
.community-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.community-section-heading h2 { font-size: 19px; font-weight: 650; margin: 0; }
.community-create-post { display:inline-flex; align-items:center; justify-content:center; min-width:104px; height:38px; padding:0 17px; border-radius:6px; background:#355844; color:#fff!important; font-size:13px; font-weight:600; text-decoration:none; }
.community-create-post:hover { background:#294b38; }
.subtle { color: #999; font-size: 12px; line-height: 1.7; }
.community-digest { padding: 26px 28px; background: var(--wiki-surface); border-radius: 4px; margin-bottom: 42px; }
.ai-label { font-size: 11px; color: var(--wiki-accent); white-space: nowrap; }
.digest-lead { font-size: 16px; line-height: 1.7; margin: 0 0 20px; color: #333; }
.digest ul { list-style: none; padding: 0; margin: 0; }
.digest li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; font-size: 13px; line-height: 1.9; color: #777; margin: 10px 0; }
.digest li strong { color: #444; font-weight: 500; }
.quiet-link { display: inline-block; margin-top: 18px; font-size: 12px; color: var(--wiki-accent); }
.post-filters { display: flex; gap: 28px; border-bottom: 1px solid #eee; padding-bottom: 14px; }
.post-filters button { border: 0; background: transparent; color: #999; padding: 6px 0; font-size: 14px; cursor: pointer; }
.post-filters button.active { color: var(--wiki-accent); font-weight: 600; }
.player-post { padding: 26px 0; border-bottom: 1px solid #f1f1f1; }
.player-post[hidden] { display: none; }
.post-meta { display: flex; align-items: center; gap: 9px; color: #777; font-size: 12px; }
.post-meta > span:not(.avatar) { color: #aaa; }
.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edeaf0; color: #89748d; font-size: 12px; }
.avatar.sage { background: #e9efeb; color: #6c8a77; }
.avatar.rose { background: #f8eeeb; color: #af8375; }
.post-meta .post-tag { margin-left: auto; }
.post-title { display: block; border: 0; background: transparent; color: #303236; padding: 0; margin: 16px 0 10px; text-align: left; font-size: 18px; line-height: 1.6; font-weight: 600; cursor: pointer; }
.post-title:hover { color: var(--wiki-accent); }
.player-post > p { color: #888; font-size: 14px; line-height: 1.85; margin: 0; }
.post-bottom { display: flex; gap: 20px; font-size: 12px; color: #aaa; margin-top: 18px; }
.group-digest { background: var(--wiki-surface); padding: 24px; border-radius: 4px; }
.group-digest .community-section-heading { margin-bottom: 8px; }
.group-topic { display: grid; grid-template-columns: 22px 1fr; gap: 12px; margin-top: 24px; }
.group-topic > span { font-size: 12px; color: #999; padding-top: 3px; }
.group-topic h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.group-topic p { color: #777; font-size: 13px; line-height: 1.9; margin: 0; }
.gallery-section { margin-top: 36px; }
.gallery-tile { display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--wiki-surface); cursor: pointer; text-align: left; }
.gallery-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform 180ms ease; }
.gallery-tile.landscape img { aspect-ratio: 1.65; object-fit: cover; }
.gallery-tile:hover img { transform: scale(1.025); }
.gallery-tile > span { display: block; padding: 12px 14px; font-size: 13px; color: #555; }
.gallery-tile small { float: right; color: #999; font-size: 11px; }
.gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.asset-note { color: #aaa; font-size: 11px; line-height: 1.7; margin-top: 16px; }
.community-footer { background: #14191c; color: #ddd; display: flex; align-items: center; gap: 24px; padding: 32px max(20px, calc((100% - 1180px) / 2)); font-size: 12px; }
.community-footer span { color: #949c9f; }
.community-footer a { margin-left: auto; color: #949c9f; }
dialog { width: min(680px, calc(100% - 32px)); max-height: 85vh; padding: 36px; border: 0; border-radius: 8px; color: #333; box-shadow: 0 20px 80px #0003; }
dialog::backdrop { background: #16202699; }
.community-dialog-backdrop{position:fixed;inset:0;z-index:80;background:#16202699;backdrop-filter:blur(2px)}
#community-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;z-index:81}
.dialog-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3f3f3; font-size: 24px; color: #777; cursor: pointer; }
dialog img { display: block; max-height: 60vh; width: 100%; object-fit: contain; }
dialog h2 { font-size: 22px; line-height: 1.6; margin-top: 10px; }
dialog p { font-size: 14px; line-height: 1.9; color: #777; }
.community-page button:focus-visible, .community-page a:focus-visible { outline: 2px solid #d56269; outline-offset: 4px; }
@media (max-width: 1220px) { .community-header { margin-inline: 24px; } .community-layout { margin-inline: 24px; gap: 36px; } }
@media (max-width: 860px) { .community-layout { grid-template-columns: 1fr; } .community-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .gallery-section { margin-top: 0; } .posts-section > .community-section-heading .subtle { display: none; } }
@media (max-width: 540px) { .community-header { margin-inline: 18px; flex-wrap: wrap; gap: 10px; } .community-layout { margin: 28px 18px 40px; } .community-intro h1 { font-size: 25px; } .community-digest { padding: 22px 18px; } .digest li { grid-template-columns: 1fr; gap: 0; margin-top: 16px; } .community-section-heading { flex-wrap: wrap; } .community-aside { grid-template-columns: 1fr; } .post-title { font-size: 17px; } .post-meta { gap: 6px; font-size: 11px; } .community-footer { flex-wrap: wrap; gap: 12px; } .community-footer a { margin-left: 0; } dialog { padding: 36px 22px 22px; } }

.community-modal-open { overflow:hidden; }
#community-dialog.post-detail-dialog { width:min(928px,calc(100% - 32px)); max-height:90dvh; padding:0; border-radius:16px; overscroll-behavior:contain; }
.post-detail-dialog .dialog-close { position:sticky; float:right; top:12px; margin:12px 16px -48px 0; z-index:3; }
.post-detail-header { position:sticky; top:0; z-index:2; display:flex; gap:20px; align-items:center; background:#fffffff5; border-bottom:1px solid #edf0ee; padding:23px 68px 23px 24px; color:#566a60; font-size:13px; }
.post-detail-header small { color:#9aa49e; font-size:11px; }
.post-detail-body { padding:24px 24px 32px; }
.post-detail-body h2 { font-size:26px; line-height:1.5; color:#293c32; margin:0 0 22px; }
.detail-author { display:flex; align-items:center; gap:12px; margin-bottom:26px; font-size:13px; }
.detail-author small { display:block; color:#98a09b; font-size:11px; margin-top:5px; }
.discussion-avatar { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:#edf2ee; color:#668170; display:grid; place-items:center; font-size:13px; }
.post-detail-body > p { color:#526158; font-size:15px; line-height:1.9; }
.post-media { margin:22px 0; }
.post-media > img,.post-media video { display:block; width:100%; max-height:420px; border-radius:10px; background:#f2f5f3; object-fit:contain; }
.post-media video { aspect-ratio:16/9; background:#18231e; }
.post-media figcaption { color:#919c95; font-size:11px; margin-top:9px; text-align:center; }
.post-formation { display:flex; justify-content:center; gap:24px; padding:24px; background:#f4f6f4; border-radius:10px; }
.post-formation img { width:23%; height:210px; object-fit:contain; }
.post-engagement { display:flex; align-items:center; gap:12px; margin:30px 0; padding-bottom:28px; border-bottom:1px solid #e9eeea; }
.post-detail-dialog button { cursor:pointer; font-family:inherit; }
.post-engagement button { border:1px solid #dfe8e1; background:#fff; color:#567461; border-radius:7px; padding:10px 17px; }
.post-engagement button[aria-pressed=true] { background:#eaf2ec; border-color:#b5cdbd; }
.post-engagement > span { margin-left:auto; font-size:11px; color:#98a09b; }
.discussion-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.discussion-heading h3 { margin:0; font-size:19px; color:#30483a; }
.discussion-heading h3 span { margin-left:8px; color:#96a199; font-size:14px; }
.discussion-heading button,.comment-actions button,#reply-target button { background:none; border:0; color:#8a978e; padding:6px 10px; font-size:12px; }
.discussion-heading button[aria-pressed=true],.comment-actions button[aria-pressed=true] { color:#326b49; font-weight:600; }
#comment-form label { display:block; font-size:13px; color:#627368; margin-bottom:10px; }
#community-comment { box-sizing:border-box; width:100%; padding:14px; resize:vertical; max-height:220px; min-height:90px; border:1px solid #e0e7e2; border-radius:8px; background:#fafbf9; font:inherit; font-size:14px; color:#334c3d; }
#community-comment:focus { outline:2px solid #a6bbad; outline-offset:1px; }
.composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.composer-bottom span { font-size:11px; color:#9aa39d; }
.composer-bottom button { background:#355844; color:#fff; padding:9px 18px; border:0; border-radius:6px; }
#comment-status { margin:6px 0; font-size:12px; color:#547b61; }
.discussion-comment { display:flex; gap:13px; padding:22px 0; border-bottom:1px solid #eef1ee; }
.discussion-comment > div { flex:1; min-width:0; }
.discussion-meta { display:flex; gap:12px; align-items:center; font-size:13px; color:#4d6355; }
.discussion-meta span { font-size:11px; color:#a0a8a2; }
.discussion-comment p { margin:8px 0; color:#5e6b62; white-space:pre-wrap; overflow-wrap:anywhere; }
.comment-actions { display:flex; gap:10px; }
.comment-actions button { padding:2px 0; }
.reply-context,#reply-target { color:#7f9185; font-size:12px; }
@media(max-width:600px) {
 #community-dialog.post-detail-dialog { width:calc(100% - 16px); max-height:94dvh; border-radius:12px; }
 .post-detail-header { padding:20px 55px 20px 18px; gap:12px; }
 .post-detail-header small { font-size:10px; }
 .post-detail-body { padding:22px 18px; }
 .post-detail-body h2 { font-size:21px; }
 .post-engagement { flex-wrap:wrap; }
 .post-engagement > span { width:100%; margin:0; }
 .post-formation { gap:10px; padding:16px 8px; }
 .post-formation img { height:150px; width:28%; }
}

/* Clip the scrollbar inside the rounded modal shell. */
#community-dialog.post-detail-dialog { overflow:hidden; }
.post-detail-dialog #dialog-content { max-height:90dvh; overflow-y:auto; overscroll-behavior:contain; }
.post-detail-dialog .dialog-close { position:absolute; top:12px; right:16px; margin:0; float:none; }
@media(max-width:600px) { .post-detail-dialog #dialog-content { max-height:94dvh; } }