/* Collaboration extension. Inherits the shared quiet-workspace tokens. */

/* Navigation grows without hiding the account or making the whole page scroll. */
.sidebar { overflow: hidden; }
.sidebar > .brand, .sidebar > .workspace-switch, .sidebar > .nav-group-label { flex-shrink: 0; }
.sidebar > .brand { margin-bottom: 24px; }
.sidebar > .workspace-switch { margin-bottom: 16px; }
.sidebar nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d0d0d7 transparent; padding-right: 2px; }
.sidebar nav .nav-item { min-height: 36px; padding: 8px 12px; font-size: 12px; line-height: 20px; }
.sidebar nav .nav-item .icon { width: 18px; height: 18px; flex-basis: 18px; }
.nav-section-title { padding: 0 12px; margin: 16px 0 8px; color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 400; }
.nav-section-title:first-child { margin-top: 0; }
.nav-subgroup { display: flex; flex-direction: column; gap: 2px; }
.sidebar-bottom { flex: 0 0 auto; margin-top: 16px; padding-top: 0; gap: 8px; }
.sidebar-bottom > .nav-item { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
.sidebar-bottom .compute-mini { padding: 12px; }
.sidebar-bottom .compute-mini .text-button { margin-top: 8px; }
.sidebar-bottom .user-profile > span:nth-child(2) { min-width: 0; }
.sidebar-bottom .user-profile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; }
.role-switch:hover { background: #eaeaef; border-color: #e1e1e7; }
.role-switch > div, .role-switch > span:not(.avatar) { min-width: 0; }
.role-switch strong { display: block; color: var(--text); font-size: 12px; line-height: 20px; font-weight: 500; }
.role-switch small { display: block; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.role-switch > .icon:last-child { width: 12px; height: 12px; flex-basis: 12px; opacity: .4; }
.notice-button, .co-notification-button { position: relative; }
.notice-count, .co-notification-count { position: absolute; top: -2px; right: -4px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid var(--bg); border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; line-height: 12px; font-weight: 500; }

/* Overview entry points */
.collab-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.collab-shortcuts > a, .collab-shortcuts > button, .collab-shortcuts > article { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; color: var(--text); text-align: left; }
.collab-shortcuts > a:hover, .collab-shortcuts > button:hover { border-color: #d2dce9; background: #fcfdff; }
.collab-shortcuts > * > .icon { width: 24px; height: 24px; flex-basis: 24px; opacity: .55; }
.collab-shortcuts strong { display: block; font-size: 20px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.collab-shortcuts small, .collab-shortcuts p { display: block; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.collab-shortcuts > * > .icon:last-child:not(:first-child) { margin-left: auto; width: 16px; height: 16px; flex-basis: 16px; opacity: .3; }
.collab-project-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; margin-bottom: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; }
.collab-project-entry h2, .collab-project-entry h3 { font-size: 16px; line-height: 24px; }
.collab-project-entry p { margin-top: 4px; font-size: 12px; line-height: 20px; color: var(--text-secondary); }
.collab-project-entry .member-avatars, .collab-project-entry .avatar-group, .collab-member-avatars, .collab-entry-team { display: flex; align-items: center; flex-shrink: 0; padding-left: 4px; }
.collab-project-entry .member-avatars .avatar, .collab-project-entry .avatar-group .avatar, .collab-member-avatars .avatar, .collab-entry-team .avatar { width: 28px; height: 28px; margin-left: -4px; border: 2px solid #fff; }
.collab-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 24px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.collab-note > .icon { width: 16px; height: 16px; flex-basis: 16px; margin-top: 2px; opacity: .4; }

/* A project workspace: a stage, a focused tab, one next action. */
.co-page { min-width: 0; }
.co-page .page-heading { margin-bottom: 24px; }
.co-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.co-toolbar > div { min-width: 0; }
.co-toolbar .co-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.co-toolbar label { font-size: 12px; line-height: 20px; color: var(--text-secondary); }
.co-toolbar select, .co-actor-control select, .co-status-filter select, .co-page > select { min-height: 40px; max-width: 320px; padding: 8px 32px 8px 12px; border: 1px solid #dedee4; border-radius: 8px; background: #fff; color: var(--text); font-size: 12px; line-height: 20px; }
.co-actor-control { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.co-actor-control label, .co-actor-control small { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.topbar .co-actor-control { display: inline-flex; width: auto; min-height: 40px; padding: 4px 8px; border-color: transparent; border-radius: 8px; background: transparent; text-align: left; flex-wrap: nowrap; }
.topbar .co-actor-control:hover { background: #eaeaef; }
.topbar .co-actor-control > span:not(.avatar) { min-width: 0; }
.topbar .co-actor-control strong, .topbar .co-actor-control small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; }
.topbar .co-actor-control strong { color: var(--text); font-size: 14px; line-height: 20px; font-weight: 500; }
.topbar .co-actor-control .avatar { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
.topbar .co-actor-control > .icon:last-child { width: 12px; height: 12px; flex: 0 0 12px; opacity: .4; }
.co-select-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.co-select-field > span { flex-shrink: 0; }
.co-project-toolbar h2 { font-size: 20px; line-height: 28px; margin-top: 4px; }
.co-project-toolbar .eyebrow { font-size: 12px; line-height: 16px; }
.co-phase-track { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 8px; padding: 24px; margin-bottom: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; overflow-x: auto; }
.co-phase-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 0 8px 0 0; border: 0; background: transparent; text-align: left; color: var(--text-secondary); }
.co-phase-item::before { content: ""; display: block; width: 100%; height: 3px; margin-bottom: 4px; border-radius: 2px; background: #e8e8ee; }
.co-phase-item.done::before { background: #a1c6eb; }
.co-phase-item.current::before { background: var(--brand); }
.co-phase-item strong { display: block; font-size: 12px; line-height: 20px; font-weight: 500; }
.co-phase-item small, .co-phase-item time { display: block; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.co-phase-item.current strong { color: var(--brand); }
.co-phase-item > span:first-child:not(.badge), .co-phase-item .co-phase-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f1f5; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.co-phase-item.done > span:first-child:not(.badge), .co-phase-item.done .co-phase-number { background: #edf5fc; color: #316da8; }
.co-phase-item.current > span:first-child:not(.badge), .co-phase-item.current .co-phase-number { background: var(--brand); color: #fff; }
.co-phase-item .icon { width: 12px; height: 12px; flex-basis: 12px; }
.co-phase-item.current > span:first-child .icon { filter: brightness(0) invert(1); opacity: 1; }
.co-tabs { display: flex; align-items: stretch; gap: 24px; padding: 0; margin-bottom: 24px; border-bottom: 1px solid #e1e1e7; overflow-x: auto; }
.co-tabs > button, .co-tabs > a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font-size: 14px; line-height: 20px; white-space: nowrap; }
.co-tabs > .active, .co-tabs > [aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
.co-tabs .badge, .co-tabs .co-board-count { padding: 0 4px; background: #e9e9ef; color: var(--text-secondary); border-radius: 4px; font-size: 12px; line-height: 20px; }
.co-tabs > button:hover, .co-tabs > a:hover { color: var(--text); background: transparent; }
.co-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-note > .icon { width: 16px; height: 16px; flex-basis: 16px; margin-top: 2px; opacity: .4; }
.co-note-text, .co-footnote { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-footnote { margin-top: 16px; }
.co-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.co-section-head h2 { font-size: 18px; line-height: 28px; }
.co-section-head .text-small { display: block; margin-top: 4px; }
.co-span-full { grid-column: 1 / -1; }

/* Task board, intentionally scrollable only inside its own viewport. */
.co-kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); align-items: start; gap: 16px; min-width: 0; padding-bottom: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #d4d4dc transparent; }
.co-kanban-column { min-width: 0; min-height: 264px; padding: 16px; background: #ededf2; border: 1px solid #e8e8ee; border-radius: 16px; }
.co-kanban-column > header, .co-kanban-column > .co-column-head, .co-kanban-column > .co-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.co-kanban-column > h3, .co-kanban-column > header h3, .co-kanban-column .co-column-head h3 { font-size: 14px; line-height: 20px; font-weight: 500; }
.co-kanban-column > h3 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.co-column-tasks { min-width: 0; }
.co-column-empty { padding: 24px 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; text-align: center; }
.co-board-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 4px; color: var(--text-secondary); background: #e1e1e8; border-radius: 4px; font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.co-task-card { min-width: 0; display: block; width: 100%; padding: 16px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,.04); border-radius: 12px; background: #fff; color: var(--text); text-align: left; }
.co-task-card:last-child { margin-bottom: 0; }
.co-task-card:hover { border-color: #cbdcec; }
.co-task-card h3, .co-task-card h4, .co-task-card > strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.co-task-card > p { margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-task-card .badge { padding: 2px 8px; font-size: 12px; line-height: 16px; }
.co-task-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.co-task-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.co-task-meta .icon { width: 12px; height: 12px; flex-basis: 12px; opacity: .4; }
.co-owner { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-owner .avatar { width: 24px; height: 24px; font-size: 12px; line-height: 16px; }
.co-task-card .co-owner { margin-top: 0; }
.co-task-card .co-item-actions { justify-content: flex-start; margin-top: 16px; }
.co-task-card > .co-card-top { align-items: center; margin-bottom: 12px; }
.co-task-card > .co-card-top > .icon { width: 16px; height: 16px; flex-basis: 16px; opacity: .35; }

/* Shared lists, deliveries, and conversation. */
.co-list { display: flex; flex-direction: column; gap: 12px; }
.co-list-item { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; }
.co-item-main { min-width: 0; flex: 1; }
.co-item-main h3, .co-item-main h4, .co-item-main > strong { display: block; font-size: 14px; line-height: 24px; font-weight: 500; }
.co-item-main p { margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-item-main > small { display: block; margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-item-main .co-task-meta { margin-top: 12px; justify-content: flex-start; gap: 16px; }
.co-item-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.co-delivery-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; margin-bottom: 16px; }
.co-delivery-card > header, .co-delivery-card .co-delivery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.co-delivery-card h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.co-delivery-card p { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-delivery-card .co-item-actions { padding-top: 16px; border-top: 1px solid var(--border); }
.co-delivery-section > .co-list { padding: 0 24px 24px; }
.co-delivery-section .co-delivery-card { margin-bottom: 0; border-color: var(--border); border-radius: 12px; }
.co-delivery-card .co-item-actions > .text-small { display: inline-flex; align-items: center; gap: 8px; }
.co-delivery-card .co-item-actions > .text-small .icon { width: 16px; height: 16px; }
.co-handoff-card { margin-top: 24px; }
.co-handoff-card .co-handoff-checklist { margin-top: 0; }
.co-handoff-card .co-item-actions { margin-top: 24px; }
.co-handoff-checklist { display: flex; flex-direction: column; gap: 0; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.co-check-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #eeeef2; font-size: 14px; line-height: 20px; }
.co-check-row:last-child { border-bottom: 0; }
.co-check-row input { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: var(--brand); }
.co-check-row .icon { width: 16px; height: 16px; flex-basis: 16px; margin-top: 2px; opacity: .5; }
.co-check-row > span, .co-check-row > div { min-width: 0; flex: 1; }
.co-check-row > .badge { flex: 0 0 auto; }
.co-check-row strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.co-check-row small { display: block; margin-top: 4px; font-size: 12px; line-height: 20px; color: var(--text-secondary); }
.co-comment { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-bottom: 1px solid var(--border); }
.co-comment:last-child { border-bottom: 0; }
.co-comment > .avatar { width: 32px; height: 32px; flex-basis: 32px; }
.co-comment > div { min-width: 0; width: 100%; }
.co-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-comment-head strong { color: var(--text); font-weight: 500; }
.co-comment-head time, .co-comment-head small { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-comment-body, .co-comment > p { margin-top: 0; color: var(--text); font-size: 14px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.co-comment-body .co-mention, .co-comment-body mark { padding: 0 4px; background: #edf5ff; color: var(--brand); border-radius: 4px; }
.co-comment-form { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.co-comment-form textarea { width: 100%; min-height: 96px; padding: 12px; border: 1px solid #d9d9e0; border-radius: 12px; background: #fff; color: var(--text); font-size: 14px; line-height: 24px; resize: vertical; }
.co-comment-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-body > .co-comment-form { padding: 0; }
.co-comment-form .co-toolbar { margin-bottom: 0; }
.co-ticket-history { margin-bottom: 24px; }
.co-ticket-history .co-comment { padding: 16px 0; }

/* Decisions, inbox, upkeep, and a readable history. */
.co-approval-card { padding: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; margin-bottom: 16px; }
.co-approval-card > header, .co-approval-card .co-approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.co-approval-card h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.co-approval-card p { margin-top: 12px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-approval-card .co-item-actions { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.co-approval-card .co-audit-change { margin-top: 16px; }
.co-list > .co-approval-card, .co-list > .co-delivery-card { margin-bottom: 0; }
.co-approval-card > .co-card-top { margin-bottom: 12px; }
.co-status-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.co-status-filter > button { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-status-filter > .active, .co-status-filter > [aria-pressed="true"] { color: var(--text); background: #fff; font-weight: 500; }
.co-status-filter > button:hover { color: var(--text); background: #ebebf0; }
.co-notification { position: relative; display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; text-align: left; margin-bottom: 12px; }
.co-notification:hover { border-color: #d2dce9; }
.co-notification.unread { border-color: #d8e6f6; background: #fcfdff; }
.co-notification.unread::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; margin-top: 8px; border-radius: 50%; background: var(--brand); }
.co-notification > .icon, .co-notification-icon { width: 32px; height: 32px; flex: 0 0 32px; padding: 8px; border-radius: 8px; background: #f1f4f8; }
.co-notification h3, .co-notification strong { color: var(--text); font-size: 14px; line-height: 24px; font-weight: 500; }
.co-notification p { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-notification time, .co-notification small { display: inline-block; margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-notice-list { overflow: hidden; }
.co-notice-list .co-notification { margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.co-notice-list .co-notification:last-child { border-bottom: 0; }
.co-notice-list .co-notification:hover { background: #fafafd; }
.co-notice-list .co-notification.unread { background: #f9fbff; }
.co-notice-symbol { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: #f0f1f6; }
.co-notice-symbol .icon { width: 16px; height: 16px; opacity: .5; }
.co-notification .co-item-actions { justify-content: flex-start; margin-top: 16px; }
.co-toolbar .co-status-filter { margin-bottom: 0; }
.co-status-filter > .btn-primary { background: #fff; color: var(--text); font-weight: 500; }
.co-audit-row:not(tr) { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 24px; padding: 24px; border-bottom: 1px solid var(--border); }
.co-audit-row:last-child { border-bottom: 0; }
.co-audit-row > time, .co-audit-row > .co-audit-time { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-audit-row h3, .co-audit-row strong { font-size: 14px; line-height: 24px; font-weight: 500; }
.co-audit-row p { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-audit-change { display: block; max-width: 100%; padding: 12px 16px; border-radius: 8px; background: #f7f7fa; color: var(--text-secondary); font-size: 12px; line-height: 20px; margin-top: 12px; }
.co-audit-change > summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-audit-change > summary:hover { color: var(--brand); }
.co-audit-change > div { min-width: 0; max-width: 100%; padding-top: 12px; }
.co-audit-change pre { min-width: 0; max-width: 100%; margin: 4px 0 12px; padding: 8px; border: 1px solid #e7e7ed; border-radius: 4px; background: #fff; color: var(--text); font-family: inherit; font-size: 12px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.co-audit-change pre:last-child { margin-bottom: 0; }
.co-audit-table { min-width: 760px; table-layout: fixed; }
.co-audit-table th:nth-child(1) { width: 21%; }
.co-audit-table th:nth-child(2) { width: 16%; }
.co-audit-table th:nth-child(3) { width: 29%; }
.co-audit-table th:nth-child(4) { width: 34%; }
.co-audit-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.co-audit-table .project-link { border: 0; padding: 0; background: transparent; color: var(--text); font-size: 14px; line-height: 24px; text-align: left; }
.co-audit-table .project-link:hover { color: var(--brand); }
.co-audit-table td > .text-small, .co-audit-table td > small { display: block; margin-top: 4px; font-size: 12px; line-height: 20px; }
.co-audit-change .icon { width: 12px; height: 12px; flex-basis: 12px; opacity: .4; }
.co-audit-change del { color: #7c7c83; text-decoration-color: #bfc0c7; }
.co-audit-change ins { color: #376a91; text-decoration: none; }
.co-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.co-summary-item { position: relative; min-width: 0; padding: 24px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #fff; text-align: left; }
.co-summary-item > span, .co-summary-item > small { display: block; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-summary-item strong { display: block; margin-top: 12px; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.co-summary-item p { margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-summary-item > .icon { position: absolute; right: 16px; top: 16px; width: 16px; height: 16px; opacity: .35; }
.co-dashboard { margin-bottom: 24px; }
.co-dashboard .co-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0 24px 24px; margin-bottom: 0; }
.co-dashboard .co-summary-item { padding: 16px; border: 1px solid transparent; border-radius: 12px; background: #f7f7fa; }
.co-dashboard .co-summary-item:hover { border-color: #d1dfed; background: #f5f8fc; }
.co-dashboard .co-summary-item > span { padding-right: 16px; }
.co-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 184px; padding: 32px 24px; text-align: center; color: var(--text-secondary); }
.co-empty > .icon { width: 32px; height: 32px; flex-basis: 32px; opacity: .3; margin-bottom: 4px; }
.co-empty h3 { font-size: 14px; line-height: 24px; color: var(--text); font-weight: 500; }
.co-empty p { max-width: 320px; font-size: 12px; line-height: 20px; }
.co-form-error { display: block; color: var(--red); font-size: 12px; line-height: 20px; margin-top: 8px; }
.co-form-error:empty { display: none; }
.co-object-highlight { outline: 2px solid #88b9ed; outline-offset: 4px; scroll-margin-top: 24px; }
.co-page [id] { scroll-margin-top: 24px; }

/* Shared modal and role-picker contracts. */
.co-phase-item > span:last-child { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-phase-item.current > span:last-child { color: var(--brand); font-weight: 500; }
.co-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.co-card-top > div { min-width: 0; }
.co-card-top h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.co-card-top p { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-card-top .co-owner { margin-top: 8px; }
.co-actor-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.co-actor-option { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); text-align: left; }
.co-actor-option:hover { background: #fafcff; border-color: #b8d4ee; }
.co-actor-option.active, .co-actor-option[aria-pressed="true"] { background: #f1f7fe; border-color: #a3c7ec; }
.co-actor-option > div, .co-actor-option > span:not(.avatar):not(.badge) { min-width: 0; flex: 1; }
.co-actor-option strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.co-actor-option small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-actor-option .badge { margin-left: auto; padding: 2px 8px; }
.co-modal-summary { padding: 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 24px; background: #f8f8fa; }
.co-modal-summary h3 { font-size: 16px; line-height: 24px; }
.co-modal-summary p { color: var(--text-secondary); font-size: 12px; line-height: 20px; margin-top: 8px; }
.co-modal-summary .co-task-meta { margin-top: 12px; justify-content: flex-start; gap: 16px; }
.co-phase-change { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.co-phase-change .icon { width: 16px; height: 16px; flex-basis: 16px; opacity: .4; }
.co-status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 0; margin-bottom: 8px; }
.co-status-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid #dedee4; border-radius: 8px; background: #fff; color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.co-status-actions > button:hover { border-color: #aac8e5; color: var(--brand); }
.co-status-actions > button.active, .co-status-actions > [aria-pressed="true"] { border-color: #b8d4ee; color: var(--brand); background: #edf5ff; }
.co-status-actions .icon { width: 16px; height: 16px; flex-basis: 16px; }
.co-inline-error { display: block; color: var(--red); font-size: 12px; line-height: 20px; margin: 8px 0; }
.co-inline-error:empty { display: none; }
.co-page form.form-grid { margin-bottom: 0; }
.co-page .co-summary-item { text-align: left; }
.co-page button.co-summary-item:hover { border-color: #d2dce9; background: #fcfdff; }

@media (max-width:1279px) {
 .co-kanban { grid-template-columns: repeat(4,minmax(220px,1fr)); }
 .co-phase-track { padding: 24px 16px; }
 .collab-shortcuts { gap: 12px; }
 .collab-shortcuts > * { padding: 16px; gap: 8px; }
 .collab-project-entry { gap: 16px; }
 .role-switch small { display: none; }
 .role-switch > .avatar { width: 28px; height: 28px; }
 .topbar .co-actor-control > .avatar { display: none; }
}
@media (max-width:899px) {
 .collab-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .collab-project-entry { flex-wrap: wrap; }
 .collab-project-entry > div:first-child { flex: 1; min-width: 200px; }
 .co-summary-grid { gap: 12px; }
 .co-summary-item { padding: 16px; }
 .co-list-item { flex-wrap: wrap; gap: 12px; }
 .co-list-item > .co-item-actions { margin-left: auto; }
 .co-approval-card .co-item-actions { justify-content: flex-start; }
}
@media (max-width:767px) {
 .sidebar nav .nav-item { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
 .sidebar-bottom { margin-top: 12px; }
 .topbar-actions > .chip.demo { display: none; }
 .topbar-actions > .notice-button { display: inline-flex; }
 .topbar-actions > .co-notification-button { display: inline-flex; }
 .role-switch { padding: 4px; gap: 4px; min-width: 0; }
 .role-switch > .avatar { display: none; }
 .role-switch strong { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .role-switch small { display: none; }
 .notice-count { top: 0; right: 0; }
 .co-notification-count { top: 0; right: 0; }
 .topbar .co-actor-control { padding: 4px; gap: 4px; }
 .topbar .co-actor-control strong { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .topbar .co-actor-control small { display: none; }
 .collab-project-entry { padding: 24px; }
 .collab-project-entry .member-avatars, .collab-project-entry .avatar-group, .collab-member-avatars { margin-left: 0; }
 .co-kanban { grid-template-columns: repeat(2,minmax(0,1fr)); overflow-x: visible; gap: 16px; }
 .co-kanban-column { min-height: 0; }
 .co-toolbar { gap: 12px; }
 .co-toolbar select, .co-actor-control select { max-width: none; }
 .co-actor-control { width: 100%; justify-content: space-between; }
 .co-phase-track { grid-template-columns: repeat(7,minmax(96px,1fr)); padding: 16px; }
 .co-tabs { gap: 24px; }
 .co-tabs > button, .co-tabs > a { font-size: 12px; line-height: 20px; }
 .co-audit-row:not(tr) { grid-template-columns: minmax(0,1fr); gap: 8px; }
 .co-list-item, .co-delivery-card, .co-approval-card, .co-notification { padding: 24px; }
 .co-comment { padding: 24px; gap: 12px; }
 .co-comment-form { padding: 24px; }
 .co-dashboard .co-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:559px) {
 .topbar { gap: 8px; }
 .topbar .breadcrumb { gap: 4px; }
 .topbar-actions { gap: 4px; }
 .role-switch strong { max-width: 72px; }
 .role-switch > .icon:last-child { width: 12px; height: 12px; }
 .topbar .co-actor-control strong { max-width: 72px; font-size: 12px; }
 .collab-shortcuts { gap: 8px; }
 .collab-shortcuts > * { padding: 16px; }
 .collab-shortcuts strong { font-size: 18px; line-height: 28px; }
 .collab-shortcuts > * > .icon:last-child:not(:first-child) { display: none; }
 .collab-project-entry { gap: 16px; }
 .collab-project-entry > div:first-child { min-width: 0; flex-basis: 100%; }
 .collab-project-entry > .btn { margin-left: auto; }
 .co-kanban { grid-template-columns: minmax(0,1fr); }
 .co-kanban-column { padding: 16px; }
 .co-toolbar > .btn, .co-toolbar > .co-toolbar-actions { width: 100%; }
 .co-toolbar .co-toolbar-actions .btn { flex: 1; }
 .co-toolbar select { max-width: none; width: 100%; }
 .co-project-toolbar > .co-select-field, #co-audit-filter-form > .co-select-field, #co-audit-filter-form > .search-box { width: 100%; flex-basis: 100%; }
 .co-toolbar > .co-status-filter { gap: 4px; }
 .co-status-filter > button { padding-left: 8px; padding-right: 8px; }
 .co-section-head { align-items: flex-start; }
 .co-section-head h2 { font-size: 16px; line-height: 24px; }
 .co-section-head > .btn { flex-shrink: 0; }
 .co-actor-control { flex-wrap: wrap; padding: 12px; }
 .co-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
 .co-summary-item { padding: 16px 12px; }
 .co-summary-item strong { font-size: 24px; line-height: 32px; }
 .co-dashboard .co-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 16px 16px; gap: 8px; }
 .co-dashboard .co-summary-item { padding: 16px 12px; }
 .co-dashboard .co-summary-item > .icon { right: 12px; }
 .co-list-item, .co-delivery-card, .co-approval-card, .co-notification { padding: 16px; }
 .co-item-actions { gap: 8px; width: 100%; justify-content: flex-start; }
 .co-item-actions .btn { flex: 1; }
 .co-task-card .co-item-actions .btn { flex: 0 1 auto; }
 .co-list-item > .co-item-main { flex-basis: 100%; }
 .co-delivery-card > header, .co-approval-card > header, .co-delivery-head, .co-approval-head { flex-wrap: wrap; gap: 8px; }
 .co-comment { padding: 16px; gap: 8px; }
 .co-comment-form { padding: 16px; }
 .co-comment-form > footer { flex-wrap: wrap; gap: 12px; }
 .co-comment-form textarea { font-size: 16px; line-height: 24px; }
 .co-check-row { padding: 12px; }
 .co-notification { gap: 12px; }
 .co-notification.unread::before { margin-top: 8px; }
 .co-notification > .icon, .co-notification-icon { display: none; }
 .co-notice-symbol { display: none; }
 .co-audit-row:not(tr) { padding: 16px; }
 .co-audit-change { padding: 12px; }
 .co-actor-options { grid-template-columns: minmax(0,1fr); }
 .co-actor-option { padding: 12px; }
 .co-card-top { flex-wrap: wrap; gap: 8px; }
 .co-status-actions > button { flex: 1; }
 .co-delivery-section > .co-list { padding: 0 16px 16px; }
 .co-delivery-section > .card-header { flex-wrap: wrap; gap: 12px; }
 .co-check-row { gap: 8px; font-size: 12px; }
 .co-check-row > .badge { font-size: 12px; padding: 2px 4px; }
}
@media (max-height:760px) and (min-width:768px) {
 .sidebar { padding-top: 16px; }
 .sidebar > .brand { margin-bottom: 16px; }
 .sidebar > .workspace-switch { padding-top: 8px; padding-bottom: 8px; margin-bottom: 12px; }
 .sidebar-bottom .compute-mini { display: none; }
 .sidebar-bottom { margin-top: 12px; }
}
@media (pointer:coarse) {
 .role-switch, .notice-button, .co-tabs > button, .co-status-filter > button { min-height: 44px; }
 .co-toolbar select, .co-actor-control select, .co-status-filter select { font-size: 16px; line-height: 24px; }
 .co-check-row { min-height: 44px; }
}
@media print {
 .collab-shortcuts, .collab-project-entry .btn, .co-toolbar, .co-item-actions { display: none!important; }
 .co-kanban { display: block; overflow: visible; }
 .co-kanban-column { break-inside: avoid; margin-bottom: 24px; background: white; }
 .co-phase-track { overflow: visible; }
 .co-task-card, .co-delivery-card, .co-approval-card, .co-audit-row { break-inside: avoid; }
}