/* Every project member remains visible on the card, even on a narrow board. */
#projectList .card-meta { min-width: 0; flex-wrap: wrap; }
#projectList .card-meta .avatar-stack {
  min-width: 0;
  flex-wrap: wrap;
  gap: 3px;
}
#projectList .card-meta .avatar-sm { margin-left: 0; flex: none; }
.members-panel .members-panel-body { background: var(--bg-hover); }
.board-invite-controls { padding: 15px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-white); box-shadow: 0 1px 3px rgba(20, 30, 44, .04); }
.members-panel-group { padding: 15px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-white); box-shadow: 0 1px 3px rgba(20, 30, 44, .04); }
.members-panel-group + .members-panel-group { margin-top: 12px; }
.members-panel-group-title { margin: 0 0 7px; padding-bottom: 9px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); font-size: 14px; font-weight: 700; }
.members-panel-group--board { border-left: 4px solid var(--accent); padding-left: 11px; }
.members-panel-group-board-header { margin: -6px -5px 8px; padding: 9px 10px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 8%, var(--bg-white)); }
.members-panel-group-board-header .members-panel-group-title { margin: 0 0 2px; padding: 0; border: 0; color: var(--text-primary); }
.members-panel-group-scope { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.members-panel-avatar { display: inline-flex; flex: none; width: 34px; height: 34px; }
.members-panel-avatar .avatar { width: 34px; height: 34px; }
.members-panel-group .panel-member-row { position: relative; align-items: flex-start; gap: 9px; padding: 11px 8px; border-radius: var(--radius-md); cursor: pointer; transition: background-color .15s ease; }
.members-panel-group .panel-member-row + .panel-member-row { margin-top: 3px; }
.members-panel-group .panel-member-row + .panel-member-row::before { content: ''; position: absolute; top: -2px; left: 8px; right: 8px; height: 1px; background: var(--border-light); }
.members-panel-group .panel-member-row:hover { background: var(--bg-hover); }
.board-invite-explainer { margin: 0 0 10px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.members-panel-group .panel-member-row:has(.member-board-invite) { flex-wrap: wrap; }
.member-board-invite { margin-left: 43px; padding: 4px 9px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-white); color: var(--accent); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.member-board-invite:hover, .member-board-invite:focus-visible { background: color-mix(in srgb, var(--accent) 9%, var(--bg-white)); }
.members-panel-group .panel-member-info { display: flex; flex-direction: column; min-width: 0; }
.members-panel-group .panel-member-name,
.members-panel-group .panel-member-email { display: block; overflow-wrap: anywhere; line-height: 1.35; }
.members-panel-group .panel-member-badge { max-width: 104px; white-space: normal; text-align: center; line-height: 1.25; }
#pendingInvitesSection { padding: 15px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-white); }

/* The project header gives its second half to members, like the task header. */
.modal .modal-two-col { grid-template-rows: auto 1fr; }
.modal .modal-left-top { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.modal .proj-title-col { border-right: 1px solid var(--border-light); }
.modal #mProjDescToggle,
.modal #mProjDescBody { display: none; }
.modal .modal-left-top > .modal-members { grid-column: 2; grid-row: 1; align-self: stretch; border-bottom: 0; padding: 8px 20px; }
.modal .discussion { grid-column: 1; grid-row: 2; }
.modal .tasks-section { grid-column: 2; grid-row: 2; }
.info-popup-section.project-description-hidden { display: none; }
.info-popup-member .avatar { flex: none; }
.info-popup-manage { display: block; width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-white); color: var(--text-primary); font: inherit; cursor: pointer; }
.info-popup-manage:hover { background: var(--bg-hover); }
.info-popup-manage[hidden] { display: none; }

/* Activity uses the same quiet canvas and individual white cards. */
#notifyPanelList { display: flex; flex-direction: column; gap: 10px; }
#notifyPanelList .notify-item { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(20, 30, 44, .04); }
#notifyPanelList .notify-item:hover { background: var(--bg-white); border-color: var(--text-muted); }
#notifyPanelList .notify-item.unread { background: var(--bg-white); border-left: 3px solid var(--accent); }

/* Manage Members keeps each action group visually separate. */
.members-submodal-body { background: var(--bg-hover); }
.members-submodal-body .members-manage-list,
.members-submodal-body .invite-form { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 8px; }
.members-submodal-body .members-manage-row { background: transparent; }
.members-manage-remove[hidden] { display: none; }
.members-submodal-body .members-manage-row + .members-manage-row { border-top: 1px solid var(--border-light); border-radius: 0; }
.members-submodal-body .invite-form { display: flex; flex-direction: column; gap: 8px; }
.members-submodal-body .invite-main-row { display: flex; gap: 8px; }
.members-submodal-body .invite-note-input { margin-top: 0; }
.members-submodal-body .invite-copy-link-btn { margin-top: 0; }
.members-submodal-body .invite-status { margin-top: 0; min-height: 0; text-align: left; }
.members-submodal-body #projectPendingMemberInvites { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
#projectPendingMemberInvites .members-submodal-section-label { margin: 0 0 2px; }
#projectPendingMemberInvites .members-manage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; padding: 10px; background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
#projectPendingMemberInvites .members-manage-row-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.members-add-identity { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
.members-add-identity .members-add-name { flex: none; }
.members-add-email { color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; line-height: 1.3; }
.members-manage-row-identity { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
.members-manage-row-identity .members-manage-row-name { flex: none; }
.members-manage-row-email { color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; line-height: 1.3; }

/* The project invite has a gray body with separate white form and pending cards. */
.project-invite-dialog { width: min(420px, 92vw); max-height: 75vh; overflow-y: auto; background: var(--bg-hover); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); }
.project-invite-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--bg-white); border-bottom: 1px solid var(--border-default); }
.project-invite-header strong { color: var(--text-primary); font-size: 15px; }
.project-invite-card,
#projPendingSection { margin: 14px; padding: 15px; background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
#projPendingSection .invite-section-label { margin-top: 0; }

/* Search results and the project group disclosure follow the same system. */
.search-results { background: var(--bg-hover); padding: 10px; }
.search-hit { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-top: 6px; }
.search-hit:hover { background: var(--bg-white); border-color: var(--text-muted); }
.projects-group-header .chev { font-size: 18px; line-height: 1; min-width: 16px; text-align: center; }

/* Newly accepted project: persistent label, brief first-arrival cue. */
.shared-project-new-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: #fff; font: 700 10px/1.25 system-ui, sans-serif; letter-spacing: .04em; }
.card.shared-project-arrival { animation: shared-project-arrival 2.8s ease-out 1; }
@keyframes shared-project-arrival {
  0%, 28% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 36%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .card.shared-project-arrival { animation: none; } }