/* Participation borrows the original page's type, colours and control sizes. */
.community-actions { display: inline-flex; align-items: center; gap: 12px; pointer-events: auto; color: var(--muted); font-size: 11px; }
.community-actions-desktop { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
body:has(.key-dock.is-open) .community-actions-desktop { visibility: hidden; }
.community-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; white-space: nowrap; border-radius: 4px; transition: color 150ms; }
.community-action svg { width: 14px; height: 14px; }
.community-like { min-width: 32px; }
.heart-icon { transform-box: fill-box; transform-origin: center; }
.community-like[aria-pressed="true"] { color: var(--ink); }
.community-like.is-like-reminded { color: var(--ink); }
.community-like[aria-pressed="true"] .heart-icon { fill: currentColor; }
.community-action .like-count { font-size: 10px; font-variant-numeric: tabular-nums; }
.community-actions-mobile { display: none; }
.community-inline-status { position: absolute; bottom: 52px; right: 16px; z-index: 2; max-width: calc(100% - 32px); margin: 0; color: var(--soft-ink); font-size: 11px; line-height: 1.7; text-align: right; }
.community-inline-status:empty { display: none; }
.community-dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 0; width: min(384px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; box-shadow: 0 12px 42px #00000012; scrollbar-width: thin; }
.community-dialog::backdrop { background: #00000018; }
.community-header { display: flex; align-items: center; gap: 8px; padding: 12px 20px 10px; }
.community-header h2 { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: -.15px; }
.community-header .icon-button { width: 28px; height: 28px; flex-shrink: 0; }
.community-header .icon-button svg { width: 15px; height: 15px; }
.community-back { margin-left: -5px; }
.community-close { margin-right: -5px; }
.community-pane { padding: 0 20px 20px; }
.community-status { color: var(--soft-ink); font-size: 11px; line-height: 1.7; margin: 12px 0 0; }
.community-status:empty { display: none; }
.share-view-picker { display: flex; flex: 1; gap: 4px; }
.share-view-picker button { min-height: 32px; padding: 0 8px; border-radius: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; transition: color 150ms, background 150ms; }
.share-view-picker button[aria-pressed="true"] { color: var(--ink); background: var(--soft); }
.share-view-picker button:disabled { opacity: .5; cursor: wait; }
.share-preview { position: relative; background: var(--paper); width: 100%; aspect-ratio: 900 / 1080; }
.share-preview::after { content: ''; position: absolute; inset: 0; border: 1px solid light-dark(#d3d3d3, #454545); pointer-events: none; }
.share-preview[aria-busy="false"]:not([data-error])::after { display: none; }
.share-preview[data-ready]:not([data-error])::after { display: none; }
.share-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1080; transition: opacity var(--community-artwork-duration) ease; }
.share-preview[data-ready][aria-busy="true"] canvas { opacity: var(--community-artwork-opacity); }
.share-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--muted); background: var(--paper); }
.share-preview[aria-busy="false"] .share-loading { display: none; }
.share-preview[data-ready] .share-loading { display: none; }
.share-preview[data-error] canvas { visibility: hidden; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.share-actions .button { min-height: 40px; padding-inline: 10px; gap: 6px; font-size: 12px; }
.share-actions svg { display: none; width: 14px; height: 14px; }
.share-actions .is-confirmed svg { display: block; }
.share-actions [aria-disabled="true"] { opacity: .45; cursor: wait; }
.share-copy { color: var(--soft-ink); background: var(--soft); }
.share-manual-link { width: 100%; padding: 10px; margin-top: 12px; color: var(--soft-ink); background: var(--soft); font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.campaign-note { display: block; width: 100%; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); text-align: left; color: var(--muted); font-size: 11px; line-height: 1.6; }
.campaign-content img { width: 100%; max-height: 280px; object-fit: contain; image-rendering: pixelated; }
.campaign-content p { color: var(--soft-ink); font-size: 12px; line-height: 1.8; margin: 16px 0; }
.campaign-content progress { width: 100%; height: 5px; accent-color: var(--ink); }
.campaign-content small { color: var(--muted); font-size: 10px; }
.campaign-content .button { display: flex; margin-top: 20px; }
@media (hover: hover) {
  .community-action:hover { color: var(--ink); }
  .community-header .icon-button:hover { background: var(--soft); color: var(--ink); }
  .share-copy:hover { background: var(--line); color: var(--ink); }
  .share-view-picker button:not(:disabled):hover { color: var(--ink); }
}
@media (max-width: 600px) {
  .community-actions-desktop { display: none; }
  .community-actions-mobile { display: flex; flex-shrink: 0; gap: 0; margin-right: -6px; pointer-events: none; }
  .community-actions-mobile .community-action { min-width: 44px; min-height: 44px; padding-inline: 6px; pointer-events: auto; }
  .community-inline-status { top: 48px; bottom: auto; left: 12px; right: 12px; text-align: right; pointer-events: none; }
  .community-dialog { width: min(352px, calc(100vw - 32px)); }
  .share-view-picker button { min-height: 40px; }
  .community-header .icon-button { width: 40px; height: 40px; }
}
@media (max-height: 680px) {
  .community-dialog[data-pane="share"] { width: min(320px, calc(100vw - 32px)); }
  .share-preview { width: min(100%, calc((100dvh - 176px) * 900 / 1080)); margin-inline: auto; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .community-actions-desktop, .community-inline-status { right: 72px; }
}
@media (prefers-reduced-motion: reduce) { .share-preview canvas { transition: none; } }