/* Record panels, forms, pickers, AI blocks and toasts in the monday / Vibe style. Spec §5 (item card, updates, timeline), §3.13 toast, §3.14 modal, §3.16 menus, §3.17 attention box, §8.10, §8.11 and QA-5/QA-6. Tokens come from ui/tokens.css. Loaded last, so these rules win over crm.css, monday-theme.css and design.css. */ /* ---------- Dialog shells ---------- */ #detail, #editor, #label-picker, #review-brief { padding: 0; border: 0; color: var(--primary-text-color); font: var(--font-text2-normal); background: var(--primary-background-color); } #detail::backdrop, #editor::backdrop { background: var(--backdrop-color); backdrop-filter: none; animation: backdrop-in var(--motion-productive-medium) linear; } #label-picker::backdrop, #review-brief::backdrop { background: transparent; backdrop-filter: none; } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes card-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes modal-in { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes panel-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Shared bits inside the record surfaces */ :is(#detail, #review-brief, #editor, #label-picker) h2, :is(#detail, #review-brief, #editor, #label-picker) h3, :is(#detail, #review-brief, #editor, #label-picker) h4 { letter-spacing: normal; } :is(#detail, #review-brief) .name-link { padding: 0; border: 0; background: none; color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; } :is(#detail, #review-brief) .name-link:hover { color: var(--primary-color); text-decoration: none; } :is(#detail, #review-brief) .muted { color: var(--secondary-text-color); } .status-fill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--label-color, var(--color-explosive)); color: var(--label-color-text, #fff); font: var(--font-text2-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-label.line.positive-line { --label-color: var(--positive-color); } .button.small-28 { height: 28px; min-height: 28px; padding: 2px var(--space-8); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip { --c: var(--label-blue); --c-selected: var(--label-blue-selected); display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 180px; padding: 0 var(--space-8); border: 0; border-radius: var(--border-radius-small); background: var(--c-selected); color: var(--primary-text-color); font: var(--font-text2-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; } :is(#detail, #label-picker, #review-brief, #editor) .label-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.green { --c: var(--label-green); --c-selected: var(--label-green-selected); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.amber { --c: var(--label-amber); --c-selected: var(--label-amber-selected); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.red { --c: var(--label-red); --c-selected: var(--label-red-selected); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.lilac { --c: var(--label-lilac); --c-selected: var(--label-lilac-selected); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.teal { --c: var(--label-teal); --c-selected: var(--label-teal-selected); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.pink { --c: var(--label-pink); --c-selected: var(--label-pink-selected); } :is(#detail, #label-picker, #review-brief, #editor) .label-chip.gray { --c: var(--label-gray); --c-selected: var(--label-gray-selected); } :is(#detail, #review-brief) .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); font: var(--font-text2-normal); color: var(--label-blue-text); background: var(--label-blue); } :is(#detail, #review-brief) .pill.green { background: var(--label-green); color: var(--color-done-green-text); } :is(#detail, #review-brief) .pill.amber { background: var(--label-amber); color: var(--color-working_orange-text); } :is(#detail, #review-brief) .pill.red { background: var(--label-red); color: var(--color-stuck-red-text); } :is(#detail, #review-brief) .pill.lilac { background: var(--label-lilac); color: var(--color-purple-text); } :is(#detail, #review-brief) .pill.gray { background: var(--label-gray); color: var(--color-explosive-text); } .attention-box .attention-body ul, .attention-box .attention-body p { margin: 0; } .attention-box .attention-body ul { padding-left: 20px; line-height: 22px; } .attention-box ul.attention-body { margin: 0; } /* ---------- Form fields (dialogs, cards and AI forms; spec §3.6, §3.7) ---------- */ :is(#editor, #detail) .field { display: flex; flex-direction: column; gap: 0; min-width: 0; font: var(--font-text2-normal); color: var(--primary-text-color); } :is(#editor, #detail) .field > span:first-child { padding-bottom: var(--space-4); font: var(--font-text2-normal); color: var(--primary-text-color); } :is(#editor, #detail) .field b { margin-left: 2px; color: var(--negative-color); font-weight: 400; } :is(#editor, #detail) .field input:not([type="checkbox"]):not([type="radio"]), :is(#editor, #detail) .field select, :is(#editor, #detail) .field textarea { width: 100%; box-sizing: border-box; height: 40px; min-height: 40px; margin: 0; padding: var(--space-8) var(--space-12); border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background-color: var(--primary-background-color); color: var(--primary-text-color); font: var(--font-text1-normal); outline: none; box-shadow: none; transition: border-color var(--motion-productive-medium) var(--motion-timing-transition); } #detail .field input:not([type="checkbox"]):not([type="radio"]), #detail .field select, #detail .field textarea { font: var(--font-text2-normal); } :is(#editor, #detail) .field textarea { height: auto; min-height: 80px; resize: vertical; line-height: 22px; } :is(#editor, #detail) .field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23676879'%3E%3Cpath d='M5.47 7.97a.75.75 0 0 1 1.06 0L10 11.44l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } :is(#editor, #detail) .field input:not([type="checkbox"]):hover, :is(#editor, #detail) .field select:hover, :is(#editor, #detail) .field textarea:hover { border-color: var(--primary-text-color); } :is(#editor, #detail) .field input:not([type="checkbox"]):focus, :is(#editor, #detail) .field select:focus, :is(#editor, #detail) .field textarea:focus { border-color: var(--primary-color); outline: none; box-shadow: none; } :is(#editor, #detail) .field input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--negative-color); } :is(#editor, #detail) .field > small { margin-top: var(--space-4); font: var(--font-text2-normal); color: var(--secondary-text-color); } :is(#editor, #detail) .field.checkbox { flex-direction: row; align-items: flex-start; gap: var(--space-8); } :is(#editor, #detail) .field.checkbox > span { padding: 0; } :is(#editor, #detail) .field.checkbox small { display: block; margin-top: 2px; color: var(--secondary-text-color); } :is(#editor, #detail) .field.checkbox input { margin-top: 2px; } /* ---------- Edit dialog: Vibe Modal medium (spec §3.14, §8.10) ---------- */ #editor.modal { width: min(540px, calc(100vw - 32px)); max-width: none; max-height: 80vh; border-radius: var(--border-radius-big); box-shadow: var(--box-shadow-large); overflow: hidden; } @media (min-width: 1280px) { #editor.modal { width: 580px; } } @media (min-width: 1440px) { #editor.modal { width: 620px; } } #editor.modal[open] { display: flex; flex-direction: column; animation: modal-in var(--motion-productive-long) cubic-bezier(0, 0, .4, 1); } #editor #record-form { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: 80vh; } #editor .dialog-heading { position: relative; display: block; flex: none; padding: var(--space-32) 64px var(--space-24) var(--space-32); border: 0; background: var(--primary-background-color); } #editor .dialog-heading .eyebrow:empty { display: none; } #editor .dialog-heading h2 { margin: 0; font: var(--font-h2-medium); color: var(--primary-text-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #editor #form-intro { margin: var(--space-4) 0 0; font: var(--font-text1-normal); color: var(--primary-text-color); } #editor .modal-close { position: absolute; top: var(--space-24); right: var(--space-24); } #editor .dialog-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-32) var(--space-32); } #editor .form-introduction { padding: 0; margin: 0 0 var(--space-16); border: 0; background: none; } #editor .form-introduction small { font: var(--font-text2-normal); color: var(--secondary-text-color); } #editor .form-grid, #editor #form-fields { display: flex; flex-direction: column; gap: var(--space-16); padding: 0; } #editor .form-section-title { margin: var(--space-8) 0 0; padding: var(--space-16) 0 0; border-top: 1px solid var(--layout-border-color); font: var(--font-text1-medium); color: var(--primary-text-color); } #editor #form-fields > .form-section-title:first-child { margin: 0; padding: 0; border: 0; } /* "More details": monday ExpandCollapse */ #editor details.source-details { margin: 0; padding: 0; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); color: var(--primary-text-color); } #editor details.source-details > summary { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--space-16); list-style: none; cursor: pointer; font: var(--font-text1-normal); color: var(--primary-text-color); border-radius: var(--border-radius-small); } #editor details.source-details > summary::-webkit-details-marker { display: none; } #editor details.source-details > summary::after { content: ""; width: 20px; height: 20px; background: currentColor; transition: transform var(--motion-productive-medium) var(--motion-timing-transition); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.47 7.97a.75.75 0 0 1 1.06 0L10 11.44l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.47 7.97a.75.75 0 0 1 1.06 0L10 11.44l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") center / contain no-repeat; } #editor details.source-details[open] > summary::after { transform: rotate(180deg); } #editor details.source-details > summary:hover { background: var(--primary-background-hover-color); } #editor details.source-details > .form-grid { padding: var(--space-8) var(--space-16) var(--space-16); } /* Errors and the change preview are attention boxes */ #editor #form-error { margin: 0; } #editor #form-error:empty { display: none; } #editor #form-error:not(:empty) { position: sticky; top: 0; z-index: 2; margin: 0 0 var(--space-16); padding: var(--space-12) var(--space-16) var(--space-12) 44px; border-radius: var(--border-radius-medium); background: var(--negative-color-selected) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23323338'%3E%3Cpath fill-rule='evenodd' d='M10 2.25a7.75 7.75 0 1 0 0 15.5 7.75 7.75 0 0 0 0-15.5ZM9.25 6a.75.75 0 0 1 1.5 0v4.5a.75.75 0 0 1-1.5 0V6ZM10 12.75a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E") no-repeat 16px 13px / 20px; color: var(--primary-text-color); font: var(--font-text2-normal); } /* A notice that is not an error (duplicate warning, "your changes are back in the form"): blue, with an info icon */ #editor #form-error.is-info:not(:empty) { background-color: var(--primary-selected-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23323338'%3E%3Cpath fill-rule='evenodd' d='M10 2.25a7.75 7.75 0 1 0 0 15.5 7.75 7.75 0 0 0 0-15.5ZM10 5.25a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM9.25 9.25a.75.75 0 0 1 1.5 0V14a.75.75 0 0 1-1.5 0V9.25Z'/%3E%3C/svg%3E"); } #editor #change-preview { margin: var(--space-16) 0 0; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--border-radius-medium); background: var(--allgrey-background-color); font: var(--font-text2-normal); } #editor #change-preview .change-row > *, #editor #change-preview span { margin-top: 0; } #editor #change-preview[hidden] { display: none; } #editor #change-preview .attention-title { font: var(--font-text1-medium); } #editor .change-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-4) 0; } #editor .change-row strong { font-weight: 600; min-width: 120px; } #editor .change-values { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--secondary-text-color); } #editor .change-old, #editor .change-new { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); color: var(--primary-text-color); overflow-wrap: anywhere; } #editor .change-old { background: var(--ui-background-color); text-decoration: line-through; text-decoration-color: var(--secondary-text-color); } #editor .change-new { background: var(--primary-selected-color); } #editor #change-preview small { display: block; margin-top: var(--space-8); color: var(--secondary-text-color); } /* Footer: Delete far left (tertiary negative), Cancel (tertiary) and Save (primary), all medium */ #editor .dialog-footer { position: static; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); padding: 20px var(--space-24); border: 0; background: var(--primary-background-color); box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, .1); z-index: 3; } #editor .dialog-footer .button { height: 40px; min-height: 40px; min-width: 0; padding: var(--space-8) var(--space-16); font: var(--font-text1-normal); } #editor .dialog-footer .delete-record { margin-right: auto; color: var(--negative-color); border-color: transparent; background: transparent; } #editor .dialog-footer .delete-record:hover:not(:disabled) { background: var(--negative-color-selected); } /* ---------- CRM item card: full-view modal (spec §5.4, §3.14 full-view) ---------- */ #detail.item-card { position: fixed; inset: 40px 24px 0 24px; width: auto; height: auto; max-width: none; max-height: none; margin: 0; overflow: hidden; border-radius: var(--border-radius-big) var(--border-radius-big) 0 0; background: var(--allgrey-background-color); box-shadow: var(--box-shadow-large); } @media (min-width: 1720px) { #detail.item-card { inset: 40px 40px 0 40px; } } #detail.item-card[open] { display: flex; flex-direction: column; animation: card-up var(--motion-expressive-short) var(--motion-timing-enter); } #detail-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } #detail .item-header { flex: none; padding: var(--space-12) var(--space-24) 0; background: var(--primary-background-color); border-bottom: 1px solid var(--layout-border-color); } #detail .item-breadcrumb { display: flex; align-items: center; gap: 2px; min-height: 20px; color: var(--secondary-text-color); } #detail .item-breadcrumb button { padding: 0 2px; border: 0; border-radius: var(--border-radius-small); background: none; color: var(--secondary-text-color); font: var(--font-text2-normal); cursor: pointer; } #detail .item-breadcrumb button:hover { background: var(--primary-background-hover-color); } #detail .item-breadcrumb button:last-child:not(:first-child) { color: var(--primary-text-color); font-weight: 500; } #detail .item-breadcrumb svg.icon { color: var(--secondary-text-color); } #detail .item-header-row { display: flex; align-items: center; gap: var(--space-16); min-height: 48px; } #detail .item-title-row { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-8); min-width: 0; } #detail .item-title-row h2 { margin: 0; font: var(--font-h2-normal); letter-spacing: var(--letter-spacing-h2); color: var(--primary-text-color); overflow-wrap: anywhere; } #detail .detail-labels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; } #detail .add-label { color: var(--secondary-text-color); } #detail .add-label svg.icon { color: var(--secondary-text-color); } #detail .item-actions { display: flex; align-items: center; gap: var(--space-8); flex: none; } #detail .item-owner { display: inline-flex; } #detail .item-owner .avatar { --size: 32px; } #detail .item-menu-wrap { position: relative; display: inline-flex; } #detail .item-menu { top: calc(100% + 4px); right: 0; left: auto; min-width: 220px; animation: popover-in var(--motion-productive-medium) var(--motion-timing-enter); } #detail .item-menu .menu-item:last-child svg.icon { color: var(--icon-color); } #detail .detail-tabs { display: flex; gap: 0; margin: var(--space-4) 0 -1px; overflow-x: auto; overflow-y: hidden; border-bottom: 0; scrollbar-width: none; } /* The 2px active underline sits inside the tab strip, which clips anything below it (§3.3). */ #detail .detail-tabs > [aria-selected="true"]::after { bottom: 0; } #detail .detail-tabs::-webkit-scrollbar { display: none; } #detail .detail-tabs > button { flex: none; gap: var(--space-4); height: 40px; padding: 0 var(--space-16); border: 0; background: none; color: var(--primary-text-color); font: var(--font-text2-normal); white-space: nowrap; box-shadow: none; } #detail .detail-tabs > button:hover { background: linear-gradient(var(--primary-background-hover-color), var(--primary-background-hover-color)) center / 100% 32px no-repeat; } #detail .detail-tabs > button[aria-selected="true"] { color: var(--primary-text-color); font-weight: 400; } #detail .detail-tabs > button svg.icon { color: var(--primary-text-color); } #detail .detail-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-16) var(--space-24) var(--space-24); font: var(--font-text2-normal); } #detail .detail-panel[hidden] { display: none; } #detail .card-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-16) var(--space-8); color: var(--secondary-text-color); text-align: center; } #detail .card-empty p { margin: 0; } #detail .card-empty b { display: block; color: var(--primary-text-color); font: var(--font-text1-medium); margin-bottom: 2px; } #detail .card-empty svg.icon { color: var(--ui-border-color); } #detail .preserve-lines { margin: 0; white-space: pre-wrap; line-height: 22px; } /* Deal stages widget: key facts, Won / Lost, chevron pipeline */ #detail .stage-widget .widget-body { padding: var(--space-16) var(--space-16) var(--space-24); } #detail .stage-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } #detail .stage-facts { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; } #detail .stage-facts .chip { height: 24px; } #detail .stage-close { display: flex; gap: 6px; } #detail .stage-bar { display: flex; margin-top: var(--space-16); overflow-x: auto; scrollbar-width: none; } #detail .stage-bar::-webkit-scrollbar { display: none; } #detail .stage-seg { flex: 1 1 0; min-width: 104px; height: 32px; margin: 0 0 0 -8px; padding: 0 12px 0 20px; border: 0; background: var(--crm-stage-inactive); color: var(--crm-stage-inactive-text); font: var(--font-text2-normal); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); transition: background-color var(--motion-productive-short) var(--motion-timing-transition), filter var(--motion-productive-short) var(--motion-timing-transition); } #detail .stage-seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .stage-seg:first-child { margin-left: 0; padding-left: 12px; border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); } #detail .stage-seg:last-child { border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); } #detail .stage-seg.done { background: var(--crm-stage-active); color: #fff; } #detail .stage-seg:hover { filter: brightness(.9); } #detail .stage-seg:focus-visible { outline: none; filter: brightness(.85); } #detail .stage-seg.current span { font-weight: 500; } #detail .stage-bar.inactive .stage-seg { background: var(--crm-stage-inactive); color: var(--crm-stage-inactive-text); } #detail .stage-state { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-12); color: var(--secondary-text-color); } #detail .stage-state .status-fill { height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); } /* Emails & Activities: toolbar and the activity timeline (spec §5.4) */ #detail .activity-widget .widget-body { padding: 0; } :is(#detail, .nx-team) .widget-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); min-height: 48px; padding: var(--space-8) var(--space-16); box-sizing: border-box; border-bottom: 1px solid var(--ui-background-color); } :is(#detail, .nx-team) .widget-toolbar .button svg.icon, :is(#detail, .nx-team) .widget-tools .button svg.icon, :is(#detail, .nx-team) .updates-top .button svg.icon { width: 16px; height: 16px; } :is(#detail, .nx-team) .widget-toolbar .button.primary svg.icon { color: #fff; } #detail .timeline-area { padding: var(--space-16) var(--space-24); background: var(--allgrey-background-color); } #detail .item-timeline { padding: 0; } #detail .timeline-month { display: flex; justify-content: center; margin: var(--space-8) 0 var(--space-16); } #detail .timeline-month span { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); background: var(--primary-background-color); font: var(--font-text2-normal); } #detail .item-timeline .timeline-item { position: relative; display: block; gap: 0; padding: 0 0 var(--space-16); border: 0; font: var(--font-text2-normal); color: var(--primary-text-color); } #detail .item-timeline .timeline-item::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 0; width: 2px; background: var(--timeline-line-color); } #detail .item-timeline .timeline-item:last-child::before, #detail .item-timeline .timeline-item:has(+ .timeline-month)::before { bottom: var(--space-16); } #detail .item-timeline .timeline-top { display: flex; align-items: center; gap: var(--space-8); height: 32px; color: var(--secondary-text-color); font: var(--font-text2-normal); } #detail .item-timeline .timeline-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 6px; background: var(--act, var(--color-sunset)); color: #fff; } #detail .item-timeline .timeline-top time { margin-left: auto; white-space: nowrap; } #detail .timeline-card { margin: 0 0 0 32px; padding: var(--space-16); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); } #detail .timeline-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } #detail .timeline-who > span:not(.avatar):not(.status-label) { flex: 1; min-width: 0; } #detail .timeline-who b { font-weight: 700; } #detail .timeline-text { margin: var(--space-12) 0 0; white-space: pre-wrap; line-height: 20px; color: var(--primary-text-color); } #detail .timeline-commit, #detail .post-commit { margin: var(--space-8) 0 0; color: var(--secondary-text-color); } #detail .evidence { margin-top: var(--space-8); } #detail .evidence a { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-8); border: 1px solid var(--color-dark-blue); border-radius: var(--border-radius-small); color: var(--color-dark-blue); text-decoration: none; font: var(--font-text2-normal); } #detail .evidence a:hover { background: var(--primary-highlighted-color); } /* Updates tab: composer and update posts (spec §5.3, QA-5) */ :is(#detail, #item-panel) .updates-tab { max-width: 760px; } :is(#detail, #item-panel) .updates-top { display: flex; justify-content: flex-end; min-height: 32px; margin-bottom: var(--space-8); } :is(#detail, #item-panel) .composer { padding: var(--space-12) var(--space-16); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); transition: border-color var(--motion-productive-long) var(--motion-timing-transition); } :is(#detail, #item-panel) .composer:focus-within { border-color: var(--primary-color); } :is(#detail, #item-panel) .composer textarea { display: block; width: 100%; min-height: 64px; padding: 0; border: 0; outline: none; resize: none; background: transparent; color: var(--primary-text-color); font: var(--font-text2-normal); box-shadow: none; transition: min-height var(--motion-productive-long) var(--motion-timing-transition); } :is(#detail, #item-panel) .composer textarea:focus, :is(#detail, #item-panel) .composer textarea:not(:placeholder-shown) { min-height: 120px; } :is(#detail, #item-panel) .composer textarea::placeholder { color: var(--placeholder-color); } /* Collapsed composer is a plain 90px box; the bar and the Update button appear on focus or once it holds text (§5.3). */ :is(#detail, #item-panel) .composer:not(:focus-within):not(.has-text) .composer-bar { display: none; } :is(#detail, #item-panel) .composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-8); } :is(#detail, #item-panel) .composer-bar small { color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, #item-panel) .update-feed { display: flex; flex-direction: column; } :is(#detail, #item-panel) .update-post { display: block; margin-top: var(--space-16); padding: 0; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); font: var(--font-text2-normal); } :is(#detail, #item-panel) .post-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-16); } :is(#detail, #item-panel) .post-head b { font-weight: 700; } :is(#detail, #item-panel) .post-head time { color: var(--secondary-text-color); } :is(#detail, #item-panel) .post-head .status-label { margin-left: auto; } :is(#detail, #item-panel) .post-tools { display: inline-flex; align-items: center; gap: var(--space-4); margin-left: auto; } :is(#detail, #item-panel) .post-head .status-label + .post-tools { margin-left: 0; } :is(#detail, #item-panel) .post-menu-wrap { position: relative; display: inline-flex; } :is(#detail, #item-panel) .post-menu-button { width: 24px; height: 24px; } :is(#detail, #item-panel) .post-menu { position: absolute; top: calc(100% + 4px); right: 0; left: auto; min-width: 200px; z-index: 20; } :is(#detail, #item-panel) .post-body { padding: 0 var(--space-16) var(--space-16); font: 400 14px/21px var(--font-family); color: var(--primary-text-color); } :is(#detail, #item-panel) .post-body p { margin: 0; white-space: pre-wrap; font: inherit; color: inherit; } :is(#detail, #item-panel) .post-kind { --label-color: var(--color-dark-blue); height: 22px; margin-bottom: var(--space-8); } :is(#detail, #item-panel) .post-commit { font-size: 13px; line-height: 20px; } :is(#detail, #item-panel) .updates-empty { display: flex; flex-direction: column; align-items: center; margin-top: 60px; text-align: center; color: var(--secondary-text-color); } :is(#detail, #item-panel) .updates-empty svg.icon { color: var(--ui-border-color); } :is(#detail, #item-panel) .updates-empty h4 { margin: var(--space-12) 0 var(--space-4); font: 600 17px/23px var(--title-font-family); color: var(--primary-text-color); } :is(#detail, #item-panel) .updates-empty p { max-width: 280px; margin: 0; } /* Mini boards inside widgets (follow-ups, deals, contacts, demos) */ #detail .mini-list { display: flex; flex-direction: column; } #detail .mini-row { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--ui-background-color); } #detail .mini-row:last-child { border-bottom: 0; } #detail .mini-row > svg.icon { flex: none; color: var(--icon-color); } #detail .mini-row > .name-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .mini-row .status-fill { flex: none; width: 128px; height: 32px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); } /* Long labels ellipsize at the end, like a monday status cell (a centered inline-flex box cannot ellipsize its text). */ #detail .mini-row .status-fill, #detail .detail-fact.status .status-fill { display: block; line-height: 32px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .detail-fact.status .status-fill { line-height: 40px; } #detail .mini-main { display: flex; flex: 1; flex-direction: column; min-width: 0; } #detail .mini-main .name-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .mini-main small { overflow: hidden; color: var(--secondary-text-color); font: var(--font-text3-normal); text-overflow: ellipsis; white-space: nowrap; } #detail .mini-cell { display: inline-flex; align-items: center; flex: none; min-height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--border-radius-small); background: none; color: var(--primary-text-color); font: var(--font-text2-normal); cursor: pointer; } #detail span.mini-cell { cursor: default; } #detail button.mini-cell:hover { background: var(--primary-background-hover-color); } #detail .mini-date { min-width: 96px; } #detail .mini-date .date-view { display: inline-flex; align-items: center; gap: 6px; } #detail .mini-value { flex: none; min-width: 72px; color: var(--secondary-text-color); text-align: right; white-space: nowrap; } #detail .task-row .button { flex: none; } #detail .task-row .button svg.icon { width: 16px; height: 16px; } /* Embedded mini boards (spec §5.4): the board grid inside a widget — 36px header row, 6px group bar, gridlines, "+ Add" row, "View all N". */ #detail .mini-widget > .widget-body { padding: 0; } #detail .mini-board { padding: var(--space-12) var(--space-16) var(--space-16); } #detail .mb-scroll { overflow-x: auto; scrollbar-width: thin; } #detail .mini-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; font: var(--font-text2-normal); color: var(--primary-text-color); } #detail .mini-table th, #detail .mini-table td { height: 36px; padding: 0; box-sizing: border-box; border: 0; border-right: 1px solid var(--table-border-color); border-bottom: 1px solid var(--table-border-color); background: var(--primary-background-color); text-align: center; vertical-align: middle; white-space: nowrap; overflow: hidden; font: var(--font-text2-normal); color: var(--primary-text-color); text-transform: none; letter-spacing: 0; } #detail .mini-table thead th { border-top: 1px solid var(--table-border-color); padding: 0 8px; text-overflow: ellipsis; font-weight: 400; } #detail .mini-table .mb-name { padding: 0 8px 0 calc(var(--group-bar-width, 6px) + 8px); box-shadow: inset var(--group-bar-width, 6px) 0 0 var(--group-color); text-align: left; } #detail .mini-table thead th.mb-name { border-top-left-radius: 6px; text-align: center; } #detail .mini-table tbody tr:hover td { background: var(--primary-background-hover-color); } #detail .mini-table tbody tr.mb-add:hover td, #detail .mini-table tbody tr.mb-empty:hover td { background: var(--primary-background-color); } #detail .mini-table tr.mb-add:last-child td, #detail .mini-table tr.mb-empty:last-child td { border-bottom-left-radius: 6px; } #detail .mini-table .mb-name .name-link, #detail .mini-table .mb-name > .name-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } #detail .mini-table .mb-name-cell { display: flex; align-items: center; gap: var(--space-8); min-width: 0; } #detail .mini-table .mb-name-cell .name-link { flex: 0 1 auto; min-width: 0; } #detail .mini-table .mb-check { flex: none; margin-left: auto; opacity: 0; transition: opacity var(--motion-productive-short); } #detail .mini-table tr:hover .mb-check, #detail .mini-table .mb-check:focus-visible { opacity: 1; } #detail .mini-table .mb-check svg.icon { width: 16px; height: 16px; } #detail .mini-table .mb-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } #detail .mini-table .mb-plain { display: flex; align-items: center; justify-content: center; height: 35px; } #detail .mini-table .mb-date .date-view { display: inline-flex; align-items: center; gap: 6px; } #detail .mini-table .mb-text, #detail .mini-table .mb-link { display: block; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .mini-table .mb-link { color: var(--link-color); text-decoration: none; } #detail .mini-table .mb-link:hover { text-decoration: underline; } #detail .mini-table td .status-fill { display: block; width: 100%; height: 35px; padding: 0 8px; border-radius: 0; line-height: 35px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .mini-table tr.mb-empty td { padding: 0 8px 0 calc(var(--group-bar-width, 6px) + 8px); box-shadow: inset var(--group-bar-width, 6px) 0 0 var(--group-color); text-align: left; color: var(--secondary-text-color); } #detail .mini-table tr.mb-add td { padding: 0 0 0 calc(var(--group-bar-width, 6px) + 2px); box-shadow: inset var(--group-bar-width, 6px) 0 0 var(--group-color-selected, color-mix(in srgb, var(--group-color) 50%, #fff)); text-align: left; } #detail .mb-add-button { display: flex; align-items: center; width: 100%; height: 35px; margin: 0; padding: 0 8px; border: 0; background: transparent; color: var(--secondary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; } #detail .mb-add-button:hover { color: var(--primary-text-color); } #detail .mb-more { display: flex; margin: var(--space-12) auto 0; } #detail :is(.mini-table, .info-list) .deadline { display: inline-flex; } #detail .deadline-pie { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--secondary-text-color); background: conic-gradient(var(--secondary-text-color) calc(var(--p, 0) * 360deg), transparent 0); } #detail .deadline-ring { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-explosive); } #detail .deadline-overdue { width: 16px; height: 16px; color: var(--color-stuck-red); } #detail .deadline-done { width: 16px; height: 16px; color: var(--positive-color); } #detail .mini-table .date-view.done .date-text { text-decoration: line-through; } /* Widget Fullscreen button (spec §5.4): the widget fills the card body until collapsed again. */ #detail .widget-head .widget-max, #detail .section-head .widget-max { flex: none; width: 32px; height: 32px; margin-left: auto; color: var(--icon-color); } #detail .widget-head .widget-max svg.icon, #detail .section-head .widget-max svg.icon { width: 20px; height: 20px; } #detail .detail-body { position: relative; } #detail .detail-body:has(.is-max) { overflow: hidden; } #detail .widget.is-max, #detail .detail-section.is-max { position: absolute; inset: var(--space-16) var(--space-24) var(--space-24); z-index: 5; overflow: auto; margin: 0; } /* News ("What's new") and Apollo company profile widgets (spec §8.10) */ #detail .news-list { margin: 0 !important; padding: 0 var(--space-16); list-style: none; } #detail .news-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-16); min-height: 64px; padding: var(--space-12) 0; box-sizing: border-box; border-bottom: 1px solid var(--ui-background-color); } #detail .news-list li:last-child { border-bottom: 0; } #detail .news-list a { grid-column: 1; color: var(--link-color); font: var(--font-text2-normal); text-decoration: none; } #detail .news-list a:hover { text-decoration: underline; } #detail .news-list small { grid-column: 2; grid-row: 1; color: var(--secondary-text-color); font: var(--font-text3-normal); white-space: nowrap; } #detail .news-list p { grid-column: 1 / -1; margin: 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } #detail .account-news > .news-note, #detail .account-news > small { display: block; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .company-about { line-height: 22px; } #detail .company-tech { display: flex; flex-wrap: wrap; gap: var(--space-4); } #detail .company-tech .pill { background: var(--crm-chip-color); color: var(--primary-text-color); height: 22px; } /* ---------- AI blocks (spec §8.11, QA-6) ---------- */ .button.ai-primary { border: 0; background: var(--ai-button-gradient); color: #fff; } .button.ai-primary:hover:not(:disabled) { background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--ai-button-gradient); } .button.ai-primary:disabled { background: var(--disabled-background-color); color: var(--disabled-text-color); } .button.ai-primary .ai-sparkle.mono { color: #fff; } .button.ai-tertiary { gap: var(--space-8); color: var(--primary-text-color); } :is(#detail, #review-brief) .ai-block { position: relative; margin: 0; padding: var(--space-16); border: 1px solid transparent; border-radius: var(--border-radius-medium); background: linear-gradient(#fff, #fff) padding-box, var(--ai-gradient) border-box; box-shadow: var(--ai-glow); color: var(--primary-text-color); font: var(--font-text2-normal); } :is(#detail, #review-brief) .ai-block h3::before { content: none; display: none; } :is(#detail, #review-brief) .ai-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); min-height: 32px; margin: 0 0 var(--space-12); } :is(#detail, #review-brief) .ai-block-head h3 { margin: 0; font: var(--font-h3-normal); letter-spacing: var(--letter-spacing-h3); color: var(--primary-text-color); } :is(#detail, #review-brief) .ai-block-tools { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: auto; } .ai-stale { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--primary-text-color); font: var(--font-text3-normal); } .ai-stale svg.icon { color: var(--warning-color-hover); } #detail .ai-block p { margin: 0; line-height: 20px; color: var(--primary-text-color); } #detail .ai-block .ai-intro { color: var(--secondary-text-color); } #detail .ai-loading { display: flex; align-items: center; gap: var(--space-8); color: var(--secondary-text-color) !important; } #detail .ai-loading .loader { color: var(--ai-color); } #detail .ai-health { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); color: var(--secondary-text-color); } #detail .ai-health .status-fill { height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); } #detail .ai-summary { margin-top: var(--space-12) !important; } #detail .ai-block h4 { margin: var(--space-16) 0 var(--space-4); font: var(--font-text2-medium); color: var(--primary-text-color); } #detail .ai-block ul { margin: 0; padding-left: 20px; line-height: 22px; } #detail .ai-next { margin-top: var(--space-16); padding: var(--space-12); border-radius: var(--border-radius-small); background: var(--ai-surface-color); } #detail .ai-next h4 { margin: 0 0 var(--space-4); color: var(--ai-text-color); } #detail .ai-next p + p { margin-top: var(--space-4); } #detail .ai-next strong { font-weight: 600; } #detail .ai-next small { display: block; color: var(--secondary-text-color); } #detail .ai-next .button { margin-top: var(--space-12); } #detail .ai-next .button svg.icon, #detail .ai-email .button svg.icon { width: 16px; height: 16px; } #detail .ai-note { display: block; margin-top: var(--space-12); color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .ai-block .button-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); } #detail .ai-block .attention-box { margin: 0 0 var(--space-12); } #detail .ai-email-form .form-grid.compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); padding: 0; } #detail .ai-email .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); } #detail .ai-email .chip-row .chip { padding: 0 var(--space-8); } #detail .ai-email-result { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--ui-background-color); } #detail .ai-email-result textarea { min-height: 200px; } #detail .ai-email-result .attention-box, #detail .ai-email-result .button-row { margin: 0; } /* ---------- Label picker: monday popover (spec §8.10) ---------- */ #label-picker { width: 280px; max-width: calc(100vw - 32px); max-height: min(480px, calc(100vh - 32px)); border-radius: var(--border-radius-medium); box-shadow: var(--box-shadow-medium); overflow: hidden; } #label-picker[open] { display: flex; flex-direction: column; animation: popover-in var(--motion-productive-medium) var(--motion-timing-enter); } #label-picker.anchored { position: fixed; inset: auto; margin: 0; } #label-picker-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: var(--space-8); } #label-picker .picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 0 0 var(--space-8) var(--space-8); } #label-picker .picker-head h2 { margin: 0; font: var(--font-text2-medium); color: var(--primary-text-color); } #label-picker .picker-note { margin: 0 var(--space-8) var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-normal); } #label-picker .label-picker-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; } #label-picker .picker-search { flex: none; height: 32px; box-sizing: border-box; } #label-picker .picker-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font: var(--font-text2-normal); color: var(--primary-text-color); } #label-picker .picker-search input::-webkit-search-cancel-button { display: none; } #label-picker .label-options { display: flex; flex-direction: column; gap: 2px; min-height: 0; margin: var(--space-8) 0 0; overflow: auto; } #label-picker .label-option { display: flex; align-items: center; gap: var(--space-8); flex: none; height: 32px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); cursor: pointer; } #label-picker .label-option:hover { background: var(--primary-background-hover-color); } #label-picker .label-option .label-chip { min-width: 0; } #label-picker .label-count { margin-left: auto; color: var(--secondary-text-color); font: var(--font-text3-normal); } #label-picker .label-create { display: flex; align-items: center; flex: none; height: 32px; padding: 0 var(--space-8); border: 0; border-radius: var(--border-radius-small); background: none; color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; } #label-picker .label-create:hover { background: var(--primary-background-hover-color); } #label-picker .label-create[data-label-create] { color: var(--primary-color); } #label-picker .picker-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex: none; margin: var(--space-8) calc(-1 * var(--space-8)) calc(-1 * var(--space-8)); padding: var(--space-8); border-top: 1px solid var(--layout-border-color); } #label-picker .picker-foot .button svg.icon { width: 16px; height: 16px; } /* ---------- Meeting brief: 700px item side panel (spec §5.2, §8.10) ---------- */ #review-brief.side-panel { position: fixed; inset: var(--topbar-height) 0 0 auto; width: min(var(--item-panel-width), 100vw); height: auto; max-width: none; max-height: none; margin: 0; border-radius: 0; box-shadow: -4px 0 12px rgba(0, 0, 0, .1); overflow: hidden; z-index: 900; } #review-brief.side-panel[open] { display: flex; flex-direction: column; animation: panel-in var(--motion-expressive-short) var(--motion-timing-enter); } #review-brief-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } #review-brief .side-panel-head { position: relative; flex: none; padding: 46px var(--space-24) var(--space-16) 22px; border-bottom: 1px solid var(--layout-border-color); } #review-brief .side-panel-close { position: absolute; top: var(--space-12); left: var(--space-12); } #review-brief .side-panel-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-12) var(--space-16); } #review-brief .side-panel-title h2 { margin: 0; font: var(--font-h2-normal); letter-spacing: var(--letter-spacing-h2); color: var(--primary-text-color); } #review-brief .side-panel-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: 6px; color: var(--secondary-text-color); font: var(--font-text2-normal); } #review-brief .side-panel-actions { display: flex; gap: var(--space-8); } #review-brief .side-panel-sub > span:last-child { flex: 1 1 200px; min-width: 0; } #review-brief .side-panel-actions .button svg.icon { width: 16px; height: 16px; } #review-brief .side-panel-title { flex-wrap: nowrap; } #review-brief .side-panel-title > div:first-child { flex: 1; min-width: 0; } #review-brief .side-panel-title h2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } #review-brief .side-panel-actions { flex: none; margin-top: -6px; } @media (max-width: 760px) { #review-brief .side-panel-title { flex-wrap: wrap; } #review-brief .side-panel-title h2 { white-space: normal; } #review-brief .side-panel-title > div:first-child { flex: 1 1 100%; } #review-brief .side-panel-actions { width: 100%; margin-top: 0; } } /* Tab row under the header (spec §8.10 → §5.2): 40px tabs, the head's 1px bottom border runs full width under them. */ #review-brief .side-panel-head { padding-bottom: 0; } #review-brief .brief-tabs { display: flex; gap: 0; margin: var(--space-16) 0 0 -6px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; } #review-brief .brief-tabs > button { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-16); border: 0; background: none; color: var(--primary-text-color); font: var(--font-text2-normal); white-space: nowrap; cursor: pointer; } #review-brief .brief-tabs > button svg.icon { width: 16px; height: 16px; } #review-brief .brief-tabs > button:hover { background: linear-gradient(var(--primary-background-hover-color), var(--primary-background-hover-color)) center / 100% 32px no-repeat; } #review-brief .brief-tabs > [aria-selected="true"]::after { bottom: 0; } #review-brief .brief-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-16) var(--space-24) var(--space-24); font: var(--font-text2-normal); } #review-brief .brief-check { margin-bottom: var(--space-24); } #review-brief .prep-headline { margin: 0 0 var(--space-24); font: var(--font-h3-normal); color: var(--primary-text-color); } #review-brief .brief-step { margin: var(--space-24) 0 0; } #review-brief .brief-step h3 { display: flex; align-items: baseline; gap: var(--space-8); margin: 0 0 var(--space-8); font: var(--font-h3-normal); color: var(--primary-text-color); } #review-brief .brief-num { font: 500 15px/21px var(--title-font-family); color: var(--ai-color); } #review-brief .brief-step h3 small { margin-left: auto; color: var(--secondary-text-color); font: var(--font-text2-normal); } #review-brief .brief-list { margin: 0; padding-left: 20px; line-height: 22px; } /* Agenda items are numbered in the AI colour (Poppins 500 16px, §8.10); section headings stay plain. */ #review-brief ol.brief-list { list-style: none; counter-reset: ag; padding-left: 28px; } #review-brief ol.brief-list li { counter-increment: ag; position: relative; line-height: 22px; } #review-brief ol.brief-list li + li { margin-top: var(--space-4); } #review-brief ol.brief-list li::before { content: counter(ag); position: absolute; left: -28px; font: 500 15px/21px var(--title-font-family); color: var(--ai-color); } #review-brief .brief-deal { margin-top: var(--space-8); padding: var(--space-12) var(--space-16); border: 1px solid var(--ui-background-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); } #review-brief .brief-deal-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); } #review-brief .brief-deal-name { display: flex; flex: 1; flex-direction: column; min-width: 160px; } #review-brief .brief-account { padding: 0; border: 0; background: none; color: var(--secondary-text-color); font: var(--font-text3-normal); text-align: left; cursor: pointer; } #review-brief .brief-account:hover { color: var(--primary-color); } #review-brief .brief-deal-name .name-link { font: var(--font-text2-medium); } #review-brief .brief-deal-top .status-fill, #review-brief .brief-step-owner .status-fill { height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); } #review-brief .brief-owner { display: flex; align-items: center; gap: var(--space-8); } #review-brief .brief-owner small, #review-brief .brief-current small, #review-brief .brief-action small { color: var(--secondary-text-color); font: var(--font-text3-normal); } #review-brief .brief-issue { margin: var(--space-8) 0; line-height: 20px; } #review-brief .brief-current { display: flex; flex-direction: column; gap: 2px; padding: var(--space-8) 0; border-top: 1px solid var(--ui-background-color); } #review-brief .brief-action { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-4); padding: var(--space-8) var(--space-12); border-radius: var(--border-radius-small); background: var(--ai-surface-color); } #review-brief .brief-action > span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } #review-brief .brief-step-owner { display: flex !important; align-items: center; gap: var(--space-4); } #review-brief .brief-step-owner b { color: var(--primary-text-color); font-weight: 600; } #review-brief .warn { color: var(--negative-color); font-weight: 600; } #review-brief .brief-partner { display: flex; flex-direction: column; gap: 2px; padding: var(--space-8) 0; } #review-brief .brief-partner span { color: var(--secondary-text-color); } #review-brief .brief-asks { margin: var(--space-4) 0 0; padding-left: 20px; line-height: 22px; } #review-brief .brief-num { display: inline; width: auto; height: auto; border: 0; border-radius: 0; background: none; } #review-brief .brief-account, #review-brief .brief-owner > small, #review-brief .brief-current > small, #review-brief .brief-action small { text-transform: none; letter-spacing: normal; font-weight: 400; } #review-brief .brief-owner { flex-direction: row; align-items: center; } #review-brief .brief-issue { color: var(--primary-text-color); font: var(--font-text2-normal); } #review-brief .brief-current { margin: 0; border-radius: 0; background: none; font: var(--font-text2-normal); } #review-brief .brief-action { border-top: 0; font: var(--font-text2-normal); } #review-brief .brief-step-owner { margin-top: 2px !important; font-size: 11.5px !important; color: var(--secondary-text-color) !important; } #review-brief .brief-partner b { margin: 0; font: var(--font-text2-medium); } #review-brief .brief-asks li::marker { content: normal; color: var(--ai-color); } #review-brief .brief-list li { margin: 0; color: var(--primary-text-color); } #review-brief .brief-foot { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--secondary-text-color); } /* ---------- Toast (spec §3.13): icon, message, actions, close ---------- */ #toast { gap: 0; padding: var(--space-8); flex-wrap: nowrap; } #toast.toast-dark { background: var(--inverted-color-background); } #toast.toast-positive { background: var(--positive-color); } #toast.toast-negative { background: var(--negative-color); } #toast.toast-warning { background: var(--warning-color); color: var(--primary-text-color); } #toast .toast-icon { flex: none; margin-left: var(--space-8); color: currentColor; } #toast > .toast-text { margin: 0 var(--space-8); } #toast .toast-actions button { white-space: nowrap; } #toast > .toast-text { flex: 1 1 auto; min-width: 0; } #toast .toast-actions { flex: none; display: inline-flex; gap: var(--space-8); margin-left: var(--space-16); } #toast .toast-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-left: var(--space-8); padding: 0; border: 0; color: inherit; } #toast .toast-close:hover { background: rgba(0, 0, 0, .15); } /* ---------- Narrow screens ---------- */ @media (max-width: 1100px) { #detail .card-columns { grid-template-columns: minmax(0, 1fr); } #detail .card-side { order: -1; } } @media (max-width: 760px) { #detail.item-card { inset: 0; border-radius: 0; } #detail .item-header { padding: var(--space-8) var(--space-16) 0; } #detail .item-actions .ai-tertiary, #detail .item-owner { display: none; } #detail .detail-tabs { margin: var(--space-4) calc(-1 * var(--space-16)) -1px; padding: 0 var(--space-4); } #detail .detail-tabs > button { padding: 0 var(--space-12); } #detail .detail-body { padding: var(--space-12); } #detail .timeline-area { padding: var(--space-12); } #detail .timeline-card { margin-left: 0; margin-top: var(--space-4); } #detail .item-timeline .timeline-item::before { display: none; } #detail .mini-row { flex-wrap: wrap; row-gap: var(--space-4); } #detail .mini-row > .name-link, #detail .mini-main { flex-basis: calc(100% - 140px); } #detail .mini-row .status-fill { width: 112px; } #detail .stage-top { align-items: flex-start; } /* Forms and pickers become full-screen and bottom sheets */ #editor.modal { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; box-shadow: none; animation: card-up var(--motion-productive-long) var(--motion-timing-enter); } #editor #record-form { max-height: none; height: 100%; } #label-picker:not(.anchored) { width: 100vw; max-width: none; max-height: 75vh; max-height: 75dvh; margin: auto 0 0; border-radius: var(--border-radius-big) var(--border-radius-big) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } #label-picker:not(.anchored) .label-option, #label-picker:not(.anchored) .label-create { height: 44px; } #editor .dialog-heading { padding: var(--space-24) 56px var(--space-16) 20px; } #editor .modal-close { top: var(--space-16); right: var(--space-12); } #editor .dialog-scroll { padding: 0 20px var(--space-24); } #editor .dialog-footer { padding: var(--space-12) var(--space-16); } #review-brief.side-panel { inset: 0; width: 100vw; } #review-brief .brief-body { padding: var(--space-16); } #review-brief .side-panel-head { padding: 52px var(--space-16) 0; } #toast { flex-wrap: nowrap; } #toast > .toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } #toast .toast-actions { margin-left: var(--space-8); } #toast .toast-close { margin-left: var(--space-4); } } /* ---------- Item card ▲▼ (spec §5.4 header item 4) ---------- */ #detail .item-steps { display: inline-flex; gap: var(--space-4); } #detail .icon-button.secondary { border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); } #detail .icon-button.secondary:disabled { border-color: rgba(195, 198, 212, var(--disabled-component-opacity)); background: transparent; } /* ---------- Item side panel (follow-ups, demos) and the AI panel: monday's 700px side panel (spec §5.2, §8.11) ---------- */ #item-panel, #ai-panel { padding: 0; border: 0; color: var(--primary-text-color); font: var(--font-text2-normal); background: var(--primary-background-color); } #item-panel.side-panel, #ai-panel.side-panel { position: fixed; inset: var(--topbar-height) 0 0 auto; width: min(var(--item-panel-width), 100vw); height: auto; max-width: none; max-height: none; margin: 0; border-radius: 0; box-shadow: -4px 0 12px rgba(0, 0, 0, .1); overflow: hidden; z-index: 900; } #item-panel.side-panel[open], #ai-panel.side-panel[open] { display: flex; flex-direction: column; animation: panel-in var(--motion-expressive-short) var(--motion-timing-enter); } #item-panel-content, #ai-panel-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } :is(#item-panel, #ai-panel) .side-panel-head { position: relative; flex: none; padding: 46px var(--space-24) 0 22px; border-bottom: 1px solid var(--layout-border-color); } :is(#item-panel, #ai-panel) .side-panel-close { position: absolute; top: var(--space-12); left: var(--space-12); } :is(#item-panel, #ai-panel) .side-panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); min-height: 30px; } :is(#item-panel, #ai-panel) .side-panel-title h2 { flex: 1; min-width: 0; margin: 0; font: var(--font-h2-normal); letter-spacing: var(--letter-spacing-h2); color: var(--primary-text-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #ai-panel .side-panel-title h2 { display: flex; align-items: center; gap: var(--space-8); } #ai-panel .side-panel-title h2 .ai-sparkle { width: 20px; height: 20px; } #ai-panel .side-panel-head { padding-bottom: var(--space-16); } #item-panel .side-panel-actions { display: flex; align-items: center; flex: none; margin-top: -6px; } #item-panel .ip-owners .avatar, #item-panel .ip-owners .avatar-counter { --size: 24px; } #item-panel .ip-divider { width: 1px; height: 24px; margin: 0 var(--space-12); background: var(--layout-border-color); } #item-panel .item-menu-wrap { position: relative; display: inline-flex; } #item-panel .item-menu { top: calc(100% + 4px); right: 0; left: auto; min-width: 220px; } #item-panel .ip-tabs { display: flex; gap: 0; margin: var(--space-16) 0 0 -6px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; } #item-panel .ip-tabs > button { flex: none; display: inline-flex; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-16); border: 0; background: none; color: var(--primary-text-color); font: var(--font-text2-normal); white-space: nowrap; cursor: pointer; } #item-panel .ip-tabs > button svg.icon { width: 16px; height: 16px; } #item-panel .ip-tabs > button:hover { background: linear-gradient(var(--primary-background-hover-color), var(--primary-background-hover-color)) center / 100% 32px no-repeat; } #item-panel .ip-tabs > [aria-selected="true"]::after { bottom: 0; } #item-panel .ip-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-16) var(--space-16) var(--space-24); } #item-panel .ip-body::-webkit-scrollbar { width: 10px; } #item-panel .ip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-24); } #item-panel .ip-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #item-panel .ip-field.wide { grid-column: 1 / -1; } #item-panel .ip-label { display: block; font: var(--font-text1-normal); color: var(--primary-text-color); } #item-panel .ip-value { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--space-12); box-sizing: border-box; border: 1px solid var(--crm-field-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); color: var(--primary-text-color); font: var(--font-text2-normal); text-align: center; overflow: hidden; } #item-panel button.ip-value { width: 100%; cursor: pointer; } #item-panel button.ip-value:hover { border-color: var(--ui-border-color); } #item-panel .ip-value .placeholder { color: var(--secondary-text-color); opacity: 0; } #item-panel .ip-value:hover .placeholder, #item-panel .ip-value:focus-visible .placeholder { opacity: 1; } #item-panel .ip-field.long .ip-value { justify-content: flex-start; align-items: flex-start; padding: 10px var(--space-12); text-align: left; white-space: pre-wrap; line-height: 20px; } #item-panel .ip-long { overflow-wrap: anywhere; } #item-panel .ip-field.status .ip-value { padding: 0; border: 0; } #item-panel .ip-field.status .label-select { appearance: none; display: block; width: 100%; height: 40px; padding: 0 var(--space-8); border: 0; border-radius: var(--border-radius-small); background: var(--status); color: var(--status-text, #fff); font: var(--font-text2-normal); cursor: pointer; } #item-panel .ip-field.status .label-select:hover { background: var(--status-hover, var(--status)); } #item-panel .ip-field.status .label-select.is-blank { color: transparent; } #item-panel .ip-field.people .ip-value, #item-panel .ip-field.chips .ip-value, #item-panel .ip-field.wide:has(.label-cell) .ip-value { padding: 0; } #item-panel .board-cell { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; height: 38px; padding: 0 var(--space-12); border: 0; background: transparent; color: var(--primary-text-color); font: var(--font-text2-normal); cursor: pointer; } #item-panel .people-view { display: inline-flex; align-items: center; } #item-panel .people-view > * + .avatar, #item-panel .people-view > .avatar + .avatar-counter { margin-left: -6px; } #item-panel .ip-people-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #item-panel .ip-field.chips .ip-value { flex-wrap: wrap; padding: 6px; background: var(--crm-field-box-color); } #item-panel .chip.crm { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border: 0; border-radius: var(--border-radius-small); background: var(--crm-chip-color); color: var(--primary-text-color); font: var(--font-text2-normal); max-width: 100%; } #item-panel .chip.crm .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #item-panel .chip.crm.clickable { cursor: pointer; } #item-panel .chip.crm.clickable:hover { background: var(--crm-selected-hover-color); } #item-panel .label-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 38px; padding: 6px 8px; border: 0; background: transparent; cursor: pointer; } #item-panel .label-cell .placeholder { color: var(--secondary-text-color); } #item-panel .label-chip { --c: var(--label-blue); --c-selected: var(--label-blue-selected); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--border-radius-small); background: var(--c-selected); } #item-panel .label-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } #item-panel .label-chip.green { --c: var(--label-green); --c-selected: var(--label-green-selected); } #item-panel .label-chip.amber { --c: var(--label-amber); --c-selected: var(--label-amber-selected); } #item-panel .label-chip.red { --c: var(--label-red); --c-selected: var(--label-red-selected); } #item-panel .label-chip.lilac { --c: var(--label-lilac); --c-selected: var(--label-lilac-selected); } #item-panel .label-chip.teal { --c: var(--label-teal); --c-selected: var(--label-teal-selected); } #item-panel .label-chip.pink { --c: var(--label-pink); --c-selected: var(--label-pink-selected); } #item-panel .label-chip.gray { --c: var(--label-gray); --c-selected: var(--label-gray-selected); } #item-panel .date-view { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--pulse-text-color); } #item-panel .date-view .deadline { display: inline-flex; } #item-panel .date-view .date-add { display: none; } #item-panel .deadline-pie { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--secondary-text-color); background: conic-gradient(var(--secondary-text-color) calc(var(--p, 0) * 360deg), transparent 0); } #item-panel .deadline-ring { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-explosive); } #item-panel .deadline-overdue { width: 16px; height: 16px; color: var(--color-stuck-red); } #item-panel .deadline-done { width: 16px; height: 16px; color: var(--positive-color); } #item-panel .date-view.done .date-text { text-decoration: line-through; } #item-panel .avatar.unknown { display: inline-flex; align-items: center; justify-content: center; color: var(--avatar-text, #fff); background: var(--avatar-color); font: 600 13px/1 var(--font-family); } #item-panel .ip-log-row { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; padding: 0 var(--space-8); border-bottom: 1px solid var(--ui-background-color); } #item-panel .ip-log-time { display: inline-flex; align-items: center; gap: var(--space-4); width: 76px; flex: none; color: var(--secondary-text-color); } #item-panel .ip-log-time svg.icon { width: 16px; height: 16px; } #item-panel .ip-log-action { flex: none; width: 160px; } #item-panel .ip-log-record { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary-text-color); } #item-panel .ip-log-empty { margin: 60px auto 0; max-width: 280px; text-align: center; } #item-panel .ip-log-empty strong { display: block; font: var(--font-h3-medium); color: var(--primary-text-color); } #item-panel .ip-log-empty p { margin: var(--space-4) 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); } #item-panel .updates-tab { max-width: none; } /* AI panel body: Sidekick-style start page with cards for the features we have (§8.11) */ #ai-panel .ai-panel-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-32) var(--space-24) var(--space-24); } #ai-panel .ai-hello { margin: 0 0 var(--space-24); text-align: center; } #ai-panel .ai-hello h3 { margin: 0; font: 700 22px/28px var(--title-font-family); color: var(--primary-text-color); letter-spacing: 0; } #ai-panel .ai-hello p { margin: var(--space-4) 0 0; font: var(--font-text1-normal); color: var(--secondary-text-color); } #ai-panel .ai-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); } #ai-panel .ai-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border: 1px solid var(--ui-background-color); border-radius: var(--border-radius-12); background: var(--primary-background-color); } #ai-panel .ai-card:hover { box-shadow: var(--ai-glow); border-color: transparent; } #ai-panel .ai-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } #ai-panel .ai-card h4 { margin: 0; font: var(--font-text2-medium); color: var(--primary-text-color); } #ai-panel .ai-card p { margin: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); } #ai-panel .ai-card .button { align-self: flex-start; text-decoration: none; } #ai-panel .ai-card-links { display: flex; flex-direction: column; gap: 2px; } #ai-panel .ai-card-link { display: flex; align-items: center; gap: var(--space-8); min-height: 32px; padding: 0 var(--space-8); border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; } #ai-panel .ai-card-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ai-panel .ai-card-link svg.icon { flex: none; width: 16px; height: 16px; color: var(--icon-color); } #ai-panel .ai-card-link:hover { background: var(--primary-background-hover-color); } #ai-panel .ai-card-empty { font-size: 12px; } #ai-panel .ai-panel-note { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-24) 0 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } #ai-panel .ai-panel-note svg.icon { width: 16px; height: 16px; flex: none; } #ai-panel .status-label.ai { flex: none; } @media (max-width: 760px) { #item-panel.side-panel, #ai-panel.side-panel { inset: 0; width: 100vw; z-index: 950; } #item-panel .ip-grid, #ai-panel .ai-cards { grid-template-columns: minmax(0, 1fr); } } /* ---------- Form inline errors (spec §3.6, §8.10) ---------- */ #editor .field-invalid, #editor .field-invalid:focus, #editor .field-invalid:hover { border-color: var(--negative-color) !important; } #editor .field-invalid:focus-visible { outline-color: var(--negative-color); } #editor .field-error { display: block; margin-top: var(--space-4); font: var(--font-text3-normal); color: var(--negative-color); text-align: left; } /* ---------- Enrich with Apollo: review tables on cards and in the bulk dialog ---------- */ .enrich-review p { margin: 0 0 var(--space-12); } .enrich-review .table-wrap { border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); overflow: auto; } .enrich-table { width: 100%; border-collapse: collapse; font: var(--font-text2-normal); } .enrich-table th { height: 36px; padding: 0 var(--space-12); border-bottom: 1px solid var(--layout-border-color); background: var(--primary-background-color); color: var(--primary-text-color); font-weight: 400; text-align: left; } .enrich-table td { padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--layout-border-color); vertical-align: middle; overflow-wrap: anywhere; } .enrich-table tbody:last-child tr:last-child td { border-bottom: 0; } .enrich-table td:first-child, .enrich-table thead th:first-child { width: 32px; padding-right: 0; } .enrich-table td.enrich-field { width: 96px; color: var(--secondary-text-color); white-space: nowrap; } .enrich-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-color); vertical-align: middle; } .enrich-table tr.is-same td { color: var(--secondary-text-color); } .enrich-table .enrich-same { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--positive-color); } .enrich-table .enrich-photo { display: inline-flex; vertical-align: middle; } .enrich-table .external-link { display: inline-flex; align-items: center; gap: var(--space-4); } .enrich-table tr.enrich-record th { height: 40px; padding: var(--space-8) var(--space-12); background: var(--allgrey-background-color); font-weight: 400; } .enrich-table tbody + tbody tr.enrich-record th { border-top: 1px solid var(--layout-border-color); } .enrich-who { display: flex; align-items: center; gap: var(--space-8); min-width: 0; } .enrich-who b { font-weight: 500; } .enrich-who small { color: var(--secondary-text-color); font: var(--font-text3-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .enrich-review .button-row, #detail .person-enrich .button-row { display: flex; gap: var(--space-8); margin-top: var(--space-12); } .enrich-empty p { margin: 0 0 var(--space-4); } .enrich-empty ul { margin: var(--space-4) 0 0; padding-left: var(--space-24); color: var(--secondary-text-color); } .enrich-empty li { margin: 2px 0; } #detail .enrich-credit { margin: 0; } #detail .source-hint { color: var(--secondary-text-color); font: var(--font-text3-normal); white-space: nowrap; } #detail .detail-fact > small .source-hint { margin-left: auto; } #detail .contact-head .source-hint { display: block; margin-top: var(--space-4); } #detail .item-actions .apollo-jump { gap: var(--space-8); color: var(--primary-text-color); } .bulk-bar .bulk-action.wide { width: 104px; text-align: center; line-height: 16px; } /* Bulk dialog: cost, progress, then one review table. */ .enrich-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(86vh, 860px); padding: 0; border: 0; border-radius: var(--border-radius-big); background: var(--primary-background-color); color: var(--primary-text-color); box-shadow: var(--box-shadow-large); overflow: hidden; } .enrich-dialog[open] { display: flex; flex-direction: column; animation: confirm-in 150ms cubic-bezier(0, 0, .4, 1); } .enrich-dialog::backdrop { background: var(--backdrop-color); } .enrich-card { display: flex; flex-direction: column; min-height: 0; flex: 1; outline: none; } .enrich-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); padding: var(--space-24) var(--space-24) var(--space-8) var(--space-32); } .enrich-head h2 { margin: 0; font: var(--font-h2-medium); } .enrich-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-8) var(--space-32) var(--space-24); font: var(--font-text1-normal); } .enrich-body > p { margin: 0 0 var(--space-12); } .enrich-body > p.muted { font: var(--font-text2-normal); color: var(--secondary-text-color); } .enrich-table tr.enrich-same-row td { font: var(--font-text3-normal); } .enrich-table tr.enrich-same-row .enrich-same { font: inherit; } .enrich-body > .attention-box { display: flex; gap: var(--space-8); margin-bottom: var(--space-16); } .enrich-cost b { font-weight: 600; } .enrich-foot { display: flex; justify-content: flex-end; gap: var(--space-8); padding: var(--space-16) var(--space-24); border-top: 1px solid var(--layout-border-color); } .enrich-tools { display: flex; justify-content: flex-end; margin-bottom: var(--space-8); } .enrich-progress { height: 8px; margin: var(--space-8) 0 var(--space-16); border-radius: 4px; background: var(--ui-background-color); overflow: hidden; } .enrich-progress span { display: block; height: 100%; border-radius: 4px; background: var(--primary-color); transition: width var(--motion-productive-medium, 150ms) ease-out; } .enrich-missed { margin-top: var(--space-24); } .enrich-missed h3 { margin: 0 0 var(--space-8); font: 500 15px/21px var(--font-family); } .enrich-missed ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); } .enrich-missed li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--space-12); padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--layout-border-color); font: var(--font-text2-normal); } .enrich-missed li:last-child { border-bottom: 0; } .enrich-missed li b { font-weight: 500; overflow-wrap: anywhere; } .enrich-missed li span { color: var(--secondary-text-color); } @media (max-width: 760px) { .enrich-dialog { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; } .enrich-head { padding: var(--space-16) var(--space-12) var(--space-8) 20px; } .enrich-body { padding: var(--space-8) 20px var(--space-16); } .enrich-missed li { grid-template-columns: 1fr; gap: 2px; } /* Review rows stack: the field and its tick on top, then the CRM's value and Apollo's. */ .enrich-table thead { display: none; } .enrich-table tbody tr:not(.enrich-record) { display: grid; grid-template-columns: 32px 1fr; border-bottom: 1px solid var(--layout-border-color); } .enrich-table tbody:last-child tr:last-child { border-bottom: 0; } .enrich-table tbody tr:not(.enrich-record) td { border: 0; padding: 2px var(--space-12) 2px 0; } .enrich-table tbody tr:not(.enrich-record) td:first-child { grid-row: span 3; width: auto; padding: var(--space-8) 0 var(--space-8) var(--space-12); } .enrich-table tbody tr:not(.enrich-record) td.enrich-field { width: auto; padding-top: var(--space-8); color: var(--primary-text-color); font-weight: 500; } .enrich-table tbody tr:not(.enrich-record) td:last-child { padding-bottom: var(--space-8); } .enrich-table td[data-label]::before { content: attr(data-label) ": "; color: var(--secondary-text-color); } .enrich-table tr.enrich-record { display: block; } .enrich-table tr.enrich-record th { display: block; height: auto; } .enrich-who { flex-wrap: wrap; row-gap: 0; } .enrich-who b { white-space: nowrap; } .enrich-who small { flex: 1 1 100%; margin-left: 32px; white-space: normal; } } /* Header "Enrich with Apollo" lands on its section with a short highlight. */ #detail .widget.flash { box-shadow: 0 0 0 2px var(--primary-color); transition: box-shadow .3s ease; } /* ========================================================================================================== Record card sections (cards section spec): one widget shell for every section, collapsible and compact. ========================================================================================================== */ /* Overview canvas: optional full-width row 1, then main and side columns (spec §1.1) */ #detail .card-canvas { display: flex; flex-direction: column; gap: var(--space-16); } #detail .card-wide:empty { display: none; } #detail .card-columns { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 32%, 440px); gap: var(--space-16); align-items: start; } #detail .card-main, #detail .card-side, #detail .card-wide { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; } #detail .card-main > .widget.is-empty + .widget.is-empty { margin-top: -8px; } #detail .tab-canvas { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; } @media (min-width: 1101px) { /* The info column stays in view while the main column scrolls; it scrolls itself only when taller than the screen. */ #detail .card-side { position: sticky; top: 0; max-height: calc(100dvh - 40px - var(--card-head-h, 100px) - 16px - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--border-radius-medium); } } /* The widget shell (spec §2.2) */ #detail .widget { position: relative; margin: 0; padding: 0; border: 1px solid var(--application-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: none; color: var(--primary-text-color); font: var(--font-text2-normal); container-type: inline-size; } #detail .widget-head { display: flex; align-items: center; gap: var(--space-8); min-height: 48px; margin: 0; padding: 0 var(--space-8); box-sizing: border-box; border-bottom: 1px solid var(--application-border-color); } #detail .widget.is-collapsed > .widget-head, #detail .widget.is-empty > .widget-head { border-bottom: 0; } #detail .widget.is-empty > .widget-head { min-height: 46px; } #detail .widget-title { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; margin: 0; font: inherit; } #detail .widget-toggle, #detail .widget-title { gap: var(--space-8); } #detail .widget-toggle { display: inline-flex; align-items: center; height: 32px; max-width: 100%; min-width: 0; padding: 0 var(--space-8) 0 var(--space-4); border: 0; border-radius: var(--border-radius-small); background: none; color: var(--primary-text-color); font: inherit; text-align: left; cursor: pointer; } #detail .widget-toggle:hover { background: var(--primary-background-hover-color); } #detail .widget-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#detail, #item-panel) svg.widget-chevron { flex: none; width: 16px; height: 16px; color: var(--icon-color); transition: transform var(--motion-productive-medium) var(--motion-timing-transition); } #detail .is-collapsed > .widget-head svg.widget-chevron, #detail .is-collapsed > .group-head svg.widget-chevron { transform: rotate(-90deg); } @media (prefers-reduced-motion: reduce) { :is(#detail, #item-panel) svg.widget-chevron { transition: none; } } #detail .widget-chevron-space { flex: none; width: 20px; } #detail .widget-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-h3-normal); letter-spacing: -0.1px; color: var(--primary-text-color); } #detail .widget-type { flex: none; width: 16px; height: 16px; color: var(--color-dark-blue); } #detail .widget-title .ai-sparkle { flex: none; } #detail .widget-count { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 20px; min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--ui-background-color); color: var(--primary-text-color); font: var(--font-text3-medium, 600 12px/16px var(--font-family)); } #detail .widget-tag { flex: none; --label-color: var(--secondary-text-color); white-space: nowrap; } #detail .widget-tag.ai { --label-color: var(--ai-color); } #detail .widget-tag.apollo { --label-color: var(--color-dark-blue); } #detail .widget-sum { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--secondary-text-color); font: var(--font-text2-normal); text-overflow: ellipsis; white-space: nowrap; } #detail .widget.is-collapsed > .widget-head .widget-sum, #detail .widget.is-empty > .widget-head .widget-sum { display: block; } #detail .widget-actions { display: inline-flex; align-items: center; gap: var(--space-4); flex: none; margin-left: auto; } #detail .widget-actions .button { height: 32px; min-height: 32px; padding: 0 var(--space-8); font: var(--font-text2-normal); } #detail .widget-actions .button svg.icon { width: 16px; height: 16px; } #detail .widget-actions .icon-button { color: var(--icon-color); } #detail .widget-head .widget-max svg.icon { width: 20px; height: 20px; } #detail .widget-head .widget-tool svg.icon { width: 16px; height: 16px; } #detail .collapsed-only { display: none !important; } #detail .widget.is-collapsed > .widget-head .collapsed-only { display: inline-flex !important; } #detail .widget.is-collapsed > .widget-head .collapsed-only svg.icon { width: 16px; height: 16px; } #detail .widget-body { padding: var(--space-16); } #detail .widget-body.flush { padding: 0; } #detail .widget-body[hidden], #detail .widget-foot[hidden], #detail .group-body[hidden] { display: none; } #detail .widget-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 36px; padding: 0 var(--space-16) 0 var(--space-16); box-sizing: border-box; border-top: 1px solid var(--application-border-color); } #detail .widget-foot > .reveal-toggle:only-child, #detail .widget-foot > .fields-toggle:only-child, #detail .widget-foot > .empty-toggle:only-child { margin: 0 auto; } #detail .widget-foot .button { height: 28px; min-height: 28px; padding: 0 var(--space-8); font: var(--font-text2-normal); color: var(--primary-color); } #detail .widget-foot .button:hover:not(:disabled) { background: var(--primary-background-hover-color); } #detail .foot-note { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--secondary-text-color); font: var(--font-text3-normal); text-overflow: ellipsis; white-space: nowrap; } #detail .widget-note { margin: 0; padding: 0 var(--space-16) var(--space-12) 44px; color: var(--secondary-text-color); font: var(--font-text3-normal); } /* Under a widget with a body the note is footer microcopy (spec §4.1); the 44px title indent is only for header-only widgets. */ #detail .widget:not(.is-empty) > .widget-note { padding: var(--space-8) var(--space-16); border-top: 1px solid var(--application-border-color); } #detail .widget.is-collapsed > .widget-note { display: none; } #detail .widget-note.touch-note { display: none; } @media (hover: none), (max-width: 760px) { #detail .widget-note.touch-note { display: block; } #detail .widget.is-collapsed > .widget-note.touch-note { display: none; } } /* AI widgets: the same widget plus a 2px gradient line at the top, nothing else (spec §2.2). */ #detail .widget-ai::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: var(--ai-gradient); border-radius: 8px 8px 0 0; pointer-events: none; } #detail .widget.flash { box-shadow: 0 0 0 2px var(--primary-color); transition: box-shadow .3s ease; } /* Narrow widgets (side column, phones): the tag hides, inline actions keep only their icon, a long title may wrap. */ @container (max-width: 420px) { #detail .widget-head .widget-tag { display: none; } #detail .widget-actions .widget-add .btn-label, #detail .widget-actions .ai-tertiary .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #detail .widget-actions .widget-add, #detail .widget-actions .ai-tertiary { width: 32px; padding: 0; } #detail .widget-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #detail .widget-head { height: auto; padding-block: 4px; flex-wrap: wrap; row-gap: 0; } #detail .widget.is-collapsed > .widget-head .widget-sum { order: 3; flex: 1 1 100%; padding: 0 0 6px 36px; margin-top: -4px; font: var(--font-text3-normal); } #detail .widget.is-collapsed > .widget-head .widget-tool, #detail .widget.is-collapsed > .widget-head .widget-max, #detail .widget.is-collapsed > .widget-head .item-menu-wrap { display: none; } #detail .widget.is-collapsed > .widget-head .widget-title { flex: 1 1 auto; } /* Header-only (empty) widgets stay one 48px row: the summary ellipsizes, the icon action stays on row 1. */ #detail .widget.is-empty > .widget-head { flex-wrap: nowrap; height: 46px; padding-block: 0; } #detail .widget.is-empty > .widget-head .widget-sum { flex: 1 1 0; min-width: 0; } /* The full idle text shows as a note under the header, so the cut summary does not repeat it. */ @media (hover: none), (max-width: 760px) { #detail .widget.is-empty:has(> .widget-note.touch-note) > .widget-head .widget-sum { display: none; } } /* Expanded headers keep every action on the title row: the title shrinks (2 lines at most). Refresh is in the … menu. */ #detail .widget:not(.is-collapsed):not(.is-empty) > .widget-head { flex-wrap: nowrap; } #detail .widget[data-widget="news"] > .widget-head .news-refresh { display: none; } } /* Fullscreen: one widget fills the card body with everything in it. */ #detail .detail-body { position: relative; } #detail .detail-body:has(.is-max) { overflow: hidden; } #detail .widget.is-max { position: absolute; inset: var(--space-16) var(--space-24) var(--space-24); z-index: 5; overflow: auto; margin: 0; } #detail .is-max .reveal-toggle, #detail .is-max .clamp-toggle { display: none !important; } #detail .is-max .reveal .is-extra { display: revert; } #detail .is-max .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; mask-image: none; } /* Clamped text with Read more (spec §0.4) */ :is(#detail, #item-panel, #enrich) .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 3); overflow: hidden; margin: 0; } :is(#detail, #item-panel, #enrich) .clamp.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; } :is(#detail, #item-panel) .timeline-text.clamp.is-clamped:not(.is-open), :is(#detail, #item-panel) .post-body .clamp.is-clamped:not(.is-open) { mask-image: linear-gradient(#000 calc(100% - 20px), transparent); } :is(#detail, #item-panel, #enrich) .link-button { display: inline; padding: 0; border: 0; background: none; color: var(--link-color); font: var(--font-text2-normal); cursor: pointer; } :is(#detail, #item-panel, #enrich) .link-button:hover { text-decoration: underline; } :is(#detail, #item-panel, #enrich) .clamp-toggle[hidden] { display: none; } :is(#detail, #item-panel) .clamp-toggle.block { display: flex; align-items: center; justify-content: center; width: calc(100% + 32px); height: 32px; margin: var(--space-8) -16px 0; border-top: 1px solid var(--application-border-color); } /* As the last row of a card the bar is its footer: it meets the card's bottom edge (no dead padding under it). */ #detail .timeline-card > .clamp-wrap:last-child > .clamp-toggle.block { margin-bottom: -12px; border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); } :is(#detail, #item-panel) .post-body > .clamp-wrap:last-child > .clamp-toggle.block { margin-bottom: -16px; border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); } :is(#detail, #item-panel) .clamp-toggle.block:hover { text-decoration: none; background: var(--primary-background-hover-color); } :is(#detail, #item-panel, #enrich) .reveal:not(.show-all) .is-extra { display: none; } #detail .preserve-lines { margin: 0; white-space: pre-wrap; line-height: 20px; } /* Collapsible groups inside widgets (Info field groups, AI brief Risks) */ #detail .field-group { margin: var(--space-12) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--application-border-color); } #detail .group-head { display: flex; align-items: center; gap: var(--space-8); min-height: 36px; } #detail .group-head h4, #detail .group-head h2 { display: flex; flex: 0 0 auto; max-width: 70%; min-width: 0; margin: 0; font: inherit; } #detail .group-toggle { display: inline-flex; align-items: center; gap: var(--space-8); height: 28px; min-width: 0; padding: 0 var(--space-8) 0 var(--space-4); margin-left: calc(-1 * var(--space-4)); border: 0; border-radius: var(--border-radius-small); background: none; color: var(--primary-text-color); font: var(--font-text2-medium); cursor: pointer; } #detail .group-toggle > span:not(.widget-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .group-toggle:hover { background: var(--primary-background-hover-color); } #detail .group-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } #detail .group-sum { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--secondary-text-color); font: var(--font-text3-normal); text-overflow: ellipsis; white-space: nowrap; } #detail .is-collapsed > .group-head .group-sum { display: block; } #detail .group-action { display: inline-flex; flex: none; margin-left: auto; } #detail .group-action .button.xs { color: var(--primary-text-color); } #detail .group-body { padding: var(--space-4) 0 var(--space-4); } /* Info widget field rows (spec §6.4): label at the left (112px), value box at the right */ #detail .info-list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; } #detail .info-field.detail-fact { display: grid; grid-template-columns: 132px minmax(0, 1fr); margin: 0; column-gap: var(--space-12); align-items: center; min-height: 36px; min-width: 0; } #detail .info-field > small { display: flex; align-items: center; gap: var(--space-4); min-width: 0; margin: 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } #detail .info-field .info-label { min-width: 0; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 18px; } #detail .info-field .info-value { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px solid var(--crm-field-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; overflow: hidden; transition: border-color var(--motion-productive-short) var(--motion-timing-transition); } #detail .info-field .info-value:hover { border-color: var(--ui-border-color); } #detail .info-field .info-text, #detail .info-field .info-value > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A contact's role is its key fact: it wraps in full. */ #detail .info-field[data-field="title"] .info-text { white-space: normal; overflow-wrap: anywhere; } #detail .info-field[data-field="title"] .info-value { padding-block: 6px; } @media (max-width: 760px) { #detail .info-field .info-text, #detail .info-field .info-value > a { white-space: normal; overflow-wrap: anywhere; } #detail .info-field .info-value { padding-block: 6px; } } #detail .info-field a { color: var(--link-color); text-decoration: none; } #detail .info-field a:hover { text-decoration: underline; } #detail .info-field.chips .info-value { flex-wrap: wrap; padding: 4px 6px; background: var(--crm-field-box-color); } #detail .info-field.chips .chip.crm { max-width: 100%; } #detail .info-field .person { display: flex; align-items: center; gap: var(--space-8); min-width: 0; } #detail .info-field .person .avatar { --size: 24px; flex: none; } #detail .info-field .person .avatar + .avatar { margin-left: -14px; } #detail .info-field.date .date-indicator { flex: none; width: 12px; height: 12px; box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: 50%; } #detail .info-field.date .date-view { display: inline-flex; } #detail .info-field.date .date-view .date-add { display: none; } #detail .info-field.long { grid-template-columns: minmax(0, 1fr); row-gap: 4px; align-items: start; padding-top: 4px; } #detail .info-field.long .info-value { display: block; padding: 6px var(--space-8); } #detail .info-field.long .clamp-toggle { margin-top: 2px; font-size: 12px; } :is(#detail, #item-panel) .status-pill { display: inline-block; max-width: 100%; height: 24px; padding: 0 var(--space-8); box-sizing: border-box; border-radius: var(--border-radius-small); background: var(--label-color); color: var(--label-color-text, #fff); font: var(--font-text2-normal); line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .info-widget:not(.show-empty):not(.show-all-fields) .info-field.is-empty { display: none; } #detail .info-add { width: 100%; justify-content: flex-start; gap: var(--space-4) !important; color: var(--secondary-text-color) !important; cursor: pointer; } #detail .info-add svg.icon { width: 14px; height: 14px; color: var(--secondary-text-color); } #detail .info-add:hover { color: var(--primary-text-color) !important; } #detail .source-hint { display: inline-flex; flex: none; color: var(--color-dark-blue); } #detail .source-hint svg.icon { width: 14px; height: 14px; color: var(--color-dark-blue); } /* In Info rows the Apollo mark sits right after the label, not at the far edge of the label column. */ #detail .info-field > small .source-hint { margin-left: 0; } /* Info footers center their Show fields toggle, like View all on the related lists. */ #detail .info-widget > .widget-foot { justify-content: center; } #detail .info-provenance { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .info-provenance svg.icon { color: var(--color-dark-blue); } #detail .info-widget .fields-toggle { display: none; } #detail .sales-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } #detail .sales-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #detail .sales-cell small { color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .sales-none { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px dashed var(--ui-border-color); border-radius: var(--border-radius-small); color: var(--secondary-text-color); font: var(--font-text3-normal); white-space: nowrap; overflow: hidden; } @media (max-width: 1100px) { #detail .info-widget:not(.show-all-fields) .kf-t { display: none; } #detail .info-widget .empty-toggle { display: none; } #detail .info-widget .fields-toggle.on-t { display: inline-flex; } #detail .card-side .info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-24); row-gap: var(--space-4); } #detail .card-side .info-field.long { grid-column: 1 / -1; } } @media (max-width: 760px) { #detail .info-widget:not(.show-all-fields) .kf-m { display: none; } #detail .info-widget .fields-toggle { display: inline-flex; } #detail .card-side .info-list { grid-template-columns: minmax(0, 1fr); } #detail .info-field.detail-fact { grid-template-columns: 116px minmax(0, 1fr); } #detail .info-field.long { grid-template-columns: minmax(0, 1fr); } } /* Contact info quick row: photo, Email and Call (spec §6.4) */ #detail .contact-head { display: flex; align-items: center; gap: var(--space-12); margin: 0 0 var(--space-12); padding: 0 0 var(--space-12); border-bottom: 1px solid var(--application-border-color); } #detail .contact-head .avatar { flex: none; border: 0; font-size: 14px; } #detail .contact-reach { display: flex; flex-wrap: wrap; gap: var(--space-8); } #detail .contact-reach .button svg.icon { width: 16px; height: 16px; } #detail .contact-none { color: var(--secondary-text-color); font: var(--font-text3-normal); } /* Deal stages (spec §6.3) */ #detail .stage-widget .widget-body { padding: var(--space-12) var(--space-16) var(--space-16); } #detail .stage-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 28px; } #detail .stage-facts { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; } #detail .stage-facts .chip { height: 24px; } #detail .stage-facts .chip.add { height: 24px; padding: 0 var(--space-8); gap: var(--space-4); border: 1px dashed var(--ui-border-color); background: transparent; color: var(--secondary-text-color); font: var(--font-text2-normal); } #detail .stage-facts .chip.add:hover { color: var(--primary-text-color); border-color: var(--icon-color); background: var(--primary-background-hover-color); } #detail .stage-facts .chip.add svg.icon { width: 14px; height: 14px; color: currentColor; } #detail .stage-bar { margin-top: var(--space-12); } #detail .stage-stepper { display: none; } #detail .stage-widget .attention-box { margin-top: var(--space-12); } /* Compact AttentionBox (spec §3.17): 40px, icon, one line, optional close */ :is(#detail, #item-panel) .attention-box.compact { display: flex; align-items: flex-start; gap: var(--space-8); min-height: 40px; padding: var(--space-8) var(--space-12); box-sizing: border-box; border-radius: var(--border-radius-medium); font: var(--font-text2-normal); } :is(#detail, #item-panel) .attention-box.compact > svg.icon { flex: none; margin-top: 0; } #detail .attention-box.compact.warning > svg.icon { color: var(--warning-color-hover, #d1a000); } #detail .attention-box.compact .attention-text { flex: 1; min-width: 0; line-height: 20px; } #detail .attention-box.compact .attention-text p { margin: 0; } #detail .attention-box.compact .attention-text ul { margin: var(--space-4) 0 0; padding-left: 20px; color: var(--primary-text-color); } #detail .attention-box.compact .attention-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); } #detail .attention-box.compact .attention-actions .button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .attention-box.compact .attention-close { flex: none; margin: -2px -4px 0 0; } #detail .stage-state .attention-text { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); color: var(--secondary-text-color); } #detail .stage-state .status-fill { height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); } /* AI deal brief and the email draft (spec §6.2) */ #detail .ai-brief .widget-body > p:not(.clamp) { margin: 0; } #detail .ai-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); } #detail .ai-empty .ai-intro { flex: 1 1 260px; margin: 0; color: var(--secondary-text-color); } #detail .ai-health { display: flex; align-items: center; gap: var(--space-12); min-width: 0; color: var(--secondary-text-color); } #detail .ai-health > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The health reason is the explanation for the label: it wraps on touch and phones (no tooltip there) and in Full screen. */ @media (hover: none), (max-width: 760px) { #detail .ai-health { flex-wrap: wrap; align-items: flex-start; row-gap: var(--space-4); } #detail .ai-health > span:last-child { flex: 1 1 100%; white-space: normal; overflow: visible; line-height: 20px; } } #detail .widget.is-max .ai-health > span:last-child { white-space: normal; overflow: visible; } #detail .ai-health .status-fill { flex: none; height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); line-height: 24px; } #detail .ai-brief .clamp-wrap { margin-top: var(--space-12); } #detail .ai-summary { line-height: 20px; } #detail .ai-group .ai-list { margin: 0; padding-left: 20px; line-height: 22px; } /* Risks and Not in the records: both toggles on one 36px row; an open group's list shows full width below the row. */ #detail .ai-groups { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)) 1fr; column-gap: var(--space-16); margin-top: var(--space-8); border-top: 1px solid var(--application-border-color); } #detail .ai-groups > .field-group { display: contents; } #detail .ai-groups .group-head { grid-row: 1; min-width: 0; } #detail .ai-groups .group-head h4 { max-width: 100%; } #detail .ai-groups .group-body { grid-column: 1 / -1; padding-top: 0; } #detail .ai-groups > .field-group:nth-child(1) > .group-body { grid-row: 2; } #detail .ai-groups > .field-group:nth-child(2) > .group-body { grid-row: 3; } #detail .ai-groups > .field-group:nth-child(2) > .group-body:not([hidden]) { margin-top: var(--space-4); } /* With both lists open, each list repeats its name so the two read apart. */ #detail .ai-group-label { display: none; margin: 0 0 2px; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .ai-groups:not(:has(> .field-group.is-collapsed)):has(> .field-group + .field-group) .ai-group-label { display: block; } #detail .ai-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); margin-top: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--border-radius-medium); background: var(--ai-surface-color); } #detail .ai-next-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #detail .ai-next-text strong { font-weight: 600; } #detail .ai-next-text small { color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .ai-next-label { color: var(--ai-text-color, var(--secondary-text-color)) !important; } #detail .ai-next-why { margin: 2px 0 0; color: var(--secondary-text-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #detail .ai-next .button { margin: 0; } #detail .ai-next .button svg.icon, #detail .ai-email .button svg.icon { width: 16px; height: 16px; } #detail .ai-note { display: block; flex: 1; min-width: 0; color: var(--secondary-text-color); font: var(--font-text3-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .ai-brief .ai-note { margin: var(--space-12) 0 0; white-space: normal; } #detail .ai-next:has(> .ai-note) { row-gap: var(--space-4); margin-top: var(--space-8); padding-block: 10px; } #detail .ai-next > .ai-note { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; } #detail .ai-brief .ai-health + .clamp-wrap { margin-top: var(--space-8); } #detail .ai-brief .ai-health + .clamp-wrap > .ai-summary { margin-top: 0 !important; } #detail .ai-stale { --label-color: var(--warning-color-selected); height: 24px; gap: var(--space-4); padding: 0 var(--space-8); background: var(--warning-color-selected); color: var(--primary-text-color); font: var(--font-text3-normal); } #detail .ai-loading { display: flex; align-items: center; gap: var(--space-8); margin: 0; color: var(--secondary-text-color); } #detail .ai-brief .attention-box.negative { margin-bottom: var(--space-12); } #detail .ai-email-form .form-grid.compact { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--space-12); padding: 0; } #detail .ai-email .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); } #detail .ai-email .chip-row .chip { height: 24px; padding: 0 var(--space-8); } #detail .button-row.end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); margin: var(--space-12) 0 0; } #detail .ai-email-result { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--application-border-color); } #detail .ai-email-result textarea { min-height: 160px; max-height: 384px; field-sizing: content; } #detail .ai-email-result .button-row.end { margin: 0; } @container (max-width: 520px) { #detail .ai-next { grid-template-columns: minmax(0, 1fr); } #detail .ai-next .button { justify-self: start; } #detail .ai-email-form .form-grid.compact { grid-template-columns: minmax(0, 1fr); } } /* Company profile (spec §4) */ #detail .company-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); margin: 0; } @container (max-width: 640px) { #detail .company-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 300px) { #detail .company-facts { grid-template-columns: minmax(0, 1fr); } } #detail .company-fact { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; column-gap: var(--space-8); row-gap: 2px; min-width: 0; } #detail .company-fact > svg.icon { grid-row: span 2; margin-top: 2px; color: var(--icon-color); } #detail .company-fact small { color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .company-fact-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-text2-normal); } #detail .company-fact-value .external-link { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--link-color); text-decoration: none; } #detail .company-label { display: block; margin: var(--space-12) 0 2px; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .company-about { line-height: 20px; } :is(#detail, #enrich) .chip-cap { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 2px; } :is(#detail, #enrich) .tech-chip { height: 20px; padding: 0 6px; border-radius: var(--border-radius-small); background: var(--ui-background-color); color: var(--primary-text-color); font: var(--font-text3-normal); } :is(#detail, #enrich) .chip-more { height: 20px; padding: 0 6px; border: 0; border-radius: var(--border-radius-small); background: var(--primary-selected-color); color: var(--primary-text-color); font: var(--font-text3-normal); cursor: pointer; } :is(#detail, #enrich) .chip-more:hover { background: var(--primary-selected-hover-color); } #detail .skeleton { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-12); } #detail .skeleton span { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--ui-background-color), var(--allgrey-background-color), var(--ui-background-color)); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; } #detail .skeleton span:nth-child(2) { width: 80%; } #detail .skeleton span:nth-child(3) { width: 60%; } @keyframes skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { #detail .skeleton span { animation: none; } } #detail .company-profile .widget-body > p.muted, #detail .person-enrich .widget-body > p.muted { margin: 0; color: var(--secondary-text-color); } /* Apollo review tables (spec §6.1) */ .enrich-table td.enrich-field { width: 120px; } .enrich-table tr.is-same td { height: 32px; padding-top: 4px; padding-bottom: 4px; } .enrich-table .review-new { display: block; } .enrich-table .review-tag { margin-top: 4px; --label-color: var(--warning-color-hover, #a07800); } .enrich-table tr.is-add .review-tag { --label-color: var(--positive-color); } .enrich-table tr.is-add td:last-child { background: color-mix(in srgb, var(--color-done-green-selected) 35%, transparent); } .enrich-table tr.is-replace:has(input:checked) td:nth-child(3) { color: var(--secondary-text-color); text-decoration: line-through; } #detail .enrich-review > p { margin: 0 0 var(--space-12); } #detail .enrich-empty ul { margin: var(--space-4) 0 0; padding-left: 20px; color: var(--primary-text-color); } #detail .enrich-empty .muted { color: var(--secondary-text-color); } /* What's new (spec §5) */ #detail .news-list { margin: 0; padding: 0; list-style: none; } #detail .news-list li { display: grid; grid-template-columns: minmax(0, 1fr) 32px; column-gap: var(--space-8); align-items: start; min-height: 52px; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); box-sizing: border-box; border-bottom: 1px solid var(--application-border-color); } #detail .news-list li:last-child, #detail .news-list:not(.show-all) li:nth-last-child(1 of :not(.is-extra)) { border-bottom: 0; } #detail .news-main { display: flex; flex-direction: column; min-width: 0; } #detail .news-main a { overflow: hidden; color: var(--link-color); font: var(--font-text2-normal); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } @container (max-width: 560px) { #detail .news-main a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } #detail .news-main a:hover { text-decoration: underline; } #detail .news-meta { color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .news-summary { margin: var(--space-4) 0 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } #detail .news-summary[hidden] { display: none; } #detail .is-max .news-summary { display: block; } #detail .news-more { margin-top: 2px; color: var(--icon-color); } #detail .news-more svg.icon { transition: transform var(--motion-productive-medium) var(--motion-timing-transition); } #detail .news-more.is-open svg.icon { transform: rotate(180deg); } #detail .news-state { display: flex; align-items: center; min-height: 52px; margin: 0; padding: 0 var(--space-16); color: var(--secondary-text-color); } #detail .news-refresh.is-loading svg.icon { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #detail .news-refresh.is-loading svg.icon { animation: none; } } #detail .account-news .form-error { margin: var(--space-8) var(--space-16); } /* Emails & Activities (spec §6.5) */ #detail .act-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-8); min-height: 48px; padding: var(--space-8) var(--space-16); box-sizing: border-box; border-bottom: 1px solid var(--application-border-color); } #detail .act-toolbar .button { height: 32px; min-height: 32px; padding: 0 var(--space-8); font: var(--font-text2-normal); white-space: nowrap; } #detail .act-toolbar .button.primary { padding: 0 var(--space-12); } #detail .act-toolbar .button svg.icon { width: 16px; height: 16px; } #detail .act-toolbar .button.primary svg.icon { color: #fff; } #detail .act-toolbar .caret { margin-left: -2px; } #detail .toolbar-divider { flex: none; width: 1px; height: 24px; background: var(--layout-border-color); } #detail .act-search { display: inline-flex; align-items: center; margin-left: auto; } #detail .act-search-input { width: 200px; height: 32px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); } #detail .act-search-input[hidden] { display: none; } #detail .act-menu { left: 0; right: auto; min-width: 200px; } #detail .act-filter-pop { top: calc(100% + 4px); left: 0; min-width: 240px; padding: var(--space-8); box-shadow: var(--box-shadow-medium); } #detail .act-filter-title { margin: 0 var(--space-8) var(--space-4); color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .act-check { display: flex; align-items: center; gap: var(--space-8); min-height: 32px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); cursor: pointer; } #detail .act-check:hover { background: var(--primary-background-hover-color); } #detail .act-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-color); } #detail .act-filter-count { color: var(--primary-color); } @container (max-width: 600px) { #detail .act-toolbar .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #detail .act-toolbar .act-add .caret { display: none; } #detail .act-search-input { width: 140px; } } #detail .activity-widget .timeline-area:last-child { border-radius: 0 0 7px 7px; } #detail .item-timeline .timeline-top { height: 24px; margin-bottom: var(--space-4); } #detail .item-timeline .timeline-item::before { top: 26px; } #detail .item-timeline:not(.show-all):not(.filtering) .timeline-item:has(+ .is-extra)::before { bottom: var(--space-16); } #detail .item-timeline .timeline-item.is-filtered, #detail .item-timeline .timeline-month.is-filtered { display: none !important; } #detail .item-timeline.filtering .is-extra { display: revert; } #detail .timeline-card { padding: var(--space-12) var(--space-16); } #detail .timeline-who { flex-wrap: nowrap; min-height: 24px; } #detail .timeline-who > span:not(.avatar):not(.status-label) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .timeline-who .status-label { flex: none; } #detail .timeline-who .avatar { --size: 24px; font-size: 10px; flex: none; } :is(#detail, #item-panel) .avatar.system { display: inline-flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); flex: none; border-radius: 6px; background: var(--ui-background-color); color: var(--icon-color); } #detail .auto-line { --label-color: var(--secondary-text-color); } #detail .timeline-text { margin: var(--space-8) 0 0; white-space: pre-wrap; line-height: 20px; } #detail .timeline-card .clamp-wrap { margin-top: var(--space-8); } #detail .timeline-card .clamp-wrap .timeline-text { margin: 0; } #detail .timeline-commit { margin: var(--space-8) 0 0; overflow: hidden; color: var(--secondary-text-color); text-overflow: ellipsis; white-space: nowrap; } /* Read more also opens the one-line commitment; in Fullscreen everything shows. */ :is(#detail, #item-panel) .clamp.is-open ~ :is(.timeline-commit, .post-commit), #detail .is-max :is(.timeline-commit, .post-commit) { overflow: visible; white-space: normal; } :is(#detail, #item-panel) .evidence { margin-top: var(--space-4); } :is(#detail, #item-panel) .evidence a { display: inline-flex; align-items: center; gap: var(--space-4); height: auto; padding: 0; border: 0; color: var(--link-color); font: var(--font-text2-normal); text-decoration: none; } :is(#detail, #item-panel) .evidence a:hover { background: none; text-decoration: underline; } :is(#detail, #item-panel) .evidence a svg.icon { width: 14px; height: 14px; } :is(#detail, #item-panel) .evidence-text { margin: var(--space-4) 0 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .tl-more { display: flex; justify-content: center; margin-top: var(--space-4); } #detail .tl-more .button { background: var(--primary-background-color); border: 1px solid var(--layout-border-color); } #detail .tl-more[hidden] { display: none; } #detail .tl-nomatch { margin: 0; padding: var(--space-16); color: var(--secondary-text-color); text-align: center; } #detail .tl-nomatch[hidden] { display: none; } /* Related lists (spec §6.6): header-only when empty, capped board otherwise */ #detail .mini-widget .mini-board { padding: var(--space-8) var(--space-16) var(--space-12); } #detail .mini-table .mb-person-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #detail .mini-table td .chip.crm { display: inline-flex; min-width: 0; max-width: calc(100% - 12px); margin: 0 6px; vertical-align: middle; } #detail .mini-table td .chip.crm .chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .mini-table .mb-name-cell .status-label { flex: none; } #detail .mini-table .mb-icon-link { margin: 0 auto; color: var(--icon-color); } #detail .mini-table .mb-scroll, #detail .mb-scroll { overflow-x: auto; } #detail .tab-canvas .mini-widget .mini-board { padding: var(--space-8) var(--space-16) var(--space-16); } #detail .tab-empty, #detail .seat-empty { padding: var(--space-24) 0; } #detail .tab-empty .empty-illustration svg, #detail .seat-empty .empty-illustration svg { width: 120px; height: auto; } #detail .tab-empty .empty-state, #detail .seat-empty .empty-state { margin: 0 auto; } /* Follow-ups tab: one board with Open / Completed / Canceled groups (spec §6.8) */ #detail .tab-board { padding: var(--space-8) 0 var(--space-16); border: 1px solid var(--application-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); } #detail .board-group { margin: 0; padding: 0 var(--space-16); border: 0; background: none; box-shadow: none; } #detail .board-group + .board-group { margin-top: var(--space-8); } #detail .board-group > .group-head { min-height: 40px; } #detail .board-group .group-toggle { height: 32px; font: var(--font-h3-normal); color: var(--group-color); } #detail .board-group .group-toggle svg.widget-chevron { color: var(--group-color); } #detail .board-group .group-count { flex: none; color: var(--secondary-text-color); font: var(--font-text2-normal); white-space: nowrap; } #detail .board-group.is-collapsed > .group-head { padding-left: var(--space-8); box-shadow: inset 6px 0 0 var(--group-color); border-radius: 4px; background: var(--allgrey-background-color); } #detail .board-group .mini-board { padding: 0; } #detail .board-group .group-empty { margin: 0; padding: 0 var(--space-12); height: 36px; display: flex; align-items: center; color: var(--secondary-text-color); box-shadow: inset 6px 0 0 var(--group-color); } #detail .board-group .widget-add { height: 32px; padding: 0 var(--space-8); } #detail .board-group .widget-add svg.icon { width: 16px; height: 16px; } /* Card header (spec §1.2): breadcrumb inline, one-line title, at most 2 labels and +N, icon-only label and Apollo buttons */ #detail .item-header { padding: var(--space-8) var(--space-24) 0; } #detail .item-header-row { flex-wrap: nowrap; gap: var(--space-12); min-height: 48px; } #detail .item-back { display: none; } #detail .item-breadcrumb { flex: 0 1 auto; max-width: 30%; min-width: 0; min-height: 0; gap: 2px; } #detail .item-breadcrumb button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .item-breadcrumb svg.icon { flex: none; } #detail .item-title-row { flex-wrap: nowrap; } #detail .item-title-row h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; } #detail .item-title-row .item-type, #detail .detail-labels { flex: none; } #detail .detail-labels { flex-wrap: nowrap; } #detail .label-more { height: 24px; padding: 0 6px; background: var(--ui-background-color); font: var(--font-text3-normal); } #detail .add-label { color: var(--icon-color); } #detail .item-actions .apollo-jump { color: var(--icon-color); } #detail .item-owner .avatar.no-owner { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px dashed var(--person-empty-color); border-radius: 50%; background: transparent; color: var(--person-empty-color); } #detail .detail-tabs > button.is-zero { color: var(--secondary-text-color); } #detail .detail-tabs.has-overflow-right { mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } #detail .detail-tabs.has-overflow-left { mask-image: linear-gradient(90deg, transparent, #000 24px); } #detail .detail-tabs.has-overflow-left.has-overflow-right { mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } /* Updates tab (spec §6.5): centred column, Log interaction in the composer bar, helper always visible */ #detail .updates-tab { max-width: 760px; margin-inline: auto; } :is(#detail, #item-panel) .composer:not(:focus-within):not(.has-text) .composer-bar { display: flex; } :is(#detail, #item-panel) .composer textarea { min-height: 48px; } :is(#detail, #item-panel) .composer-bar .button svg.icon { width: 16px; height: 16px; } #detail .composer-help { margin: var(--space-4) 0 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, #item-panel) .post-kind { --label-color: var(--color-dark-blue); display: inline-flex; height: 20px; margin-bottom: var(--space-8); } :is(#detail, #item-panel) .post-kind.line { background: transparent; color: var(--color-dark-blue); } :is(#detail, #item-panel) .post-body .clamp-wrap { margin: 0; } :is(#detail, #item-panel) .post-body .clamp { white-space: pre-wrap; } :is(#detail, #item-panel) .post-head .positive-line { margin-left: auto; } /* Item side panel (spec §6.10) */ #item-panel .side-panel-head { padding-top: 46px; } #item-panel .ip-parents { position: absolute; top: 14px; left: 56px; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 200px); min-height: 20px; color: var(--secondary-text-color); } #item-panel .ip-parents button { min-width: 0; padding: 0 2px; border: 0; border-radius: var(--border-radius-small); background: none; color: var(--secondary-text-color); font: var(--font-text2-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } #item-panel .ip-parents button:hover { background: var(--primary-background-hover-color); color: var(--primary-text-color); } #item-panel .ip-parents svg.icon { flex: none; width: 14px; height: 14px; } #item-panel .side-panel-title h2 { font: 500 18px/23px var(--title-font-family); -webkit-line-clamp: 3; } #item-panel .side-panel-actions { gap: var(--space-8); } #item-panel .ip-done svg.icon { width: 16px; height: 16px; } #item-panel .ip-divider { margin: 0 var(--space-4); } #item-panel .ip-value .placeholder { display: inline-flex; align-items: center; gap: var(--space-4); opacity: 1; color: var(--secondary-text-color); } #item-panel .ip-value .placeholder svg.icon { width: 14px; height: 14px; color: var(--secondary-text-color); } #item-panel .ip-field.long .ip-label { display: flex; align-items: center; justify-content: space-between; } #item-panel .ip-field.long .ip-label .icon-button { color: var(--icon-color); } #item-panel .ip-field.long > div.ip-value { display: block; padding: 10px var(--space-12); } #item-panel .ip-field.long .clamp { white-space: pre-wrap; line-height: 20px; } #item-panel .ip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #item-panel .ip-field.soft .ip-value { padding: 0 var(--space-8); border: 1px solid var(--crm-field-border-color); } #item-panel .ip-field.soft .label-select { width: auto; max-width: 100%; height: 24px; margin: 0 auto; padding: 0 var(--space-12); border-radius: var(--border-radius-small); } #item-panel .ip-field.soft.plain .label-select { background: transparent; color: var(--primary-text-color); } #item-panel .ip-field.soft.plain .label-select:hover { background: var(--primary-background-hover-color); } #item-panel .ip-context { margin: 0 0 var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-normal); } #item-panel .ip-context .link-button { font: inherit; } #item-panel .updates-empty .button { margin-top: var(--space-12); } #item-panel .clamp-toggle:not(.block) { margin-top: 2px; font-size: 12px; } /* Tablet (760–1100): one column, Info first with key fields (spec §1.4) */ @media (max-width: 1100px) { #detail .card-columns { grid-template-columns: minmax(0, 1fr); } #detail .card-side { order: -1; position: static; max-height: none; overflow: visible; } } /* Phones (spec §7) */ @media (max-width: 760px) { #detail .detail-body { padding: var(--space-12); } #detail .card-canvas, #detail .card-main, #detail .card-side, #detail .card-wide, #detail .tab-canvas { gap: var(--space-12); } #detail .card-main > .widget.is-empty + .widget.is-empty { margin-top: -4px; } #detail .widget-body { padding: var(--space-12); } #detail .widget-body.flush { padding: 0; } #detail .widget.is-max { inset: var(--space-12); } /* Header: a back arrow and the actions on row 1, the name (2 lines at most) and labels on row 2, then the tabs. */ #detail .item-header { padding: var(--space-4) var(--space-12) 0; } #detail .item-header-row { flex-wrap: wrap; gap: 0 var(--space-8); min-height: 0; } #detail .item-back { display: inline-flex; order: 0; margin-left: -6px; } #detail .item-breadcrumb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #detail .item-actions { order: 1; margin-left: auto; gap: 0; } #detail .item-actions .ai-tertiary, #detail .item-owner { display: none; } #detail .item-title-row { order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding: 2px 0 var(--space-4); } #detail .item-title-row h2 { flex: 0 1 auto; font: 500 18px/23px var(--title-font-family); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #detail .detail-tabs { margin: 0 calc(-1 * var(--space-12)) -1px; padding: 0 var(--space-4); } /* Stage menu with a progress bar instead of the chevrons. */ #detail .stage-bar { display: none; } #detail .stage-stepper { display: block; margin-top: var(--space-12); } #detail .stage-stepper .item-menu-wrap { display: flex; } #detail .stage-step-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; height: 32px; padding: 0 var(--space-12); border: 0; border-radius: var(--border-radius-small); background: var(--crm-stage-active); color: #fff; font: var(--font-text2-normal); cursor: pointer; } #detail .stage-step-btn.inactive { background: var(--crm-stage-inactive); } #detail .stage-step-btn svg.icon { color: #fff; width: 16px; height: 16px; } #detail .stage-menu { left: 0; right: 0; top: calc(100% + 4px); max-height: 60vh; overflow: auto; } #detail .stage-menu .menu-check-space { display: inline-block; width: 18px; } #detail .stage-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; margin-top: var(--space-8); } #detail .stage-progress span { height: 4px; border-radius: 2px; background: var(--crm-stage-inactive); } #detail .stage-progress span.done { background: var(--crm-stage-active); } /* Mini boards become list rows: name and status on line 1, the rest on line 2 (spec §7.5). */ #detail .mini-board { padding: 0 !important; } #detail .mb-scroll { overflow: visible; } #detail .mini-table { min-width: 0 !important; display: block; } #detail .mini-table colgroup, #detail .mini-table thead { display: none; } #detail .mini-table tbody { display: block; } #detail .mini-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-8); padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--application-border-color); box-shadow: inset 4px 0 0 var(--group-color); } #detail .mini-table tr:last-child { border-bottom: 0; } #detail .mini-table tr::after { content: ""; order: 1; flex-basis: 100%; height: 0; } #detail .board-group .widget-add .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #detail .board-group .widget-add { width: 32px; padding: 0; } #detail .mini-table td { display: block; height: auto; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; text-align: left; } #detail .mini-table td.mb-name { flex: 1 1 calc(100% - 140px); min-width: 0; order: 0; } #detail .mini-table td.mb-status { flex: none; order: 1; max-width: 132px; } #detail .mini-table td.mb-status .status-fill { display: inline-block; width: auto; max-width: 100%; height: 24px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); line-height: 24px; } #detail .mini-table td.mb-cell:not(.mb-status) { order: 2; flex: 0 1 auto; min-width: 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .mini-table td.mb-cell:not(.mb-status):empty { display: none; } #detail .mini-table td.mb-due:not(:has(.date-text)) { display: none; } #detail .mini-table td.mb-cell:not(.mb-status):has(.chip) { flex: 0 1 auto; max-width: 60%; } #detail .mini-table td.mb-name + td.mb-cell:not(.mb-status) { flex-basis: auto; } #detail .mini-table tr > td.mb-cell:not(.mb-status):nth-child(2) { flex-basis: auto; } #detail .mini-table td .mb-button, #detail .mini-table td .mb-plain { display: inline-flex; width: auto; height: 24px; padding: 0; gap: var(--space-4); color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .mini-table td .mb-person-name { position: static; width: auto; height: auto; clip: auto; } #detail .mini-table td .mb-button .avatar, #detail .mini-table td .mb-plain .avatar { --size: 18px; font-size: 8px; } #detail .mini-table .mb-text, #detail .mini-table .mb-link { display: inline; padding: 0; white-space: normal; } #detail .mini-table .mb-check { opacity: 1; } #detail .mini-table td .chip.crm { margin: 0; max-width: 100%; } #detail .mini-table tr.mb-add, #detail .mini-table tr.mb-empty { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--group-color) 50%, #fff); } #detail .mini-table tr.mb-add td, #detail .mini-table tr.mb-empty td { flex: 1 1 100%; } #detail .board-group { padding: 0 var(--space-8); } #detail .tab-board .mini-table tr { padding-left: var(--space-12); } /* Truncated cell text and company facts wrap instead of hiding (tooltips are not reachable on touch). */ #detail .company-fact-value { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Never pad an element that is line-clamped: the padding shows a half-cut extra line. The disclaimer wraps in full on phones. */ #detail .widget:not(.is-empty) > .widget-note { padding-inline: var(--space-12); } #detail .timeline-text.clamp { --lines: 3 !important; } #detail .timeline-card { margin-left: 0; } #detail .timeline-who > span:not(.avatar):not(.status-label) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 20px; } #detail .act-toolbar { padding: var(--space-8) var(--space-12); } #detail .ai-note { white-space: normal; padding: 0; margin: var(--space-8) 0; } /* Reviews: stacked rows with a sticky Apply footer. */ #detail .enrich-review .button-row.end { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--space-12)); padding: var(--space-8) var(--space-12); background: var(--primary-background-color); border-top: 1px solid var(--application-border-color); } .enrich-table tr.is-same td:first-child { display: none; } .enrich-table tbody tr.is-same:not(.enrich-record) { display: flex; gap: var(--space-8); padding: var(--space-8) var(--space-12); color: var(--secondary-text-color); } .enrich-table tbody tr.is-same td { padding: 0 !important; } .enrich-table tbody tr.is-same td:nth-child(3) { display: none; } .enrich-table tbody tr.is-same td[data-label]::before { content: none; } #item-panel .ip-parents { max-width: calc(100% - 72px); } } @media (hover: none), (max-width: 760px) { #detail .news-note { white-space: normal; display: block; overflow: visible; -webkit-line-clamp: unset; padding: 0; margin: 0; } #detail .account-news .widget-foot { align-items: flex-start; padding-block: var(--space-8); } #detail .account-news .widget-foot .button { flex: none; } } @media (hover: none) { #detail .company-fact-value { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #detail .mini-table .mb-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 16px; } } /* An Info footer whose only button is for smaller screens hides with it. */ @media (min-width: 1101px) { #detail .info-widget .widget-foot:has(> .fields-toggle:only-child) { display: none; } } @media (min-width: 761px) and (max-width: 1100px) { #detail .info-widget .widget-foot:has(> .fields-toggle:not(.on-t):only-child) { display: none; } } @media (max-width: 760px) { #item-panel .side-panel-title { flex-wrap: wrap; gap: var(--space-8); } #item-panel .side-panel-title h2 { flex: 1 1 100%; } #item-panel .side-panel-actions { margin-top: 0; } } #detail .reveal-toggle.button.tertiary[aria-expanded="true"] { background: transparent; } #detail .reveal-toggle.button.tertiary[aria-expanded="true"]:hover { background: var(--primary-background-hover-color); } /* Update from meeting notes (AI_NOTES_USERS): grouped proposals, each with a checkbox and the words from the notes it is based on. */ #detail .ai-notes-form .field textarea { min-height: 140px; max-height: 384px; field-sizing: content; } #detail .ai-notes-review { display: flex; flex-direction: column; gap: var(--space-12); } #detail .ai-notes-review > p, #detail .ai-notes-review .attention-box, #detail .ai-notes-review .button-row { margin: 0; } #detail .notes-group { margin: 0; padding: var(--space-12) var(--space-16) var(--space-16); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); min-width: 0; } #detail .notes-group legend { display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-4); font: var(--font-text1-bold); color: var(--primary-text-color); } #detail .notes-group .form-grid.compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); padding: 0; } #detail .notes-group .form-grid.compact .field.wide { grid-column: 1 / -1; } #detail .notes-item { display: flex; align-items: flex-start; gap: var(--space-8); padding: var(--space-8) 0; } #detail .notes-item + .notes-item { border-top: 1px solid var(--layout-border-color); } #detail .notes-item > input[type="checkbox"] { margin-top: 4px; flex: none; } #detail .notes-item-body { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; } #detail .notes-item.mention { align-items: center; } #detail .notes-next { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--font-text2-normal); color: var(--primary-text-color); } #detail .ai-quote { display: block; font: var(--font-text2-normal); color: var(--secondary-text-color); overflow-wrap: anywhere; } #detail .ai-quote.not-found { color: var(--primary-text-color); font-weight: 600; } #detail .ai-quote .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--space-4); } @media (max-width: 600px) { #detail .notes-group .form-grid.compact { grid-template-columns: minmax(0, 1fr); } #detail .notes-item.mention { flex-direction: column; align-items: stretch; } } /* Call prep (AI_PREP_USERS): a one-page brief; every fact shows the record it comes from. */ #detail .ai-prep .prep-meeting { margin-bottom: var(--space-12); max-width: 420px; } #detail .ai-prep .prep-goal { margin: 0 0 var(--space-12); } #detail .ai-prep .prep-part { margin-top: var(--space-12); } #detail .ai-prep .prep-part h4 { margin: 0 0 var(--space-4); font: var(--font-text1-bold); color: var(--primary-text-color); } #detail .ai-prep .prep-part p { margin: 0; } #detail .ai-prep .ai-source { display: block; margin-top: 2px; font: var(--font-text2-normal); color: var(--secondary-text-color); } #detail .ai-prep .ai-source.none { color: var(--primary-text-color); font-weight: 600; } #detail .ai-prep .button-row { margin-top: var(--space-12); } #detail .ai-prep .ai-note { display: block; margin-top: var(--space-8); } /* Close plan (AI_PLAN_USERS): ticked steps with owner and date, each showing the record it comes from. */ #detail .ai-plan-review { display: flex; flex-direction: column; gap: var(--space-12); } #detail .ai-plan-review > p, #detail .ai-plan-review .attention-box, #detail .ai-plan-review .button-row, #detail .ai-plan-review .prep-part { margin: 0; } #detail .ai-plan .plan-why { display: block; color: var(--primary-text-color); font: var(--font-text2-normal); } #detail .ai-plan .ai-source { display: block; font: var(--font-text2-normal); color: var(--secondary-text-color); } #detail .ai-plan .ai-source.none { color: var(--primary-text-color); font-weight: 600; } #detail .ai-plan .plan-step.is-added > .icon { margin-top: 2px; color: var(--positive-color, var(--primary-text-color)); flex: none; } #detail .ai-plan .prep-part h4 { margin: 0 0 var(--space-4); font: var(--font-text1-bold); color: var(--primary-text-color); } #detail .ai-plan .prep-goal { margin: 0; } /* ===== Deal card, 2026-10-14 redesign: Where this deal stands + Work on this deal ===== */ /* Where this deal stands: stage bar, five facts, the next step beside the blocker, and the AI read line. */ #detail .glance-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-16); } #detail .glance-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-8) var(--space-12); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color, #fff); } #detail .glance-fact > small { color: var(--secondary-text-color); font: var(--font-text3-normal); text-transform: none; } #detail .glance-value { display: block; min-width: 0; margin: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--primary-text-color); font: var(--font-text1-medium, var(--font-text1-normal)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail button.glance-value { cursor: pointer; border-radius: 4px; } #detail button.glance-value:hover { background: var(--primary-background-hover-color); } #detail .glance-sub { color: var(--secondary-text-color); font: var(--font-text3-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .glance-fact.is-late .glance-sub, #detail .glance-fact.is-late .glance-value { color: var(--negative-color, #d83a52); } #detail .glance-fact.is-attention .glance-value { color: var(--primary-text-color); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; } #detail .glance-fact.is-ok .glance-value { color: var(--positive-color, #00854d); } #detail .glance-fact.is-missing { border-style: dashed; justify-content: space-between; } #detail .glance-fact.is-missing .chip.add { align-self: flex-start; height: 24px; padding: 0 var(--space-8); gap: var(--space-4); border: 1px dashed var(--ui-border-color); background: transparent; color: var(--secondary-text-color); } #detail .glance-more { color: var(--secondary-text-color); font-weight: 400; } #detail .glance-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-12); align-items: stretch; } #detail .glance-row.no-blocker { grid-template-columns: minmax(0, 1fr); } #detail .glance-row .stage-blocker { margin: 0; } #detail .next-step { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-16); border: 1px solid var(--layout-border-color); border-left: 4px solid var(--primary-color); border-radius: var(--border-radius-small); min-width: 0; } #detail .next-step.is-missing { border-left-color: var(--warning-color-hover, #eaaa15); background: var(--warning-color-selected, #fceba1); } #detail .next-label { color: var(--secondary-text-color); font: var(--font-text3-normal); text-transform: uppercase; letter-spacing: .04em; } #detail .next-title { font: var(--font-text1-bold); color: var(--primary-text-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #detail .next-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--secondary-text-color); font: var(--font-text2-normal); } #detail .next-meta .is-late { color: var(--negative-color, #d83a52); } #detail .next-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); } #detail .blocker-edit { margin-left: var(--space-8); } #detail .glance-widget .glance-brief { margin-top: var(--space-12); } /* AI rows: one compact, collapsible group each; the gradient line marks only a result waiting for review. */ #detail .ai-task { position: relative; margin: var(--space-12) 0 0; padding: var(--space-4) var(--space-12) var(--space-8); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color, #fff); } #detail .ai-task > .group-head { gap: var(--space-8); } #detail .ai-task > .group-head h4 .ai-sparkle { margin: 0 2px 0 0; } #detail .ai-task > .group-head .widget-tag { flex: none; } #detail .ai-task .group-sum { display: block; } #detail .ai-task:not(.is-collapsed) .group-sum { display: none; } #detail .ai-task > .group-body { padding: var(--space-8) 0 var(--space-4); } #detail .ai-task.ai-result.pending::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: var(--ai-gradient); border-radius: 8px 8px 0 0; pointer-events: none; } #detail .ai-task-foot { margin-top: var(--space-8); } /* Work on this deal: three moments as a segmented control; a dot marks the one the CRM suggests. */ #detail .moment-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-4); border-radius: var(--border-radius-medium, 8px); background: var(--allgrey-background-color, #f6f7fb); } #detail .moment-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: var(--space-8) var(--space-12); border: 1px solid transparent; border-radius: var(--border-radius-small); background: transparent; color: var(--primary-text-color); text-align: left; cursor: pointer; font: inherit; } #detail .moment-tab:hover { background: var(--primary-background-hover-color); } #detail .moment-tab[aria-selected="true"] { background: var(--primary-background-color, #fff); border-color: var(--layout-border-color); box-shadow: var(--box-shadow-xs, 0 1px 2px rgba(0,0,0,.08)); } #detail .moment-name { display: inline-flex; align-items: center; gap: 6px; font: var(--font-text2-bold, var(--font-text2-normal)); font-weight: 600; } #detail .moment-tab small { max-width: 100%; color: var(--secondary-text-color); font: var(--font-text3-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .moment-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); flex: none; } #detail .m-short { display: none; } #detail .moment-why { display: flex; gap: var(--space-8); align-items: flex-start; margin: var(--space-12) 0 0; color: var(--primary-text-color); font: var(--font-text2-normal); } #detail .moment-why small { color: var(--secondary-text-color); } #detail .moment-why svg.icon { flex: none; margin-top: 2px; color: var(--icon-color); } #detail .moment-body { margin-top: var(--space-12); } #detail .moment-step + .moment-step { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--layout-border-color); } #detail .moment-step h4 { margin: 0 0 var(--space-8); font: var(--font-text1-bold); color: var(--primary-text-color); } #detail .moment-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); color: var(--primary-text-color); font: var(--font-text2-normal); } #detail .moment-line > svg.icon { flex: none; color: var(--icon-color); } #detail .moment-line > span { flex: 1 1 200px; min-width: 0; } #detail .gap-list { list-style: none; margin: 0; padding: 0; } #detail .gap-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 36px; padding: 2px 0; } #detail .gap-list li + li { border-top: 1px solid var(--layout-border-color); } #detail .work-widget .button-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); } @media (max-width: 1180px) { #detail .glance-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { #detail .glance-row { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { #detail .glance-widget .stage-close { display: none; } #detail .glance-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); } #detail .glance-fact { padding: 6px var(--space-8); } #detail .glance-fact:last-child { grid-column: 1 / -1; } #detail .glance-row .stage-blocker .clamp:not(.is-open) { -webkit-line-clamp: 1; } #detail .moment-tab { position: relative; } #detail .m-long { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #detail .m-short { display: inline; } #detail .moment-tab { padding: 6px var(--space-8); } } #detail .glance-widget .stage-line { display: flex; align-items: center; gap: var(--space-12); } #detail .glance-widget .stage-line .stage-bar { flex: 1 1 auto; min-width: 0; margin: 0; } #detail .glance-widget .stage-line .stage-close { flex: none; } #detail .side-demos { display: flex; flex-direction: column; } #detail .side-demo { display: flex; align-items: center; gap: var(--space-8); padding: 6px var(--space-16); } #detail .side-demo + .side-demo { border-top: 1px solid var(--layout-border-color); } #detail .side-demo-main { display: flex; align-items: center; gap: var(--space-12); flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--primary-text-color); cursor: pointer; font: inherit; } #detail .side-demo-text { display: flex; flex-direction: column; min-width: 0; } #detail .side-demo-title { font: var(--font-text2-normal); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .side-demo-text small { color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .side-demo .date-block { flex: none; } @media (max-width: 760px) { #detail .glance-widget .stage-line { display: block; } } #detail .date-block { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--border-radius-small); background: var(--allgrey-background-color); font: 500 10px/12px var(--title-font-family); color: var(--secondary-text-color); letter-spacing: .3px; } #detail .date-block b { font: 500 14px/15px var(--title-font-family); color: var(--primary-text-color); letter-spacing: 0; } /* Phones and narrow cards: on a deal, Work on this deal comes before Deal details (the facts are already on top). */ @media (max-width: 1100px) { #detail[data-kind="deal"] .card-side { order: 0; } } @media (max-width: 760px) { #detail .ai-task > .group-head { flex-wrap: wrap; row-gap: 0; } #detail .ai-task > .group-head .group-sum { flex: 1 1 100%; order: 3; padding-left: 24px; } #detail .ai-task > .group-head .group-action { margin-left: auto; } } #detail .ai-task > .group-head .group-action { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-4); } #detail .ai-task .group-action .ai-stale { height: auto; min-height: 16px; white-space: normal; } #detail .next-actions .button { max-width: 100%; min-width: 0; } #detail .next-actions .ai-tertiary { white-space: normal; height: auto; min-height: 32px; text-align: left; justify-content: flex-start; overflow-wrap: anywhere; } #detail .glance-more { display: block; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .glance-more summary { cursor: pointer; list-style: none; display: inline; color: var(--primary-color); } #detail .glance-more summary::-webkit-details-marker { display: none; } #detail .glance-more[open] summary { margin-right: var(--space-4); } #detail .glance-fact.is-attention .glance-sub { white-space: normal; overflow: visible; } #detail .profit-terms { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-4) 0 var(--space-8); color: var(--primary-text-color); font: var(--font-text2-normal); } #detail .profit-terms svg.icon { flex: none; color: var(--icon-color); } /* Contacts tab: List / Org chart switch, and the org chart (one column per team, most senior first). Phones stack the columns. */ :is(#detail, .nx-team) .people-view-bar { display: flex; align-items: center; gap: var(--space-8); } :is(#detail, .nx-team) .org-toolbar .org-search { flex: 0 1 280px; min-width: 0; height: 32px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); } :is(#detail, .nx-team) .org-toolbar .view-switch > button { font: var(--font-text2-normal); } :is(#detail, .nx-team) .org-shown { color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, .nx-team) .org-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-12); padding: var(--space-12) var(--space-16); } :is(#detail, .nx-team) .org-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-8); border-radius: var(--border-radius-medium); background: var(--grey-background-color); } /* A column with no match fades its heading only; dimmed cards fade their contents, so the focus ring stays at full strength. */ :is(#detail, .nx-team) .org-col.is-dim .org-team, :is(#detail, .nx-team) .org-col.is-dim .org-tier { opacity: .6; } :is(#detail, .nx-team) .org-team { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-4); padding: 0 var(--space-4); font: var(--font-text2-bold); } :is(#detail, .nx-team) .org-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#detail, .nx-team) .org-count { flex: none; padding: 0 6px; border-radius: 8px; background: var(--ui-background-color); color: var(--secondary-text-color); font: var(--font-text3-normal); line-height: 16px; } :is(#detail, .nx-team) .org-tier { margin: var(--space-4) var(--space-4) 0; color: var(--secondary-text-color); font: var(--font-text3-normal); text-transform: uppercase; letter-spacing: .02em; } :is(#detail, .nx-team) .org-people { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } :is(#detail, .nx-team) .org-person { display: flex; align-items: flex-start; gap: var(--space-8); width: 100%; padding: var(--space-8); box-sizing: border-box; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); color: var(--primary-text-color); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-productive-short); } :is(#detail, .nx-team) .org-person:hover { border-color: var(--ui-border-color); background: var(--primary-background-hover-color); } :is(#detail, .nx-team) .org-person:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#detail, .nx-team) .org-person.is-senior { border-left: 3px solid var(--primary-color); background: var(--primary-highlighted-color); } :is(#detail, .nx-team) .org-person.is-senior:hover { background: var(--primary-selected-color); } :is(#detail, .nx-team) .org-person > * { transition: opacity var(--motion-productive-short); } :is(#detail, .nx-team) .org-person.is-dim > * { opacity: .35; } :is(#detail, .nx-team) .org-person > .avatar { flex: none; } :is(#detail, .nx-team) .org-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :is(#detail, .nx-team) .org-name { font: var(--font-text2-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#detail, .nx-team) .org-title { color: var(--secondary-text-color); font: var(--font-text3-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#detail, .nx-team) .org-chips { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 2px; } :is(#detail, .nx-team) .org-chips > * { max-width: 100%; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: var(--border-radius-small); font: var(--font-text3-normal); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#detail, .nx-team) .org-owner { background: var(--crm-chip-color); color: var(--primary-text-color); } :is(#detail, .nx-team) .org-owner.none { border: 1px dashed var(--ui-border-color); background: transparent; color: var(--secondary-text-color); line-height: 16px; } :is(#detail, .nx-team) .org-touch { color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, .nx-team) .org-nomatch { margin: 0 var(--space-16) var(--space-8); color: var(--secondary-text-color); font: var(--font-text2-normal); } :is(#detail, .nx-team) .org-nomatch[hidden] { display: none; } :is(#detail, .nx-team) .org-note { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0; padding: var(--space-8) var(--space-16) var(--space-12); color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, .nx-team) .org-note svg.icon { flex: none; color: var(--icon-color); } @media (max-width: 760px) { :is(#detail, .nx-team) .org-chart { grid-template-columns: 1fr; padding: var(--space-8) var(--space-12); } :is(#detail, .nx-team) .org-toolbar .org-search { flex: 1 1 100%; } :is(#detail, .nx-team) .org-toolbar .view-switch { flex-wrap: nowrap; max-width: 100%; } } /* Tree: the reporting tree, top-down with connector lines (org-tree: nested lists; a node's children sit in its .tree-children). It scrolls sideways inside .tree-scroll, never the page. Phones show the same lists as an indented outline. Senior (VP / C-level) cards have a blue top. */ :is(#detail, .nx-team) .tree-view { --tree-line: var(--ui-border-color); --tree-gap: 20px; min-width: 0; } :is(#detail, .nx-team) .tree-toolbar { flex-wrap: wrap; } :is(#detail, .nx-team) .tree-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-left: auto; } :is(#detail, .nx-team) .tree-hint { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0; padding: var(--space-8) var(--space-16) 0; color: var(--primary-text-color); font: var(--font-text2-normal); } :is(#detail, .nx-team) .tree-hint svg.icon { flex: none; color: var(--icon-color); } :is(#detail, .nx-team) .tree-scroll { max-width: 100%; overflow-x: auto; padding: var(--space-16); box-sizing: border-box; } :is(#detail, .nx-team) .tree-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#detail, .nx-team) .org-tree, :is(#detail, .nx-team) .tree-children, :is(#detail, .nx-team) .tree-loose { margin: 0; padding: 0; list-style: none; } :is(#detail, .nx-team) .tree-children[hidden] { display: none; } :is(#detail, .nx-team) .tree-item { display: flex; flex-direction: column; gap: var(--space-4); width: 208px; min-width: 0; box-sizing: border-box; } :is(#detail, .nx-team) .tree-item.is-draggable { cursor: grab; } :is(#detail, .nx-team) .tree-item.dragging { opacity: .5; } :is(#detail, .nx-team) .tree-card { display: flex; align-items: flex-start; gap: var(--space-8); width: 100%; min-width: 0; padding: var(--space-8); box-sizing: border-box; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); color: var(--primary-text-color); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-productive-short), opacity var(--motion-productive-short); } /* Only a card that opens something (a button) looks clickable; a plain card (print, or a chart someone may not edit) does not. */ :is(#detail, .nx-team) button.tree-card:hover { border-color: var(--ui-border-color); background: var(--primary-background-hover-color); } :is(#detail, .nx-team) div.tree-card { cursor: default; } :is(#detail, .nx-team) .tree-card:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#detail, .nx-team) .tree-card.is-senior { border-top: 3px solid var(--primary-color); background: var(--primary-highlighted-color); } :is(#detail, .nx-team) .tree-card.is-here { border-color: var(--primary-color); } :is(#detail, .nx-team) .tree-card.is-match { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-selected-color); } :is(#detail, .nx-team) .tree-card.is-dim > * { opacity: .35; } :is(#detail, .nx-team) .tree-card.drag-over { border: 1px dashed var(--primary-color); background: var(--primary-selected-color); } :is(#detail, .nx-team) .tree-card > .avatar { flex: none; } :is(#detail, .nx-team) .tree-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :is(#detail, .nx-team) .tree-focus { color: var(--secondary-text-color); font: var(--font-text3-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#detail, .nx-team) .tree-here { background: var(--primary-selected-color); color: var(--primary-text-color); } :is(#detail, .nx-team) .tree-arrange { display: flex; flex-direction: column; gap: 2px; color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, .nx-team) .tree-arrange select { width: 100%; min-width: 0; height: 28px; padding: 0 var(--space-4); box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); color: var(--primary-text-color); font: var(--font-text2-normal); } :is(#detail, .nx-team) .tree-toggle { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; height: 22px; margin-top: 6px; padding: 0 6px; border: 1px solid var(--tree-line); border-radius: 11px; background: var(--primary-background-color); color: var(--secondary-text-color); font: var(--font-text3-normal); cursor: pointer; } :is(#detail, .nx-team) .tree-toggle:hover { color: var(--primary-text-color); border-color: var(--primary-color); } :is(#detail, .nx-team) .tree-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#detail, .nx-team) .tree-toggle svg.icon { transition: transform var(--motion-productive-short); } :is(#detail, .nx-team) .tree-toggle[aria-expanded="false"] svg.icon { transform: rotate(-90deg); } :is(#detail, .nx-team) .tree-empty { margin: var(--space-8) var(--space-16); } :is(#detail, .nx-team) .tree-unplaced { margin: var(--space-8) var(--space-16) var(--space-12); padding: var(--space-8); border-radius: var(--border-radius-medium); background: var(--grey-background-color); } :is(#detail, .nx-team) .tree-unplaced.drag-over { outline: 2px dashed var(--primary-color); outline-offset: -2px; } :is(#detail, .nx-team) .tree-loose { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--space-8); } :is(#detail, .nx-team) .tree-loose > li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; } :is(#detail, .nx-team) .tree-loose .tree-item { width: 100%; } :is(#detail, .nx-team) .tree-drop-note { margin: var(--space-8) var(--space-4) 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, .nx-team) .tree-legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); padding: var(--space-4) var(--space-16) 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } :is(#detail, .nx-team) .tree-key { display: inline-flex; align-items: center; gap: var(--space-4); } :is(#detail, .nx-team) .tree-key::before { content: ''; flex: none; width: 14px; height: 10px; box-sizing: border-box; border: 1px solid var(--layout-border-color); border-radius: 2px; } :is(#detail, .nx-team) .tree-key.senior::before { border-top: 3px solid var(--primary-color); background: var(--primary-highlighted-color); } :is(#detail, .nx-team) .tree-key.none::before { border: 1px dashed var(--ui-border-color); } :is(#detail, .nx-team) .tree-key.line::before { width: 14px; height: 8px; border: 0; border-top: 1px solid var(--secondary-text-color); border-left: 1px solid var(--secondary-text-color); border-radius: 0; transform: translateY(3px); } /* Suggested lines (from titles, never a line until someone confirms): a dashed purple card and line with a Suggested badge, whose evidence shows on hover or focus (.tree-tip) and opens with a click or tap (Confirm, Reject). To confirm lists every suggestion. */ #detail .tree-view { --tree-suggest: var(--color-dark_purple); } #detail .tree-card.is-suggested { border: 1px dashed var(--tree-suggest); } #detail .tree-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px dashed var(--tree-suggest); border-radius: 11px; background: var(--primary-background-color); color: var(--tree-suggest); font: var(--font-text3-medium); white-space: nowrap; cursor: pointer; } #detail .tree-badge svg.icon { flex: none; } #detail button.tree-badge:hover { background: color-mix(in srgb, var(--tree-suggest) 8%, var(--primary-background-color)); } #detail .tree-badge:focus-visible { outline: none; box-shadow: var(--focus-ring); } #detail .tree-badge.is-static { height: 20px; cursor: default; } /* The evidence tooltip of a suggested card (app.js showTreeTip): on the page, above everything, so the tree's scroll box never cuts it off. */ .tree-tip { position: fixed; z-index: 10002; max-width: 240px; padding: var(--space-8) var(--space-16); border-radius: var(--border-radius-small); background: var(--tooltip-background); color: #fff; font: var(--font-text2-normal); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--box-shadow-medium); pointer-events: none; } .tree-tip[hidden] { display: none; } #detail .tree-why { padding: var(--space-8); border: 1px dashed var(--tree-suggest); border-radius: var(--border-radius-small); background: var(--primary-background-color); font: var(--font-text3-normal); } #detail .tree-why[hidden] { display: none; } #detail .tree-why-text { margin: 0; color: var(--primary-text-color); overflow-wrap: anywhere; } #detail .tree-why-meta { margin: var(--space-4) 0 0; color: var(--secondary-text-color); } #detail .tree-why-actions, #detail .tree-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); } #detail .tree-confirm { margin: var(--space-8) var(--space-16) var(--space-12); padding: var(--space-8); border: 1px dashed var(--tree-suggest); border-radius: var(--border-radius-medium); } #detail .tree-confirm-note { margin: 0 0 var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .tree-asks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; } #detail .tree-ask { min-width: 0; padding: var(--space-8); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); } #detail .tree-ask-head { display: flex; align-items: flex-start; gap: var(--space-8); min-width: 0; } #detail .tree-ask-head > .avatar { flex: none; } #detail .tree-ask-head .link-button.org-name { min-height: 24px; padding: 0; text-align: left; } #detail .tree-ask-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin: var(--space-8) 0 0; color: var(--primary-text-color); font: var(--font-text2-normal); } #detail .tree-ask-why { margin: var(--space-4) 0 0; color: var(--secondary-text-color); font: var(--font-text3-normal); overflow-wrap: anywhere; } #detail .tree-ask-option { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); } /* Find more lines (AI_LINES_USERS): a row per source (notes, the web) with its button and what the last search found. An AI quote in the evidence names where it comes from (AI · From notes, AI · From the web) and its activity and date, or a link to the page. */ #detail .tree-find { margin: var(--space-8) var(--space-16) var(--space-12); padding: var(--space-8); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); } #detail .tree-find .org-team { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } #detail .tree-find-row + .tree-find-row { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--layout-border-color); } #detail .tree-find-note { margin: 0 0 var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-normal); overflow-wrap: anywhere; } #detail .tree-find-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } #detail .tree-find-status { display: inline-flex; align-items: center; gap: var(--space-4); min-width: 0; color: var(--secondary-text-color); font: var(--font-text3-normal); overflow-wrap: anywhere; } /* Find people (Apollo): the filters and button wrap; each result is a row with its tick box, and people already in the CRM are muted. */ #detail .tree-people { margin: var(--space-8) var(--space-16) var(--space-12); padding: var(--space-8); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); } #detail .tab-empty + .tree-people, #detail .tab-empty .tree-people { margin: var(--space-12) 0 0; } #detail .tree-people .org-team { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } #detail .tree-people-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); margin: 0 0 var(--space-4); } #detail .tree-people-filter { display: grid; gap: 2px; min-width: 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .tree-people-filter select { min-height: 32px; max-width: 100%; padding: 0 var(--space-8); border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); color: var(--primary-text-color); font: var(--font-text2-normal); } #detail .tree-people-form .button { display: inline-flex; align-items: center; gap: var(--space-4); max-width: 100%; } #detail .tree-people-form .button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #detail .tree-people .widget-note { margin: 0 0 var(--space-8); padding: 0; } #detail .tree-people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-8); margin: var(--space-8) 0; padding: 0; list-style: none; } #detail .tree-person { display: flex; align-items: flex-start; gap: var(--space-8); min-width: 0; padding: var(--space-8); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); } #detail .tree-person > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; } #detail .tree-person > label { flex: 1; min-width: 0; cursor: pointer; } #detail .tree-person.is-known { background: var(--allgrey-background-color); } #detail .tree-person.is-known > label { cursor: default; } #detail .tree-person-check { flex: none; display: inline-flex; color: var(--positive-color); } #detail .tree-person-note { display: block; margin-top: 2px; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .tree-people-report { margin: var(--space-8) 0; padding: var(--space-8); border-radius: var(--border-radius-small); background: var(--allgrey-background-color); font: var(--font-text2-normal); overflow-wrap: anywhere; } #detail .tree-people-report p { margin: 0; } #detail .tree-people-skipped { margin: var(--space-4) 0 0; padding-left: var(--space-16); color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .tree-src { display: inline-block; margin-right: 2px; color: var(--tree-suggest); font: var(--font-text3-medium); } #detail .tree-src-meta { color: var(--secondary-text-color); white-space: nowrap; } #detail .tree-src-link { color: var(--link-color); overflow-wrap: anywhere; } #detail .tree-key.suggested::before { width: 14px; height: 8px; border: 0; border-top: 1px dashed var(--tree-suggest); border-left: 1px dashed var(--tree-suggest); border-radius: 0; transform: translateY(3px); } /* Computers and tablets: the classic top-down tree. Each child draws half of the bar above it and a drop line; the parent's list draws the stem. */ @media (min-width: 761px) { :is(#detail, .nx-team) .org-tree { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-24); width: max-content; min-width: 100%; } :is(#detail, .nx-team) .tree-node { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 var(--space-8); } :is(#detail, .nx-team) .tree-children { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: var(--tree-gap); } :is(#detail, .nx-team) .tree-children::before { content: ''; position: absolute; top: 0; left: 50%; height: var(--tree-gap); border-left: 1px solid var(--tree-line); } :is(#detail, .nx-team) .tree-toggle::before { content: ''; position: absolute; bottom: 100%; left: 50%; height: 6px; border-left: 1px solid var(--tree-line); } :is(#detail, .nx-team) .tree-children > .tree-node { padding-top: var(--tree-gap); } :is(#detail, .nx-team) .tree-children > .tree-node::before, :is(#detail, .nx-team) .tree-children > .tree-node::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: var(--tree-gap); border-top: 1px solid var(--tree-line); } :is(#detail, .nx-team) .tree-children > .tree-node::after { right: auto; left: 50%; border-left: 1px solid var(--tree-line); } :is(#detail, .nx-team) .tree-children > .tree-node:only-child { padding-top: 0; } :is(#detail, .nx-team) .tree-children > .tree-node:only-child::before, :is(#detail, .nx-team) .tree-children > .tree-node:only-child::after { display: none; } :is(#detail, .nx-team) .tree-children > .tree-node:first-child::before, :is(#detail, .nx-team) .tree-children > .tree-node:last-child::after { border: 0; } :is(#detail, .nx-team) .tree-children > .tree-node:last-child::before { border-right: 1px solid var(--tree-line); border-radius: 0 6px 0 0; } :is(#detail, .nx-team) .tree-children > .tree-node:first-child::after { border-radius: 6px 0 0 0; } /* A suggested person's half of the bar and drop line are dashed, and so is the stem above people who are all suggested. */ #detail .tree-children > .tree-node.is-suggested::before, #detail .tree-children > .tree-node.is-suggested::after { border-style: dashed; border-color: var(--tree-suggest); } #detail .tree-children.is-suggested::before { border-left-style: dashed; border-left-color: var(--tree-suggest); } } /* Phones: an indented outline; the toggle sits at the right of each card, and arrange uses the selects (no dragging). */ @media (max-width: 760px) { :is(#detail, .nx-team) .tree-actions { margin-left: 0; } :is(#detail, .nx-team) .tree-scroll { overflow: visible; padding: var(--space-8) var(--space-12); } :is(#detail, .nx-team) .tree-node { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-4); padding: var(--space-4) 0; } :is(#detail, .nx-team) .tree-node > .tree-item { width: auto; } :is(#detail, .nx-team) .tree-node > .tree-toggle { margin-top: var(--space-8); } :is(#detail, .nx-team) .tree-node > .tree-children { grid-column: 1 / -1; margin: var(--space-4) 0 0 var(--space-12); padding-left: var(--space-12); border-left: 1px solid var(--tree-line); } :is(#detail, .nx-team) .tree-children > .tree-node::before { content: ''; position: absolute; top: 26px; left: calc(-1 * var(--space-12)); width: 10px; border-top: 1px solid var(--tree-line); } :is(#detail, .nx-team) .tree-unplaced { margin: var(--space-8) var(--space-12); } :is(#detail, .nx-team) .tree-loose { grid-template-columns: 1fr; } #detail .tree-confirm, #detail .tree-find, #detail .tree-people { margin: var(--space-8) var(--space-12); } #detail .tree-asks, #detail .tree-people-list { grid-template-columns: 1fr; } #detail .tree-people-filter, #detail .tree-people-filter select { width: 100%; } } /* Our team (account card › Our team): the seat tree reuses Tree's cards, connector lines and phone outline. An open seat (nobody in it yet) is dashed and amber; a proposed role has a Draft corner. Copy as outline falls back to a selected box under the toolbar. */ :is(#detail, .nx-team) .seat-view { --tree-line: var(--ui-border-color); --tree-gap: 20px; min-width: 0; } :is(#detail, .nx-team) .seat-toolbar { flex-wrap: wrap; } :is(#detail, .nx-team) .seat-summary { margin: 0; color: var(--primary-text-color); font: var(--font-text2-medium); } :is(#detail, .nx-team) .seat-card, #print-root .seat-card { position: relative; } :is(#detail, .nx-team) .seat-card.is-draft, #print-root .seat-card.is-draft { padding-top: var(--space-16); } :is(#detail, .nx-team) .seat-card.is-open, #print-root .seat-card.is-open { border: 1px dashed var(--color-working_orange-hover); background: color-mix(in srgb, var(--color-working_orange) 12%, var(--primary-background-color)); } :is(#detail, .nx-team) .seat-card.is-open .avatar.empty { color: var(--color-working_orange-hover); } :is(#detail, .nx-team) .seat-card .org-title { color: var(--primary-text-color); white-space: normal; overflow-wrap: anywhere; } :is(#detail, .nx-team) .seat-card .seat-focus { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } :is(#detail, .nx-team) .seat-card .seat-cut { font-style: italic; } .seat-draft { position: absolute; top: -1px; right: -1px; padding: 0 6px; border-radius: 0 var(--border-radius-small) 0 var(--border-radius-small); background: var(--secondary-text-color); color: var(--primary-background-color); font: var(--font-text3-medium); line-height: 16px; letter-spacing: .02em; } :is(#detail, .nx-team) .seat-fill { align-self: center; } :is(#detail, .nx-team) .tree-key.open::before { border: 1px dashed var(--color-working_orange-hover); background: color-mix(in srgb, var(--color-working_orange) 12%, var(--primary-background-color)); } :is(#detail, .nx-team) .tree-key.draft::before { border: 0; border-top: 4px solid var(--secondary-text-color); } :is(#detail, .nx-team) .seat-outline { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) var(--space-16) 0; font: var(--font-text2-medium); } :is(#detail, .nx-team) .seat-outline textarea { width: 100%; box-sizing: border-box; padding: var(--space-8); border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); font-family: ui-monospace, Menlo, Consolas, monospace; resize: vertical; } :is(#detail, .nx-team) .seat-copy-temp { position: fixed; top: 0; left: -9999px; opacity: 0; } /* Teams (#teams; Workspace › Nexaminds team until 2026-10-22): the team picker, the team's name, counts and the accounts it covers, then the same seat tree as Our team (the rules above also apply inside .nx-team). The page never scrolls sideways: only the tree does, inside. */ .nx-team-page, .nx-tab-body, .nx-team { min-width: 0; } /* A chart uses the page's whole width (other Workspace sections stop at 1100px). */ #view .ws-section.nx-team { max-width: none; } .nx-team { --tree-line: var(--ui-border-color); --tree-gap: 20px; display: flex; flex-direction: column; gap: var(--space-12); } /* The picker is a row of toggle buttons that wraps on narrow screens: each button stands alone (its own corners, no shared border) and a long team name wraps inside it, so a second row never overlaps the team's name below and nothing scrolls sideways. */ .nx-team .view-switch.nx-team-picker:not(.board-view-tabs) { flex-wrap: wrap; align-self: flex-start; gap: var(--space-4); height: auto; max-width: 100%; min-width: 0; } .nx-team .view-switch.nx-team-picker:not(.board-view-tabs) > button { height: auto; min-height: 32px; max-width: 100%; margin-left: 0; padding-block: var(--space-4); border-radius: var(--border-radius-small); white-space: normal; overflow-wrap: anywhere; text-align: left; } .nx-team-picker .widget-count { margin-left: var(--space-4); } .nx-team-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-8) var(--space-16); min-width: 0; } .nx-team-titles { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .nx-team-titles .ws-section-title { margin: 0; overflow-wrap: anywhere; } .nx-team .seat-summary { margin: 0; color: var(--primary-text-color); font: var(--font-text2-medium); } .nx-team-covers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; font: var(--font-text2-normal); } .nx-team-covers-label { margin-right: var(--space-4); color: var(--secondary-text-color); } .nx-team-covers .chip { cursor: pointer; max-width: 100%; } .nx-team-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } .nx-team .seat-view { min-width: 0; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); } .nx-team .seat-empty { padding: var(--space-24) var(--space-16); } /* Teams (#teams) is a page of its own: the board header names it, and the chart uses the page's width. */ .teams-page { padding: var(--space-8) 0 var(--space-32); } #view .nx-team-actions .row-menu-button.nx-team-menu { flex: none; align-self: center; width: 32px; height: 32px; margin-left: 0; opacity: 1; border: 1px solid var(--ui-border-color); } /* A seat opened from search is marked for a moment. */ .nx-team .seat-card.is-found { box-shadow: 0 0 0 2px var(--primary-color); } /* Teams › Teams | People: the page's two tabs, above the chart or the People cards. */ #view .ws-tabs.nx-tabs { margin: 0 0 var(--space-16); } /* Teams › People (#teams?tab=people): search and Show people who left, then one card per person in a grid (one column on phones). A long name, title or email wraps inside its card, so the page never scrolls sideways. */ #view .ws-section.nx-people { max-width: none; } .nx-people .ws-section-desc { margin: 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } .nx-people-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); } .nx-people-find { width: min(320px, 100%); box-sizing: border-box; } .nx-people-left-toggle { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--font-text2-normal); cursor: pointer; } .nx-people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-12); margin: 0; padding: 0; list-style: none; } .nx-person { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-12); min-width: 0; padding: var(--space-12); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); } .nx-person[hidden] { display: none; } .nx-person > .avatar { flex: none; } .nx-person.is-left { background: var(--allgrey-background-color, var(--primary-background-hover-color)); } .nx-person-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .nx-person-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); } .nx-person-name { font: var(--font-text1-medium); color: var(--primary-text-color); overflow-wrap: anywhere; } .nx-person-left { padding: 0 var(--space-8); border-radius: var(--border-radius-small); background: var(--ui-background-color, var(--primary-background-hover-color)); color: var(--primary-text-color); font: var(--font-text3-medium); } .nx-person-title { color: var(--primary-text-color); font: var(--font-text2-normal); overflow-wrap: anywhere; } .nx-person-email { display: flex; align-items: center; gap: var(--space-4); min-width: 0; font: var(--font-text2-normal); } .nx-person-email a { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .nx-person-seats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); } .nx-person-seats .chip { cursor: pointer; max-width: 100%; height: auto; min-height: 24px; padding-block: 2px; } .nx-person-seats .chip-label { white-space: normal; overflow-wrap: anywhere; line-height: 18px; text-align: left; } .nx-person-note { color: var(--secondary-text-color); font: var(--font-text3-normal); } .nx-person-actions { display: flex; flex: 1 0 100%; align-items: center; justify-content: flex-end; gap: var(--space-4); } #view .nx-person-actions .row-menu-button.nx-person-menu { flex: none; width: 32px; height: 32px; margin-left: 0; opacity: 1; border: 1px solid var(--ui-border-color); } .nx-people-none { margin: 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } .nx-person-source { margin: 0; color: var(--secondary-text-color); font: var(--font-text2-normal); } @media (max-width: 760px) { .nx-people-list { grid-template-columns: minmax(0, 1fr); } .nx-people-find { width: 100%; } } /* Seat form › Person: the list under the box, People first (photo, full name, title), then other names. */ .person-combo { position: relative; display: block; } .person-suggest { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: flex; flex-direction: column; max-height: 260px; overflow: auto; padding: var(--space-4); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: var(--box-shadow-medium, 0 4px 17px rgba(0,0,0,.2)); } .person-suggest[hidden] { display: none; } .person-group { display: flex; flex-direction: column; } .person-group-label { padding: var(--space-4) var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-medium); } .person-option { display: flex; align-items: center; gap: var(--space-8); min-height: 36px; padding: var(--space-4) var(--space-8); border-radius: var(--border-radius-small); cursor: pointer; } .person-option:hover, .person-option.is-active { background: var(--primary-background-hover-color); } .person-option.is-active { box-shadow: inset 0 0 0 1px var(--primary-color); } .person-option > .avatar { flex: none; } .person-option-text { display: flex; flex-direction: column; min-width: 0; } .person-option-name { color: var(--primary-text-color); font: var(--font-text2-normal); overflow-wrap: anywhere; } .person-option-sub { color: var(--secondary-text-color); font: var(--font-text3-normal); overflow-wrap: anywhere; } /* Seat form › Photo: the preview (uploaded photo, sign-in photo or initials) beside Upload or Replace and Remove. */ .seat-photo { display: flex; flex-direction: column; gap: var(--space-4); } .seat-photo-label { font: var(--font-text2-medium); } .seat-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); } .seat-photo-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); } .seat-photo-error { color: var(--negative-color); font: var(--font-text3-normal); } .seat-photo-error:empty { display: none; } /* Account card › Our team: "Covered by the Nexaminds team", above the account's own seats. */ #detail .nx-covered { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin: 0 0 var(--space-12); padding: var(--space-8) var(--space-12); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-highlighted-color); } #detail .nx-covered-icon { display: inline-flex; color: var(--primary-color); } #detail .nx-covered-text { flex: 1 1 200px; min-width: 0; } #detail .nx-covered-title { margin: 0; font: var(--font-text1-medium); overflow-wrap: anywhere; } #detail .nx-covered-sub { margin: 2px 0 0; color: var(--secondary-text-color); font: var(--font-text3-normal); } #detail .nx-covered-people { flex: none; } /* Team form: the accounts the team covers, ticked in a list that scrolls inside the form; the search box narrows it. */ .nx-covers { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; margin: 0; padding: 0; border: 0; } .nx-covers legend { padding: 0; margin-bottom: var(--space-4); font: var(--font-text2-medium); } .nx-covers-find { height: 32px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); } .nx-covers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px var(--space-8); max-height: 220px; overflow: auto; padding: var(--space-4); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); } .nx-cover { display: flex; align-items: center; gap: var(--space-8); min-width: 0; padding: var(--space-4); border-radius: var(--border-radius-small); font: var(--font-text2-normal); cursor: pointer; } .nx-cover[hidden] { display: none; } .nx-cover:hover { background: var(--primary-background-hover-color); } .nx-cover-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-cover small { color: var(--secondary-text-color); font: var(--font-text3-normal); } /* Print (Our team › Print): a copy of the tree in #print-root, every branch open, alone on the page. It is measured off screen first; app.js scales a wide tree down (--print-zoom) or prints it as an outline (is-outline) so nothing is cut off. */ #print-root { display: none; } #print-root.is-measuring { display: block; position: absolute; top: 0; left: -100000px; visibility: hidden; } #print-root { --tree-line: #8a8c96; --tree-gap: 18px; color: #1f1f1f; font-family: var(--font-family); } #print-root h1 { margin: 0 0 4px; font: var(--font-h2-bold); } #print-root .seat-summary { margin: 0 0 16px; font: var(--font-text2-normal); } #print-root .seat-print-tree { zoom: var(--print-zoom, 1); } #print-root .org-tree, #print-root .tree-children { margin: 0; padding: 0; list-style: none; } #print-root .org-tree { display: flex; justify-content: center; align-items: flex-start; gap: 16px; width: max-content; min-width: 100%; } #print-root .tree-node { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 6px; break-inside: avoid; } #print-root .tree-item { width: 180px; } #print-root .tree-card { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid #c3c6d4; border-radius: 4px; background: #fff; } #print-root .tree-card .avatar { flex: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; } #print-root .tree-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #print-root .org-name { font: var(--font-text2-bold); } #print-root .org-title { font: var(--font-text3-medium); } #print-root .tree-focus { color: #50525c; font: var(--font-text3-normal); } #print-root .seat-card.is-open, #print-root .seat-draft { print-color-adjust: exact; -webkit-print-color-adjust: exact; } #print-root .tree-children { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: var(--tree-gap); } #print-root .tree-children::before { content: ''; position: absolute; top: 0; left: 50%; height: var(--tree-gap); border-left: 1px solid var(--tree-line); } #print-root .tree-children > .tree-node { padding-top: var(--tree-gap); } #print-root .tree-children > .tree-node::before, #print-root .tree-children > .tree-node::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: var(--tree-gap); border-top: 1px solid var(--tree-line); } #print-root .tree-children > .tree-node::after { right: auto; left: 50%; border-left: 1px solid var(--tree-line); } #print-root .tree-children > .tree-node:only-child { padding-top: 0; } #print-root .tree-children > .tree-node:only-child::before, #print-root .tree-children > .tree-node:only-child::after { display: none; } #print-root .tree-children > .tree-node:first-child::before, #print-root .tree-children > .tree-node:last-child::after { border: 0; } #print-root .tree-children > .tree-node:last-child::before { border-right: 1px solid var(--tree-line); } #print-root.is-outline .org-tree, #print-root.is-outline .tree-children { display: block; width: auto; padding: 0; } #print-root.is-outline .tree-children { margin-left: 16px; padding-left: 12px; border-left: 1px solid var(--tree-line); } #print-root.is-outline .tree-children::before, #print-root.is-outline .tree-node::before, #print-root.is-outline .tree-node::after { display: none; } #print-root.is-outline .tree-node { display: block; padding: 4px 0; } #print-root.is-outline .tree-item { width: 360px; } #print-root .seat-print-foot { margin-top: 20px; padding-top: 8px; border-top: 1px solid #c3c6d4; font: var(--font-text2-bold); } #print-root .seat-print-note { margin-top: 8px; color: #50525c; font: var(--font-text3-normal); } @page seats { size: landscape; margin: 12mm; } @media print { html.printing-seats body > :not(#print-root) { display: none !important; } html.printing-seats, html.printing-seats body { height: auto !important; overflow: visible !important; background: #fff; } html.printing-seats #print-root { display: block; page: seats; } }