.contribute-page { min-height: 100vh; background: #f4f8fa; }
.contribute-page .site-header { min-height: 68px; padding-block: 5px; }
.contribute-page .brand-avatar { width: 54px; height: 54px; flex-basis: 54px; }
.contribute-page .site-footer { padding-block: 14px; }
.contribute-hero { position: relative; min-height: 190px; overflow: hidden; }
.contribute-hero-image, .contribute-hero-shade { position: absolute; inset: 0; }
.contribute-hero-image { background: url("assets/coast-brittany.jpg") center 56% / cover; }
.contribute-hero-shade { background: linear-gradient(90deg, rgba(255,255,255,.98) 7%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.15)); }
.contribute-heading { position: relative; z-index: 1; display: flex; min-height: 190px; align-items: center; gap: 24px; padding-bottom: 30px; }
.community-icon { display: grid; width: 72px; height: 72px; flex: 0 0 72px; place-items: center; border-radius: 18px; color: white; background: linear-gradient(145deg, #1596be, #075e7c); font-size: 40px; box-shadow: 0 14px 30px rgba(8,127,168,.22); }
.contribute-heading h1 { max-width: 750px; margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -1.6px; }
.contribute-heading div > p:last-child { max-width: 700px; margin: 9px 0 0; color: #41586a; font-size: 14px; }
.contribute-watermark { position: absolute; right: 18px; bottom: 8px; z-index: 2; margin: 0; color: rgba(255,255,255,.9); font-size: 9px; font-weight: 750; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

.community-layout { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; margin-top: -28px; margin-bottom: 22px; align-items: start; }
.community-main { display: grid; gap: 14px; }
.post-composer, .recent-posts, .category-panel, .community-note { border: 1px solid #dbe6ea; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 16px 40px rgba(13,27,42,.08); }
.post-composer { padding: 17px 20px; }
.post-composer h2, .recent-posts h2, .category-panel h2, .community-note h2 { margin: 0; font-size: 16px; }
.composer-top { display: grid; grid-template-columns: 230px 1fr; gap: 12px; margin-top: 13px; }
.post-composer label { display: grid; gap: 5px; color: #405568; font-size: 10px; font-weight: 800; }
.post-composer input, .post-composer select, .post-composer textarea, .admin-editor input, .admin-editor textarea { width: 100%; box-sizing: border-box; border: 1px solid #d4e1e7; border-radius: 9px; padding: 9px 11px; color: var(--ink); background: white; font: inherit; font-size: 12px; outline: none; }
.post-composer select { min-height: 39px; cursor: pointer; }
.post-composer input:focus, .post-composer select:focus, .post-composer textarea:focus, .admin-editor input:focus, .admin-editor textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,168,.1); }
.category-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; border: 0; }
.category-choice legend { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.category-choice label { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #dbe6ea; border-radius: 8px; cursor: pointer; font-size: 11px; }
.category-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.category-choice label:has(input:checked) { border-color: var(--teal); color: white; background: var(--teal); }
.message-field textarea { min-height: 90px; resize: vertical; }
.website-trap { position: absolute; left: -10000px; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 11px; }
.composer-footer small { color: #718391; font-size: 9px; }
.composer-footer button { min-height: 38px; padding: 0 18px; border: 0; border-radius: 8px; color: white; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; }
.composer-footer button:disabled { cursor: wait; opacity: .55; }
.community-status { min-height: 15px; margin: 8px 1px 0; color: var(--teal-dark); font-size: 10px; font-weight: 750; }
.community-status.error { color: #b4232f; }

.recent-posts { padding: 15px 20px; }
.recent-posts > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid #e2eaee; }
.recent-posts .eyebrow { margin-bottom: 2px; font-size: 9px; }
#refresh-posts { border: 1px solid #d4e1e7; border-radius: 7px; padding: 6px 9px; color: var(--teal-dark); background: white; cursor: pointer; }
.posts-list { display: grid; }
.loading-posts, .empty-posts { padding: 24px; color: #718391; text-align: center; }
.post-card { padding: 13px 2px; border-bottom: 1px solid #e2eaee; }
.post-card:last-child { border-bottom: 0; }
.post-header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.post-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--teal-dark); background: #e1f1f7; font-weight: 900; }
.post-identity { display: grid; }
.post-identity strong { font-size: 12px; }
.post-identity small { color: #728492; font-size: 9px; }
.category-badge { padding: 4px 7px; border-radius: 999px; color: var(--teal-dark); background: #e5f2f8; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.category-badge.bug { color: #a52c37; background: #ffe7ea; }
.category-badge.comment { color: #215f99; background: #e5f1ff; }
.category-badge.suggestion { color: #775d08; background: #fff3c9; }
.post-subject { margin: 9px 0 2px 48px; color: #20384a; font-size: 14px; }
.post-body { margin: 5px 0 0 48px; color: #506575; font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.public-response { margin: 10px 0 0 48px; padding: 10px 12px; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; background: #edf5f9; }
.public-response strong { color: var(--teal-dark); font-size: 9px; text-transform: uppercase; }
.public-response p { margin: 4px 0 0; color: #304a5b; font-size: 12px; white-space: pre-line; }
.post-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
.post-actions button, .admin-actions button { border: 1px solid #d5e2e7; border-radius: 7px; padding: 6px 9px; color: #5d7281; background: white; cursor: pointer; font-size: 9px; font-weight: 800; }
.admin-editor { display: grid; gap: 7px; margin: 10px 0 0 48px; padding: 10px; border: 1px dashed #88bdd0; border-radius: 9px; background: #f6fafc; }
.admin-editor label { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 8px; color: #52697a; font-size: 10px; font-weight: 800; }
.admin-actions { display: flex; justify-content: flex-end; gap: 7px; }
.admin-actions .publish-answer { border-color: var(--teal); color: white; background: var(--teal); }
.admin-actions .hide-post { color: #b4232f; }

.community-sidebar { display: grid; gap: 14px; }
.category-panel, .community-note { padding: 17px; }
#category-filters { display: grid; gap: 5px; margin-top: 12px; }
#category-filters button { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; padding: 9px 10px; color: #405568; background: transparent; cursor: pointer; font: inherit; font-size: 11px; text-align: left; }
#category-filters button:hover, #category-filters button.active { color: var(--teal-dark); background: #edf5f9; }
#category-filters b { min-width: 28px; padding: 3px 6px; border-radius: 999px; color: var(--teal-dark); background: #dceff6; font-size: 9px; text-align: center; }
.community-note p { margin: 10px 0 0; color: #607482; font-size: 11px; line-height: 1.6; }

@media (max-width: 850px) { .community-layout { grid-template-columns: 1fr; } .community-sidebar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .contribute-hero, .contribute-heading { min-height: 290px; }
  .contribute-heading { align-items: flex-start; flex-direction: column; gap: 14px; padding-block: 28px 65px; }
  .community-icon { width: 58px; height: 58px; flex-basis: 58px; }
  .community-layout { width: calc(100% - 20px); }
  .composer-top, .community-sidebar { grid-template-columns: 1fr; }
  .post-composer, .recent-posts { padding-inline: 13px; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .post-subject, .post-body, .public-response, .admin-editor { margin-left: 0; }
  .admin-editor label { grid-template-columns: 1fr; }
}