/* Scoped usability additions; keep the existing site design. */
.auth-card label { display: block; text-align: left; font-weight: 600; margin: .65rem 0 .35rem; }
.login-page .invite-code-form { display: grid; gap: .5rem; }
.login-page .invite-code-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: .8rem; border: 1px solid #d2d2d2; border-radius: 6px; font: inherit; }
.login-page .invite-code-form button { padding: .8rem; border: 0; border-radius: 5px; background: #4caf50; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.login-page .login-card form .password-toggle { width: auto; margin: 0 0 .8rem; padding: .45rem .75rem; background: #edf3ee; color: #23452b; border: 1px solid #b9c9bb; }
.auth-legal-footer, .site-footer { flex-wrap: wrap; }
.legal-policy-card nav { padding: 1rem; background: #f4f7f4; border-radius: .5rem; }
.legal-policy-card nav li { margin: .45rem 0; }
.legal-policy-body h2 { margin-top: 1.8rem; scroll-margin-top: 6rem; }
.getting-started { padding: 1rem; margin-bottom: 1rem; }
.getting-started summary { cursor: pointer; font-weight: 700; }
.getting-started summary span { font-size: .85rem; font-weight: 400; margin-left: .5rem; }
.getting-started li { margin: .8rem 0; }
.getting-started label { display: block; }
.getting-started input { width: auto; }
.tabs a[aria-current="page"] { background: #23452b; color: white; border-radius: .4rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; }
.notification-group { padding: 1rem; }
.notification-group h2 { font-size: 1.1rem; }
.notification-group .notification-card + .notification-card { border-top: 1px solid #d6dfd8; padding-top: .8rem; margin-top: .8rem; }
.notification-card.unread { border-left: 4px solid #28733a; padding-left: .8rem; }
.composer-preview { border: 1px solid #bdcabe; padding: 1rem; margin: .75rem 0; overflow-wrap: anywhere; }
[data-enhanced-composer] > button.secondary { width: auto; margin: .4rem .4rem .4rem 0; }
.welcome-card select { display: block; width: 100%; max-width: 100%; padding: .75rem; margin: .7rem 0 1rem; border-radius: .5rem; color: #172d23; background: #fff; }
.welcome-card label { display: block; }
.welcome-card { max-height: none; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .login-page { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; margin: .5rem auto; }
  .login-page .auth-card { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; }
  .login-page .logo-card { order: -1; min-height: 0; height: auto; padding: .35rem; background: transparent; box-shadow: none; }
  .login-page .logo-image-wrap { height: 88px; width: 100%; display: flex; justify-content: center; }
  .login-page .logo-card img { height: 88px; width: auto; max-width: 100%; object-fit: contain; border-radius: .5rem; }
  .login-page .login-card, .login-page .register-card { padding: 1.1rem; }
  .login-page h1 { margin: 0 0 .6rem; font-size: 1.65rem; }
  .login-page .login-card form { gap: .5rem; }
  .login-page .login-card label { margin: .3rem 0 0; }
  .getting-started ol { padding-left: 1.2rem; }
  .create-post-actions { flex-wrap: wrap; }
  .welcome-card { padding: 1.3rem; }
}

/* Keep the expanded primary navigation usable between desktop and phone layouts. */
@media (min-width: 701px) {
  .topbar-inner { flex-wrap: wrap; }
  .topbar-search { flex: 1 1 220px; min-width: 180px; }
  .topbar-nav { flex-wrap: wrap; gap: .2rem; }
}
.invite-page .invite-link-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.invite-page .invite-link-row input { flex: 1 1 240px; min-width: 0; }
.invite-page .invite-link-row button { flex: 0 0 auto; min-height: 44px; padding: .65rem 1rem; border: 1px solid #315f40; border-radius: 8px; background: #315f40; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.invite-page .invite-link-row button.secondary { background: #fff; color: #315f40; }
.invite-page .invite-link-row button:hover { background: #244a30; color: #fff; }
.invite-code-option { margin: .8rem 0; }
.invite-code-option summary { cursor: pointer; padding: .5rem 0; }
.invite-copy-status { color: #23452b; font-weight: 600; overflow-wrap: anywhere; }
.invite-copy-status:empty { display: none; }
@media (max-width: 600px) {
  .invite-page .invite-link-row input { flex-basis: 100%; width: 100%; }
  .invite-page .invite-link-row button { flex: 1 1 auto; width: auto; }
}

/* A single search control on desktop and mobile. */
.topbar-search { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.topbar-search input { flex: 1 1 0; width: 0; min-width: 0; max-width: none; margin: 0; min-height: 44px; border-radius: 24px 0 0 24px; }
.topbar-search button { flex: 0 0 auto; width: auto; margin: 0; min-height: 44px; padding: 0 16px; border: 1px solid #d0d0d0; border-left: 0; border-radius: 0 24px 24px 0; background: #f3f5f7; color: #24364d; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.topbar-search button:hover { background: #e5ebef; }
.reaction-icon { display: inline-block; width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; vertical-align: middle; }
.reaction-button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.reaction-picker > summary { display: inline-flex; align-items: center; gap: 6px; }
.reaction-picker > summary .reaction-icon { width: 24px; height: 24px; flex-basis: 24px; }
.reaction-button.selected-reaction { box-shadow: inset 0 0 0 1px #315f40; }

/* Mobile navigation and compact member journeys. Desktop remains expanded. */
.mobile-only,.mobile-bottom-nav { display: none; }
.comment-reaction-picker { display: contents; }
@media (max-width: 700px) {
  :root { --mobile-nav-space: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-only:not([hidden]) { display: inline-flex; }
  body { padding-bottom: var(--mobile-nav-space); }
  .site-footer { padding-bottom: 24px; }
  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); position: fixed; z-index: 110; bottom: 0; left: 0; right: 0; padding: 4px max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left)); min-height: var(--mobile-nav-space); box-sizing: border-box; background: #fffaf0; border-top: 1px solid #decfb5; box-shadow: 0 -3px 14px #35220c12; }
  .mobile-bottom-nav > a,.mobile-bottom-nav > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px; margin: 0; padding: 4px 1px; border: 0; border-radius: 8px; background: transparent; color: #51351f; text-decoration: none; font: 600 11px/1.2 system-ui,sans-serif; cursor: pointer; }
  .mobile-bottom-nav [aria-current="page"],.mobile-bottom-nav [aria-expanded="true"] { background: #f0dfbb; color: #64330c; }
  .mobile-bottom-nav .nav-count { position: absolute; top: 0; right: 8px; }
  .topbar-nav.is-open { position: fixed; top: auto; bottom: calc(var(--mobile-nav-space) + 8px); left: 10px; right: 10px; z-index: 120; max-height: calc(var(--mobile-visible-height,100dvh) - var(--mobile-nav-space) - 24px); border-radius: 14px; }
  .mobile-keyboard-open { --mobile-nav-space: 0px; }
  .topbar-nav.is-open > details > summary { display: none; }
  .mobile-menu-open .topbar { z-index: 120; }
  .mobile-keyboard-open .mobile-bottom-nav { display: none; }
  .mobile-composer-collapsed > h2,.mobile-composer-collapsed #mobile-composer-body { display: none; }
  .mobile-compose-launch { width: 100%; min-height: 48px; align-items: center; padding: 12px 16px; border: 1px solid #d5ddd6; border-radius: 24px; background: #f7faf7; color: #3f5546; font: inherit; text-align: left; cursor: pointer; }
  .create-post-card:not(.mobile-composer-collapsed) .mobile-compose-launch { display: none; }
  [data-compose-close] { margin-bottom: 12px; }
  .getting-started.mobile-checklist-dismissed { display: none; }
  .checklist-restore { align-self: flex-start; border: 0; background: transparent; color: #315f40; text-decoration: underline; min-height: 44px; padding: 4px 8px; }
  [data-dismiss-checklist] { margin: 0 0 14px; }
  .comment-reaction-picker { display: block; }
  .comment-reaction-picker > summary { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 9px; border: 1px solid #d9dfd9; border-radius: 20px; background: #fff; cursor: pointer; list-style: none; }
  .comment-reaction-picker > summary::-webkit-details-marker { display: none; }
  .comment-reaction-picker[open] { flex-basis: 100%; }
  .comment-reaction-picker > form { display: inline-flex; margin: 4px 2px; }
  .comment-reaction-picker:not([open]) > form { display: none; }
  .comment-reaction-totals { flex-wrap: wrap; align-items: center; gap: 6px; }
  .comment-reaction-total { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
  .comment-reaction-total .reaction-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .invite-page { display: flex; flex-direction: column; }
  .invite-content-grid { display: contents; }
  .invite-page-header,.invite-alert { order: 0; }
  .invite-create-card { order: 1; margin-bottom: 16px; }
  .invite-link-card { order: 2; scroll-margin-top: 12px; }
  .invite-copy-status { order: 3; }
  .invite-summary-grid { order: 4; }
  .invite-history-section { order: 5; }
  .mobile-conversation-active { overflow: hidden; }
  .mobile-conversation-active .topbar-inner > :not(.topbar-nav),.mobile-conversation-active .site-footer,.mobile-conversation-active .messages-page > .feature-heading,.mobile-conversation-active .unseen-notice,.mobile-conversation-active .browser-alert-prompt { display: none; }
  .mobile-conversation-active .conversation-panel { position: fixed; z-index: 90; top: var(--mobile-visible-top,0px); left: 0; right: 0; height: calc(var(--mobile-visible-height,100dvh) - var(--mobile-nav-space)); min-height: 0; max-height: none; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 0; margin: 0; padding: env(safe-area-inset-top) 12px 0; box-sizing: border-box; border: 0; border-radius: 0; overflow: hidden; background: #fff; }
  .mobile-conversation-active .conversation-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0; margin: 0; border-bottom: 1px solid #e2e6e9; }
  .mobile-conversation-active .conversation-header > .flash { flex-basis: 100%; margin: 0; }
  .mobile-conversation-active .conversation-header h2 { margin: 0; font-size: 1.1rem; }
  .mobile-conversation-active .mobile-back { margin: 0; }
  .mobile-conversation-active .message-list { min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 2px; }
  .mobile-conversation-active .message-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 8px; padding: 8px 0 max(8px,env(safe-area-inset-bottom)); border-top: 1px solid #e2e6e9; background: #fff; }
  .mobile-conversation-active .message-composer label { grid-column: 1/-1; font-size: 12px; margin: 0; }
  .mobile-conversation-active .message-composer textarea { grid-column: 1; min-width: 0; width: 100%; height: 64px; min-height: 44px; max-height: 110px; resize: none; margin: 0; box-sizing: border-box; }
  .mobile-conversation-active .message-composer button { grid-column: 2; align-self: end; min-height: 44px; margin: 0; }
}

/* Group chats share the existing conversation layout. */
.chat-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chat-actions a,.chat-actions button { margin:0; }
.message-sender { display:block; font-size:.8rem; margin-bottom:4px; }
.chat-details-link { margin-left:auto; white-space:normal; }
.group-chat-settings { width:100%; min-width:0; box-sizing:border-box; }
.group-chat-settings h2 { overflow-wrap:anywhere; }
.chat-friend-picker { border:1px solid #d4ddd5; border-radius:10px; padding:8px 12px; max-height:340px; overflow-y:auto; }
.chat-friend-option { display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 0; cursor:pointer; }
.chat-friend-option input { width:20px; height:20px; margin:0; flex:0 0 20px; }
.chat-friend-option small,.chat-member-list small { display:block; font-size:.8rem; color:#526273; }
.chat-member-list { list-style:none; padding:0; }
.chat-member-list > li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid #e4e9e5; }
.chat-member-list details { max-width:100%; }
.chat-member-list summary,.chat-leave summary { cursor:pointer; padding:12px 0; min-height:44px; box-sizing:border-box; }
.chat-leave { margin-top:24px; border-top:1px solid #d4ddd5; }
@media(max-width:700px) {
  .messaging-layout.conversation-list-active:has(.group-chat-settings) .conversation-sidebar { display:none; }
  .messaging-layout.conversation-list-active:has(.group-chat-settings) .conversation-panel { display:block; }
  .mobile-conversation-active .conversation-header > div { min-width:0; flex:1; }
  .mobile-conversation-active .conversation-header h2 { overflow-wrap:anywhere; }
  .mobile-conversation-active .chat-details-link { font-size:12px; padding:8px; min-height:44px; max-width:120px; }
  .group-chat-settings .inline-fields { flex-wrap:wrap; }
  .group-chat-settings .inline-fields input { min-width:0; flex:1 1 160px; }
}