/* Pages: Home (monday "My work" + Numbers widgets), Deals pipeline Kanban, Demos Kanban, calendars, Workspace home,
   activity and reviews (spec §6, §8.2–8.9, QA-4). Loaded last; rules are scoped under #view so older layers do not leak in. */

/* ---------- Empty states (§6.4) ---------- */
#view .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-24); }
#view .empty-state .empty-illustration svg { display: block; max-width: 280px; width: 100%; height: auto; }
#view .empty-state .empty-title { margin: var(--space-16) 0 0; font: var(--font-h3-medium); font-size: 17px; line-height: 24px; color: var(--primary-text-color); }
#view .empty-state .empty-desc { margin: var(--space-4) 0 0; max-width: 500px; font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .empty-state .empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); }
#view .empty-state.compact { padding: var(--space-16); }
#view .empty-state.compact .empty-title { margin-top: 0; font: var(--font-text2-bold); }
#view .empty-state.compact .empty-desc { margin-top: var(--space-4); color: var(--secondary-text-color); }
#view .empty-state.compact .empty-actions { margin-top: var(--space-8); }

/* ---------- Home: page frame and header (§6.3) ---------- */
body[data-page="today"] #view { padding: 24px 30px 80px 42px; }
#view .home-page { container-type: inline-size; container-name: home; }
#view .home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); margin: 0; padding: 0; border: 0; background: none; }
#view .home-head .greeting h1 { margin: 0; font: var(--font-h1-normal); letter-spacing: var(--letter-spacing-h1); color: var(--primary-text-color); }
#view .home-head .greeting p { margin: var(--space-4) 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .home-head .quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); margin: 4px 0 0; }
#view .home-head .quick-actions .button { margin: 0; box-shadow: none; }

/* "Showing" people selector and the Client work | All work ButtonGroup */
#view .home-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin: var(--space-20) 0 var(--space-16);
  padding: 0 0 var(--space-12); border-bottom: 1px solid var(--layout-border-color); }
#view .home-person { position: relative; display: inline-flex; align-items: center; gap: var(--space-4); min-width: 0; }
#view .home-controls-label { margin-right: var(--space-4); font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .home-person-button { gap: var(--space-8); padding: 0 var(--space-8) 0 var(--space-4); max-width: 260px; }
#view .home-person-button .avatar { --size: 24px; font-size: 10px; }
#view .home-person-button .home-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary-text-color); }
#view .home-person-button svg.icon { width: 16px; height: 16px; color: var(--primary-text-color); }
#view .home-person-menu { top: calc(100% + 4px); left: 0; right: auto; min-width: 220px; }
#view .home-person-menu .menu-item .avatar { --size: 24px; font-size: 10px; }
.avatar.team-everyone { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ui-background-color); color: var(--primary-text-color); }
.avatar.team-everyone svg.icon { width: 16px; height: 16px; }
#view .home-controls .home-scope { flex: none; }

/* ---------- Numbers widgets (§6.3, §6.5): white, 1px #e7e9ef, radius 8px, no colored backgrounds ---------- */
#view .kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: 0 0 var(--space-32); }
@container home (min-width: 960px) and (max-width: 1179px) { #view .kpi { padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16); } #view .kpi-row { gap: var(--space-12); } }
#view .kpi { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 112px; min-height: 0; box-sizing: border-box;
  padding: var(--space-16); overflow: hidden; background: var(--primary-background-color); border: 1px solid var(--application-border-color);
  border-radius: var(--border-radius-medium); box-shadow: none; color: var(--primary-text-color); text-decoration: none; transform: none; cursor: pointer;
  transition: border-color var(--motion-productive-short) var(--motion-timing-transition); }
#view .kpi::before { content: none; display: none; }
#view .kpi:last-child { grid-column: auto; }
#view .kpi span { margin: 0; font: inherit; color: inherit; }
#view .kpi small { margin: 0; line-height: 16px; }
#view .kpi:hover { border-color: var(--ui-border-color); box-shadow: none; transform: none; text-decoration: none; }
#view .kpi:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#view .kpi .kpi-title { display: flex; align-items: center; gap: var(--space-4); min-width: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .kpi .kpi-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .kpi .kpi-info { display: inline-flex; flex: none; color: var(--icon-color); }
#view .kpi .kpi-info svg.icon { width: 16px; height: 16px; }
#view .kpi strong { display: block; font: 400 32px/39px var(--title-font-family); color: var(--primary-text-color); letter-spacing: -0.5px; }
#view .kpi.alert strong { color: var(--primary-text-color); }
#view .kpi .kpi-title > span:first-child { white-space: nowrap; }
#view .kpi small { display: block; font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Table | Calendar generic tabs with Customize at the right, over a full-width 1px #d0d4e4 line (spec §6.3, monday My Work) */
#view .home-tabs { display: flex; align-items: flex-end; gap: var(--space-8); margin: var(--space-24) 0 var(--space-16); border-bottom: 1px solid var(--layout-border-color); }
#view .home-tabs .home-view-tabs { border-bottom: 0; margin-left: -8px; }
#view .home-tabs .home-view-tabs > button[aria-selected="true"]::after { bottom: -1px; }
#view .home-customize-wrap { position: relative; display: inline-flex; margin: 0 0 4px auto; }
#view .home-customize { gap: var(--space-8); height: 32px; padding: 0 var(--space-8); }
#view .home-customize svg.icon { width: 20px; height: 20px; }
#view .home-customize-pop { top: calc(100% + 4px); right: 0; left: auto; width: 240px; padding: var(--space-8); }
#view .home-customize-pop h2 { margin: 0; padding: var(--space-8); font: var(--font-text2-medium, 600 14px/20px var(--font-family)); color: var(--primary-text-color); }
#view .home-customize-row { display: flex; align-items: center; gap: var(--space-8); height: 36px; padding: 0 var(--space-8); border-radius: var(--border-radius-small); cursor: pointer; font: var(--font-text2-normal); }
#view .home-customize-row:hover { background: var(--primary-background-hover-color); }
#view .home-customize-row input { width: 16px; height: 16px; margin: 0; }
#view .home-main .calendar { margin-top: 0; }

/* ---------- Buckets + widget column ---------- */
#view .home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); align-items: start; margin: 0; }
#view .home-main { min-width: 0; }
#view .home-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin: 0 0 var(--space-8); }
#view .home-section-head h2 { margin: 0; font: var(--font-h3-normal); color: var(--primary-text-color); }
#view .home-section-head p { margin: 2px 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .home-main .board-body { padding-bottom: 0; }
#view .board-table tr.action-item { display: table-row; padding: 0; gap: 0; border: 0; background: none; transition: none; }
#view .board-table tr.action-item:hover { background: none; }
#view .home-main .board-group { margin-bottom: 30px; }
#view .home-main .board-group .group-heading small { opacity: 1; }
#view .home-main .board-table .summary-row { display: none; }
#view .home-main .board-body { --name-w: 360px; } /* QA-8: room for our long action names */
#view .home-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-16); align-items: start; min-width: 0; }
@container home (min-width: 1240px) {
  #view .home-grid { grid-template-columns: minmax(0, 1fr); }
  #view .home-widgets { grid-template-columns: minmax(0, 1fr); }
}

/* Widget card (§6.5): white, 1px #e7e9ef, radius 8px, 56px header with a divider */
#view .home-widget { min-width: 0; margin: 0; padding: 0; background: var(--primary-background-color); border: 1px solid var(--application-border-color);
  border-radius: var(--border-radius-medium); box-shadow: none; overflow: hidden; }
#view .home-widget-head { display: flex; align-items: center; gap: var(--space-8); height: 56px; padding: 0 var(--space-12) 0 var(--space-20); border-bottom: 1px solid var(--application-border-color); }
#view .home-widget-head h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-h3-normal);
  color: var(--primary-text-color); }
#view .home-widget-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 10px; background: var(--ui-background-color); font: var(--font-text3-normal); color: var(--primary-text-color); }
#view .home-widget-end { display: inline-flex; align-items: center; gap: var(--space-4); margin-left: auto; flex: none; }
#view .home-widget-end .button { height: 32px; padding: 0 var(--space-8); font: var(--font-text2-normal); color: var(--primary-text-color); text-decoration: none; }
#view .home-widget-body { padding: var(--space-8) 0; }

/* Deals that need attention: an embedded mini board */
#view .home-attention .attention-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-12); margin: 0; padding: var(--space-12) var(--space-20);
  border: 0; border-bottom: 1px solid var(--application-border-color); border-radius: 0; background: none; box-shadow: none; }
#view .home-attention .attention-card:last-child { border-bottom: 0; }
#view .home-attention .attention-card:hover { background: var(--primary-background-hover-color); }
#view .attention-main { min-width: 0; }
#view .attention-main .name-link { display: block; max-width: 100%; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-text2-medium); color: var(--primary-text-color); text-align: left; }
#view .attention-main .name-link:hover { color: var(--link-color); text-decoration: none; }
#view .attention-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-text3-normal); color: var(--secondary-text-color); margin: 0; }
#view .home-attention .attention-card > .overview-pill { align-self: start; margin-top: 1px; }
#view .home-attention .attention-reasons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
#view .home-attention .attention-reasons .status-label { height: 20px; padding: 0 6px; font: var(--font-text3-normal); line-height: 18px; color: var(--primary-text-color); background: var(--primary-background-color); }
#view .home-attention .attention-next { grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 2px; align-items: center; font: var(--font-text2-normal); gap: var(--space-8); min-width: 0; margin: 0; }
#view .home-attention .attention-step { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .home-attention .attention-next .button { flex: none; color: var(--primary-color); }
#view .home-attention .attention-next small { flex: none; margin: 0 0 0 auto; font: var(--font-text3-normal); color: var(--secondary-text-color); }

/* Demos this week: 44px rows with a date block */
#view .home-empty { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#view .demo-row { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 44px; margin: 0; padding: 6px var(--space-20); box-sizing: border-box;
  border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; color: var(--primary-text-color); font: var(--font-text2-normal); cursor: pointer; }
#view .demo-row:hover { background: var(--primary-background-hover-color); }
#view .demo-row:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
#view .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; }
#view .date-block b { font: 500 14px/15px var(--title-font-family); color: var(--primary-text-color); letter-spacing: 0; }
#view .demo-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#view .demo-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .demo-row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-text3-normal); color: var(--secondary-text-color); }
#view .demo-row .overview-pill { flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
#view .demo-row .avatar-group { display: inline-flex; flex: none; }
#view .demo-row .avatar-group .avatar + .avatar { margin-left: -8px; }

/* Pipeline review: widget with the AI accent (§8.10) */
#view .home-widget.review-prep { margin: 0; padding: 0; background: linear-gradient(var(--primary-background-color), var(--primary-background-color)) padding-box, var(--ai-gradient) border-box;
  border: 1px solid transparent; box-shadow: var(--ai-glow); }
#view .review-prep .review-prep-head { display: flex; justify-content: flex-start; padding-left: var(--space-16); }
#view .review-prep .review-prep-head .ai-sparkle { width: 18px; height: 18px; }
#view .review-prep .review-prep-head .status-label { flex: none; }
#view .review-prep .home-widget-body { padding: var(--space-16) var(--space-20); }
#view .review-prep .prep-when { margin: 0 0 var(--space-8); padding: 0; border: 0; background: none; font: var(--font-text1-normal); color: var(--primary-text-color); }
#view .review-prep .prep-when b { font-weight: 500; }
#view .review-prep .prep-intro { margin: 0 0 var(--space-16); max-width: none; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .review-prep .prep-intro b { font-weight: 600; color: var(--primary-text-color); }
#view .review-prep .prep-headline { margin: 0 0 var(--space-12); font: var(--font-text1-medium); color: var(--primary-text-color); }
#view .review-prep .prep-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-12); }
#view .review-prep .prep-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-12); border: 1px solid var(--layout-border-color);
  border-radius: 14px; background: var(--primary-background-color); font: var(--font-text2-normal); color: var(--primary-text-color); text-decoration: none; }
#view .review-prep .prep-chip strong { font: var(--font-text2-bold); color: var(--negative-color); }
#view .review-prep .prep-chip:hover { background: var(--ai-surface-color); border-color: var(--ai-selected-color); }
#view .review-prep .prep-warn { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-12); font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .review-prep .prep-warn svg.icon { color: var(--warning-color-hover); flex: none; }
#view .review-prep .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; }
#view .review-prep .prep-meta { display: block; margin: var(--space-8) 0 0; font: var(--font-text3-normal); color: var(--secondary-text-color); }
#view .review-prep .prep-meta .text-button { font: var(--font-text3-normal); color: var(--link-color); }
#view .button.ai-button { background: var(--ai-button-gradient); border-color: transparent; color: #fff; }
#view .button.ai-button:hover:not(:disabled) { background: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)), var(--ai-button-gradient); border-color: transparent; }
#view .button.ai-button .ai-sparkle { width: 16px; height: 16px; color: #fff; }
#view .review-prep .prep-progress { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); margin: 0 0 var(--space-8); }
#view .review-prep .prep-progress p { margin: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .review-prep .ai-progress { position: relative; height: 8px; background: var(--ai-selected-color); }
#view .review-prep .ai-progress .prep-bar { position: absolute; inset: 0; display: block; width: auto; height: 100%; background: none; border-radius: inherit; overflow: hidden; }
#view .review-prep .ai-progress .prep-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: var(--ai-color);
  animation: prep-slide 1.4s ease-in-out infinite; }
@keyframes prep-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
#view .review-prep .prep-skeleton { height: 56px; border-radius: var(--border-radius-small); }
#view .review-prep-collapsed { display: flex; align-items: center; gap: var(--space-8); margin: 0; padding: 0 var(--space-8) 0 var(--space-16); height: 48px;
  border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .review-prep-collapsed > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .review-prep-collapsed b { font-weight: 500; }

@media (max-width: 760px) {
  body[data-page="today"] #view { padding: var(--space-16) var(--space-16) 64px; }
  #view .home-head { flex-direction: column; gap: var(--space-12); }
  #view .home-head .greeting h1 { font-size: 22px; line-height: 32px; }
  #view .home-head .quick-actions { justify-content: flex-start; }
  #view .home-controls { flex-direction: column; align-items: stretch; }
  #view .home-controls .home-scope { align-self: flex-start; }
  #view .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-bottom: var(--space-24); }
  #view .kpi { height: 104px; padding: var(--space-12); }
  #view .kpi strong { font-size: 27px; line-height: 36px; }
  #view .home-widgets { grid-template-columns: minmax(0, 1fr); }
  #view .home-section-head .button { display: none; }
}

/* ---------- Deals Kanban: monday CRM Pipeline (§6.1, QA-4) ---------- */
#view .kanban.pipeline { display: flex; align-items: stretch; gap: 16px; min-height: 0; margin: 0 -30px 0 0; padding: 0 30px 24px 0; overflow-x: auto; overflow-y: visible;
  scrollbar-width: thin; }
#view .pipe-column { position: relative; display: flex; flex-direction: column; flex: 0 0 256px; width: 256px; min-height: calc(100vh - 260px); margin: 0; padding: 0;
  background: var(--allgrey-background-color); border: 0; border-radius: 0; box-shadow: none; }
#view .pipe-column .stage-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 264px; height: 40px;
  margin: 0 -8px 0 0; padding: 0 16px 0 18px; background: var(--stage); color: var(--stage-text, #fff);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); }
#view .pipe-column.first .stage-head { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); border-top-left-radius: 8px; padding-left: 16px; }
#view .pipe-column.last .stage-head { width: 256px; margin-right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); border-top-right-radius: 8px; }
#view .pipe-column.first.last .stage-head { clip-path: none; border-radius: var(--border-radius-medium) 8px 0 0; }
#view .pipe-column .stage-name { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/21px var(--font-family); color: var(--stage-text, #fff); letter-spacing: 0; }
#view .pipe-column .stage-count { flex: none; font: 400 15px/21px var(--font-family); color: var(--stage-text, #fff); opacity: .9; }
#view .pipe-column .stage-fold { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 0 auto; padding: 0; border: 0;
  border-radius: var(--border-radius-small); background: transparent; color: var(--stage-text, #fff); opacity: 0; cursor: pointer; transition: opacity var(--motion-productive-medium); }
#view .pipe-column .stage-head:hover .stage-fold, #view .pipe-column .stage-fold:focus-visible { opacity: 1; }
#view .pipe-column .stage-fold:hover { background: rgba(255, 255, 255, .2); }
#view .pipe-column .stage-sum { display: flex; align-items: center; height: 40px; box-sizing: border-box; padding: 4px 12px; background: var(--primary-background-color);
  border: 1px solid var(--application-border-color); border-top: 0; }
#view .pipe-column .sum-block { display: inline-flex; flex-direction: column; align-items: center; }
#view .pipe-column .sum-value { font: 400 15px/19px var(--font-family); color: var(--primary-text-color); white-space: nowrap; }
#view .pipe-column .sum-label { font: 400 11.5px/13px var(--font-family); color: var(--secondary-text-color); text-transform: none; letter-spacing: 0; }
#view .pipe-column .stage-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px; border-radius: 0 0 4px 4px; }
#view .pipe-column.drag-over { background: var(--allgrey-background-color); border: 0; }
#view .pipe-column.drag-over .stage-body { background: color-mix(in srgb, var(--stage-selected) 40%, transparent); outline: 2px dashed var(--stage); outline-offset: -2px; border-radius: var(--border-radius-small); }
#view .pipe-column .pipe-new { justify-content: flex-start; width: 100%; height: 32px; margin: 0; padding: 0 8px; color: var(--secondary-text-color); font: var(--font-text2-normal); }
/* An empty column shows nothing but its header and sum (spec §6.1); its add button appears on hover or focus. */
#view .pipe-column.empty .pipe-new { opacity: 0; transition: opacity var(--motion-productive-medium); }
#view .pipe-column.empty:hover .pipe-new, #view .pipe-column.empty .pipe-new:focus-visible, #view .pipe-column.empty.drag-over .pipe-new { opacity: 1; }
#view .pipe-column .pipe-new svg.icon { width: 16px; height: 16px; color: var(--secondary-text-color); }
/* Collapsed Won / Lost / Paused: a 48px strip with the header turned on its side */
#view .pipe-column.collapsed { flex: 0 0 48px; width: 48px; }
#view .pipe-column.collapsed .stage-head { flex-direction: column; justify-content: flex-start; width: 48px; height: auto; min-height: 200px; margin: 0; padding: 12px 0;
  clip-path: none; border-radius: var(--border-radius-medium) 8px 0 0; }
#view .pipe-column.collapsed .stage-name, #view .pipe-column.collapsed .stage-count { writing-mode: vertical-rl; transform: rotate(180deg); }
#view .pipe-column.collapsed .stage-fold { order: -1; margin: 0 0 8px; opacity: 1; }
/* Rotated text reads bottom-to-top, so the count sits above the name: "Lost / 0". */
#view .pipe-column.collapsed .stage-count { order: 1; }
#view .pipe-column.collapsed .stage-name { order: 2; }

/* Cards (Decision I shadow) */
#view .pipe-card { position: relative; display: block; margin: 0; padding: 0 8px 8px 12px; background: var(--primary-background-color); border: 0; border-radius: var(--border-radius-small);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12); cursor: grab; transition: box-shadow var(--motion-productive-medium) var(--motion-timing-transition); }
#view .pipe-card:hover { box-shadow: var(--box-shadow-medium); }
#view .pipe-card.dragging { transform: rotate(2deg); box-shadow: var(--box-shadow-medium); opacity: .95; }
#view .pipe-card-head { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 4px 0; box-sizing: border-box; }
/* Two-line clamp with no padding on the clamped box, so no sliver of a third line shows (QA review). */
#view .pipe-card-title { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; text-align: left; font: var(--font-text2-normal); line-height: 20px; max-height: 40px; color: var(--primary-text-color);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
#view .pipe-card-title:hover { color: var(--link-color); }
#view .pipe-card .icon-button.xs, #view .pipe-card .row-menu-button { flex: none; width: 24px; height: 24px; color: var(--secondary-text-color); border-radius: var(--border-radius-small); }
#view .pipe-card .row-menu-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; opacity: 1; cursor: pointer; }
#view .pipe-card .row-menu-button:hover, #view .pipe-card .icon-button.xs:hover { background: var(--primary-background-hover-color); }
#view .pipe-card .pipe-update { position: relative; }
#view .pipe-card .updates-badge { position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px;
  background: var(--icon-color); color: #fff; font: 600 9px/14px var(--font-family); box-shadow: 0 0 0 2px #fff; }
#view .pipe-fields { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; }
#view .pipe-field { display: contents; }
#view .pipe-label { display: flex; align-items: center; gap: 4px; min-width: 0; height: 32px; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .pipe-label svg.icon { flex: none; width: 16px; height: 16px; color: var(--icon-color); }
#view .pipe-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .pipe-value { display: flex; align-items: center; justify-content: center; min-width: 0; height: 32px; padding: 0 6px; box-sizing: border-box;
  background: var(--pulse-background-color); font: var(--font-text2-normal); color: var(--primary-text-color); overflow: hidden; }
#view .pipe-field.text .pipe-value { justify-content: flex-start; padding: 0 8px; }
#view .pipe-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .pipe-value .chip { max-width: 100%; }
#view .pipe-value .placeholder { color: var(--secondary-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .pipe-value .date-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .pipe-value .pipe-add { padding: 0; border: 0; background: none; color: var(--secondary-text-color); font: var(--font-text2-normal); cursor: pointer; }
#view .pipe-value .pipe-add:hover { color: var(--primary-color); }
#view .pipe-value .people-view { display: inline-flex; align-items: center; }
#view .pipe-value .date-view { display: inline-flex; align-items: center; gap: 6px; }
#view .pipe-value .date-view .deadline { display: inline-flex; flex: none; }
#view .pipe-value .date-view.done .date-text { text-decoration: line-through; }
/* Empty dates on cards stay blank; the calendar only hints on hover (QA review). */
#view .pipe-value .date-view .date-add { width: 16px; height: 16px; color: var(--ui-border-color); opacity: 0; transition: opacity var(--motion-productive-medium); }
#view .pipe-card:hover .pipe-value .date-view.no-date .date-add { opacity: 1; }

/* Toolbar mini battery (§6.1): 138 × 24px, hard stops, square ends */
#view .pipeline-battery { display: flex; width: 138px; height: 24px; overflow: visible; }
#view .pipeline-battery .battery-seg { display: block; min-width: 4px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; }
#view .pipeline-battery .battery-seg:hover { filter: brightness(.92); }
#view .pipeline-battery .battery-seg:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }

@media (max-width: 760px) {
  #view .kanban.pipeline { margin-right: -16px; padding-right: 16px; scroll-snap-type: x proximity; }
  #view .pipe-column { flex-basis: 256px; min-height: 0; scroll-snap-align: start; }
  #view .pipeline-battery { display: none; }
}

/* ---------- Calendar view (§6.6) ---------- */
#view .calendar { margin: 0 0 var(--space-24); padding: 0; border: 0; border-radius: 0; overflow: visible; background: none; }
#view .calendar-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-8); height: 48px; margin: 0; padding: 0; border: 0; }
#view .calendar-toolbar .calendar-nav { display: inline-flex; gap: 2px; }
/* Desktop: the calendar controls join the board toolbar row after a 1px × 24px divider (monday Calendar view). */
#view .board-toolbar .toolbar-divider { flex: none; width: 1px; height: 24px; margin: 0 var(--space-8); background: var(--layout-border-color); }
#view .board-toolbar .calendar-toolbar { display: inline-flex; flex: none; height: auto; gap: var(--space-8); }
#view .board-toolbar .calendar-toolbar h2 { font: var(--font-h3-normal); white-space: nowrap; }
#view .calendar-toolbar h2 { margin: 0 0 0 var(--space-4); font: var(--font-h3-normal); color: var(--primary-text-color); }
#view .calendar-scroll { overflow-x: auto; border-top: 1px solid var(--layout-border-color); }
#view .calendar-weekdays, #view .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 700px; }
#view .calendar-weekdays { background: none; border-left: 1px solid var(--layout-border-color); }
#view .calendar-weekdays span { display: flex; align-items: center; justify-content: center; height: 28px; padding: 0; border-right: 1px solid var(--layout-border-color);
  border-bottom: 1px solid var(--layout-border-color); font: var(--font-text3-normal); color: var(--secondary-text-color); }
#view .calendar-grid { border-left: 1px solid var(--layout-border-color); }
#view .calendar-day { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 110px; padding: 4px 0; box-sizing: border-box; background: var(--primary-background-color);
  border: 0; border-right: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color); color: var(--primary-text-color); }
#view .calendar-day:nth-child(7n) { border-right: 1px solid var(--layout-border-color); }
#view .calendar-day:hover { background: var(--grey-background-color); }
#view .calendar-day.other-month { background: var(--primary-background-color); }
#view .calendar-day.other-month .calendar-num { color: var(--disabled-text-color); }
#view .calendar-day.is-today { background: var(--primary-background-color); }
#view .calendar-date { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 24px; margin: 0 0 2px; padding: 0 6px 0 4px; font: var(--font-text2-normal); }
#view .calendar-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-left: auto; border-radius: 50%;
  font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .calendar-day.is-today .calendar-num { background: var(--primary-selected-color); color: var(--primary-color); font-weight: 600; }
#view .calendar-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0;
  border-radius: var(--border-radius-small); background: transparent; color: var(--icon-color); opacity: 0; cursor: pointer; transition: opacity var(--motion-productive-short); }
#view .calendar-day:hover .calendar-add, #view .calendar-add:focus-visible { opacity: 1; }
#view .calendar-add:hover { background: var(--primary-background-hover-color); }
#view .calendar-event { display: block; width: auto; height: 22px; margin: 2px 4px; padding: 0 6px; box-sizing: border-box; overflow: hidden; border: 0;
  border-left: 3px solid var(--event); border-radius: var(--border-radius-small); background: var(--event-selected); color: var(--primary-text-color); text-align: left;
  font: 400 12px/20px var(--font-family); white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
#view .calendar-event:hover { filter: brightness(.97); }
#view .calendar-event strong { display: inline; font: inherit; line-height: inherit; }
#view .calendar-event:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#view .calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-24); padding: var(--space-16) 0 0; }
#view .legend-item { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .legend-dot { width: 12px; height: 12px; border-radius: 50%; }
#view .calendar-undated { margin-top: var(--space-8); }
#view .calendar-mode { position: relative; margin-left: var(--space-16); }
#view .calendar-mode .button { gap: var(--space-4); }
#view .calendar-mode .button svg.icon { width: 16px; height: 16px; }
#view .calendar-mode .popover { top: calc(100% + 4px); left: 0; min-width: 160px; }
#view .calendar-mode .menu-item small { margin-left: auto; color: var(--secondary-text-color); font: var(--font-text3-normal); }
@media (max-width: 760px) {
  #view .calendar-scroll { margin: 0; padding: 0; overflow-x: hidden; }
  #view .calendar-weekdays, #view .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
  #view .calendar-weekdays span { font-size: 11px; }
  #view .calendar-day { min-height: 64px; padding: 2px; }
  #view .calendar-date { height: 20px; padding: 0 2px; }
  #view .calendar-add { width: 16px; height: 16px; }
  #view .calendar-add svg.icon { width: 12px; height: 12px; }
  #view .calendar-num { min-width: 20px; height: 20px; font-size: 11.5px; }
  #view .calendar-event { height: 16px; margin: 1px 0; padding: 0 3px; border-left-width: 2px; font-size: 11px; line-height: 16px; }
  #view .calendar-toolbar { flex-wrap: wrap; height: auto; min-height: 48px; }
  #view .calendar-mode { margin-left: auto; }
}

/* ---------- Workspace home (§8.9) ---------- */
body[data-page="workspace"] .board-header { display: none; }
body[data-page="workspace"] #view { padding: 0 30px 80px 42px; }
#view .ws-header { position: relative; margin: 0 -30px 0 -42px; }
#view .ws-banner { height: 120px; background-color: var(--primary-highlighted-color);
  background-image: radial-gradient(circle at 1px 1px, var(--primary-selected-color) 1.5px, transparent 0), linear-gradient(120deg, transparent 55%, rgba(0, 115, 234, .06) 55%);
  background-size: 18px 18px, 100% 100%; }
#view .ws-identity { display: flex; align-items: flex-start; gap: var(--space-16); margin: -36px 0 0; padding: 0 30px 0 42px; }
#view .ws-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 72px; height: 72px; border-radius: var(--border-radius-medium); background: var(--color-dark-blue);
  color: #fff; font: 600 28px/1 var(--title-font-family); box-shadow: 0 0 0 4px var(--primary-background-color); }
#view .ws-titles { min-width: 0; padding-top: 42px; }
#view .ws-name { margin: 0; font: 500 29px/36px var(--title-font-family); letter-spacing: var(--letter-spacing-h1); color: var(--primary-text-color); }
#view .ws-desc { margin: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .ws-tabs { margin: var(--space-24) 0 0; }
#view .ws-tabs > a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-text-color); font: var(--font-text2-normal); text-decoration: none; white-space: nowrap; }
#view .ws-tabs > a:hover { background: var(--primary-background-hover-color); text-decoration: none; }
#view .ws-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: var(--ui-background-color); font: var(--font-text3-normal); color: var(--primary-text-color); }
#view .ws-body { padding-top: var(--space-24); }
#view .ws-section { max-width: 1100px; }
#view .ws-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); margin: 0 0 var(--space-16); }
#view .ws-section-title { margin: 0; font: var(--font-h3-medium); font-size: 17px; line-height: 24px; color: var(--primary-text-color); }
#view .ws-section-desc { margin: var(--space-4) 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .ws-section > .ws-section-title { margin-bottom: var(--space-12); }

/* Vibe Table: radius 4px, 1px #d0d4e4 border, 40px header, 48px rows */
#view .vibe-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; margin: 0; border: 1px solid var(--layout-border-color);
  border-radius: var(--border-radius-small); overflow: hidden; background: var(--primary-background-color); font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .vibe-table th { height: 40px; padding: 8px 16px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--layout-border-color); background: var(--primary-background-color);
  font: 600 13px/19px var(--font-family); color: var(--secondary-text-color); text-align: left; white-space: nowrap; text-transform: none; letter-spacing: 0; }
#view .vibe-table td { height: 48px; padding: 0 16px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--layout-border-color); vertical-align: middle; background: none; }
#view .vibe-table tbody tr:last-child td { border-bottom: 0; }
#view .vibe-table tbody tr:hover td { background: var(--primary-background-hover-color); }
#view .vibe-table small { font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .vibe-table .ws-actions { text-align: right; white-space: nowrap; }
#view .vibe-table .ws-actions > * { vertical-align: middle; }

/* Labels table */
#view .label-new { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-16); padding: 0; border: 0; background: none; }
#view .label-new .ws-new-name input { width: 280px; 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); color: var(--primary-text-color); background: var(--primary-background-color); outline: none; }
#view .label-new .ws-new-name input:hover { border-color: var(--primary-text-color); }
#view .label-new .ws-new-name input:focus { border-color: var(--primary-color); }
#view .label-new .ws-new-color { height: 32px; padding: 0 var(--space-8); border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); }
#view .label-row { display: table-row; padding: 0; border: 0; }
#view .ws-label-chip { width: 1%; white-space: nowrap; }
#view .ws-label-chip .label-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--border-radius-small); background: var(--c-selected);
  color: var(--primary-text-color); font: var(--font-text2-normal); border: 0; }
#view .ws-label-chip .label-chip::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); }
#view .ws-label-chip .label-chip.blue { --c: var(--label-blue); --c-selected: var(--label-blue-selected); }
#view .ws-label-chip .label-chip.green { --c: var(--label-green); --c-selected: var(--label-green-selected); }
#view .ws-label-chip .label-chip.amber { --c: var(--label-amber); --c-selected: var(--label-amber-selected); }
#view .ws-label-chip .label-chip.red { --c: var(--label-red); --c-selected: var(--label-red-selected); }
#view .ws-label-chip .label-chip.lilac { --c: var(--label-lilac); --c-selected: var(--label-lilac-selected); }
#view .ws-label-chip .label-chip.teal { --c: var(--label-teal); --c-selected: var(--label-teal-selected); }
#view .ws-label-chip .label-chip.pink { --c: var(--label-pink); --c-selected: var(--label-pink-selected); }
#view .ws-label-chip .label-chip.gray { --c: var(--label-gray); --c-selected: var(--label-gray-selected); }
#view .ws-cell-input { width: 100%; min-width: 140px; max-width: 260px; height: 32px; margin: 0; padding: 0 var(--space-8); box-sizing: border-box; border: 1px solid transparent;
  border-radius: var(--border-radius-small); background: transparent; font: var(--font-text2-normal); color: var(--primary-text-color); outline: none; }
#view .ws-cell-input:hover { border-color: var(--ui-border-color); background: var(--primary-background-color); }
#view .ws-cell-input:focus { border-color: var(--primary-color); background: var(--primary-background-color); }
#view .ws-color, #view .ws-merge { position: relative; display: inline-flex; align-items: center; gap: var(--space-8); height: 32px; padding: 0 var(--space-4);
  border-radius: var(--border-radius-small); font: var(--font-text2-normal); color: var(--primary-text-color); cursor: pointer; }
#view .ws-color:hover, #view .ws-merge:hover { background: var(--primary-background-hover-color); }
#view .ws-color svg.icon, #view .ws-merge svg.icon { width: 16px; height: 16px; color: var(--icon-color); }
#view .ws-swatch { display: inline-block; flex: none; width: 24px; height: 24px; border-radius: var(--border-radius-small); }
#view .ws-color-name { text-transform: capitalize; min-width: 48px; white-space: nowrap; }
#view .ws-color select, #view .ws-merge select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 13px; }
#view .ws-color:focus-within, #view .ws-merge:focus-within { box-shadow: var(--focus-ring); }
#view .ws-merge { margin-right: var(--space-4); padding: 0 var(--space-8); }
#view .ws-usage { color: var(--secondary-text-color); white-space: nowrap; }

/* Deleted items, team, activity */
#view .ws-deleted-name b { font-weight: 500; }
#view .ws-deleted .chip.crm.plain { text-transform: capitalize; }
#view .deleted-row { display: table-row; padding: 0; border: 0; }
#view .ws-person { display: inline-flex; align-items: center; gap: var(--space-12); }
#view .ws-person small { color: var(--secondary-text-color); }
#view .ws-audit .audit-row { display: table-row; padding: 0; border: 0; }
#view .ws-audit strong { font-weight: 500; }

/* Data tab: settings rows */
#view .ws-status { display: flex; align-items: flex-start; gap: var(--space-12); margin: 0 0 var(--space-24); padding: var(--space-16); border-radius: var(--border-radius-medium);
  background: var(--allgrey-background-color); }
#view .ws-status .status-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--warning-color); }
#view .ws-status.shared .status-dot { background: var(--positive-color); }
#view .ws-status h3 { margin: 0; font: var(--font-text1-medium); color: var(--primary-text-color); }
#view .ws-status p { margin: var(--space-4) 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .ws-settings { border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); }
#view .ws-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 72px; padding: var(--space-12) var(--space-16); box-sizing: border-box;
  border-bottom: 1px solid var(--layout-border-color); }
#view .ws-setting:last-child { border-bottom: 0; }
#view .ws-setting h3 { margin: 0; font: var(--font-text1-medium); color: var(--primary-text-color); }
#view .ws-setting p { margin: 2px 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .ws-setting-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); flex: none; }
#view .ws-setting-actions:empty { display: none; }

@media (max-width: 760px) {
  body[data-page="workspace"] #view { padding: 0 var(--space-16) 64px; }
  #view .ws-header { margin: 0 -16px; }
  #view .ws-banner { height: 88px; }
  #view .ws-identity { padding: 0 var(--space-16); gap: var(--space-12); margin-top: -28px; }
  #view .ws-avatar { width: 56px; height: 56px; font-size: 20px; }
  #view .ws-titles { padding-top: 32px; }
  #view .ws-name { font-size: 22px; line-height: 32px; }
  #view .ws-tabs { overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 var(--space-8); }
  #view .ws-tabs::-webkit-scrollbar { display: none; }
  #view .ws-section { overflow-x: auto; }
  #view .ws-section { min-width: 0; max-width: 100%; }
  #view .vibe-table { position: relative; display: block; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  #view .vibe-table th, #view .vibe-table td { min-width: 120px; }
  #view .vibe-table th:empty, #view .vibe-table td.ws-actions { min-width: 0; }
  #view .label-new .ws-new-name, #view .label-new .ws-new-name input { width: 100%; }
  #view .ws-setting { flex-direction: column; align-items: flex-start; }
  #view .ws-setting-actions { justify-content: flex-start; }
}

/* ---------- Updates (activity) board ---------- */
#view .board-table .status-cell { display: flex; align-items: center; justify-content: center; height: 36px; margin: 0 -1px; padding: 0 8px; background: var(--status); color: var(--status-text, #fff);
  font: var(--font-text2-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .board-table .activity-source a { color: var(--link-color); font: var(--font-text2-normal); }

/* ---------- Reviews: widget cards ---------- */
#view .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-16); margin: var(--space-16) 0 0; }
#view .review-card { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: var(--space-16) var(--space-20); background: var(--primary-background-color);
  border: 1px solid var(--application-border-color); border-radius: var(--border-radius-medium); box-shadow: none; }
#view .review-card.past { background: var(--allgrey-background-color); }
#view .review-card-head { display: flex; align-items: center; gap: var(--space-12); }
#view .review-card-head .date-block { width: 44px; height: 44px; background: var(--primary-selected-color); color: var(--primary-color); }
#view .review-card-head .date-block b { font-size: 17px; line-height: 20px; }
#view .review-card.past .review-card-head .date-block { background: var(--ui-background-color); color: var(--secondary-text-color); }
#view .review-card h2 { margin: 0 0 2px; font: var(--font-h3-medium); font-size: 17px; line-height: 24px; color: var(--primary-text-color); }
#view .review-agenda { margin: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .review-facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px var(--space-8); margin: 0; font: var(--font-text2-normal); }
#view .review-facts dt { color: var(--secondary-text-color); }
#view .review-facts dd { margin: 0; color: var(--primary-text-color); min-width: 0; }
#view .review-facts .person { display: inline-flex; align-items: center; gap: 6px; }
#view .review-card footer { margin-top: auto; }
#view .review-card footer .button { margin-left: -8px; }

/* ---------- Standard Kanban (§6.2: Demos): rectangular headers, no sum row, "+" on header hover ---------- */
#view .kanban.standard .pipe-column .stage-head, #view .kanban.standard .pipe-column.first .stage-head, #view .kanban.standard .pipe-column.last .stage-head {
  width: 256px; margin: 0; padding: 0 8px 0 16px; clip-path: none; border-radius: var(--border-radius-medium) 8px 0 0; }
#view .kanban.standard .stage-body { padding-top: 12px; }
#view .stage-add { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin: 0 0 0 auto; padding: 0; border: 0;
  border-radius: var(--border-radius-small); background: #fff; color: var(--primary-text-color); opacity: 0; cursor: pointer; transition: opacity var(--motion-productive-medium); }
#view .stage-head:hover .stage-add, #view .stage-add:focus-visible { opacity: 1; }
#view .stage-add svg.icon { width: 16px; height: 16px; }
#view .demo-card .pipe-value .date-view { font: var(--font-text2-normal); white-space: nowrap; overflow: hidden; }
#view .vibe-table td, #view .vibe-table td b, #view .vibe-table td strong, #view .vibe-table td span:not(.avatar):not(.chip-label) { font-size: 13px; line-height: 20px; }
#view .vibe-table td small { font-size: 13px; line-height: 20px; color: var(--secondary-text-color); }
#view .ws-person > span:last-child { white-space: nowrap; }

/* ---------- Sign-in screen (Google sign-in, shown before the workspace loads) ---------- */
.signin { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: var(--space-16); background: var(--surface-color); }
.signin-card { width: min(400px, 100%); padding: var(--space-40) var(--space-32) var(--space-32); text-align: center; background: var(--primary-background-color);
  border: 1px solid var(--application-border-color); border-radius: var(--border-radius-big); box-shadow: var(--box-shadow-small); }
.signin-card img { width: 160px; height: auto; }
.signin-card h1 { margin: var(--space-24) 0 var(--space-8); font: var(--font-h2-normal); letter-spacing: var(--letter-spacing-h2); color: var(--primary-text-color); }
.signin-card p { margin: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
.signin-card p strong { color: var(--primary-text-color); font-weight: 600; }
#signin-button { display: flex; justify-content: center; min-height: 44px; margin: var(--space-24) 0 var(--space-8); }
.signin .form-error { margin: var(--space-8) 0 0; font: var(--font-text2-normal); }
.signin .form-error:empty { display: none; }
/* Can't reach the CRM: the same card as sign-in, with the next automatic try and Retry. */
.unreachable .unreachable-status { margin: var(--space-16) 0; color: var(--primary-text-color); }
.unreachable .unreachable-help { margin-top: var(--space-16); }

/* ---------- Workspace review round 1 (spec §8.9) ---------- */
#view .ws-label-tools { display: flex; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-16); }
#view .ws-new-wrap { position: relative; display: inline-flex; }
#view .label-new-pop { top: calc(100% + 8px); left: 0; width: 320px; padding: var(--space-16); box-sizing: border-box; }
#view .label-new-pop .label-new { flex-direction: column; align-items: stretch; margin: 0; }
#view .label-new-pop h3 { margin: 0 0 var(--space-4); font: var(--font-text1-medium); color: var(--primary-text-color); }
#view .label-new-pop .ws-new-name input { width: 100%; }
#view .label-new-pop .ws-new-color { align-self: flex-start; }
#view .label-new-pop .button-row { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-8); }
#view .ws-label-search { width: 240px; height: 32px; box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); }
#view .ws-label-search input::-webkit-search-cancel-button { cursor: pointer; }
#view .ws-chip-button { display: inline-flex; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
#view .ws-chip-button:hover .label-chip { box-shadow: inset 0 0 0 1px var(--ui-border-color); }
#view .ws-updated { color: var(--secondary-text-color); white-space: nowrap; }
#view .ws-labels .ws-actions { width: 1%; }
#view .ws-labels .row-menu-button { margin-left: var(--space-4); opacity: 0; }
#view .ws-labels tr:hover .row-menu-button, #view .ws-labels .row-menu-button:focus-visible, #view .ws-labels .row-menu-button[aria-expanded="true"] { opacity: 1; }
#view .ws-member { display: inline-flex; align-items: baseline; white-space: nowrap; }
#view .ws-member-name { white-space: nowrap; }
#view .ws-you { margin-left: 4px; color: var(--secondary-text-color); }
@media (max-width: 760px) {
  #view .ws-tabs { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  #view .ws-label-tools { flex-wrap: wrap; }
  #view .ws-label-search { flex: 1; width: auto; }
  #view .label-new-pop { position: fixed; left: var(--space-8); right: var(--space-8); top: auto; bottom: calc(var(--tabbar-height, 56px) + var(--space-8)); width: auto; }
  #view .ws-labels .row-menu-button { opacity: .7; }
}

/* ---------- Account portfolio (#portfolio): the manager and quarter row, tiles per currency, the By manager and Accounts tables ---------- */
/* The row reuses the board toolbar and Home's "Showing" picker; it wraps instead of scrolling, so the picker menu is never clipped. */
#view .portfolio-toolbar .toolbar-main { gap: var(--space-8) var(--space-12); }
#view .portfolio-person { flex: none; }
#view .portfolio-quarter { display: inline-flex; align-items: center; gap: var(--space-4); flex: none; }
#view .portfolio-quarter-pick select { height: 32px; padding: 0 var(--space-8); box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small);
  background: var(--primary-background-color); font: var(--font-text2-normal); color: var(--primary-text-color); cursor: pointer; }
#view .portfolio-quarter-pick select:hover { border-color: var(--primary-text-color); }
#view .portfolio-quarter-pick select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#view .portfolio-toolbar .toolbar-end .button svg.icon { width: 16px; height: 16px; }
/* Tiles: Home's Numbers widgets, taller so the target, gap and import lines fit; one row of four per currency. */
#view .portfolio-kpis { display: flex; flex-direction: column; gap: var(--space-16); margin: 0 0 var(--space-32); }
#view .portfolio-kpi-block { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
#view .portfolio-kpis .kpi { height: auto; min-height: 136px; justify-content: flex-start; gap: var(--space-4); cursor: default; }
#view .portfolio-kpis .kpi:hover { border-color: var(--application-border-color); }
#view .portfolio-kpis .kpi strong { margin: var(--space-4) 0; font-size: 25px; line-height: 36px; }
#view .portfolio-kpis .kpi small { white-space: normal; }
#view .portfolio-kpis .portfolio-set-target { align-self: flex-start; margin-top: var(--space-4); gap: var(--space-4); }
#view .portfolio-kpis .portfolio-set-target svg.icon { width: 16px; height: 16px; }
/* How much of the quarter is imported, and gaps: the existing positive and negative colors, never new ones. */
#view .portfolio-status { display: inline-flex; align-items: center; gap: 6px; font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; }
#view .portfolio-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-border-color); }
#view .portfolio-status[data-actuals-status="partial"]::before { background: var(--warning-color); }
#view .portfolio-status[data-actuals-status="imported"]::before { background: var(--positive-color); }
#view .portfolio-gap.is-ahead { color: var(--positive-color); }
#view .portfolio-gap.is-behind { color: var(--negative-color); }
#view .unknown-value, #view .portfolio-table .placeholder { color: var(--secondary-text-color); }
#view .portfolio-section { margin: 0 0 var(--space-32); }
#view .portfolio-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
#view .portfolio-scroll > .vibe-table { width: max-content; min-width: 100%; }
#view .portfolio-section-title { margin: 0 0 var(--space-12); font: var(--font-h3-medium); font-size: 17px; line-height: 24px; color: var(--primary-text-color); }
#view .portfolio-table td { max-width: none; white-space: nowrap; }
#view .portfolio-table td, #view .portfolio-table th { padding: 8px 12px; }
#view .portfolio-table .portfolio-line { display: block; line-height: 20px; }
#view .portfolio-table .portfolio-note { display: block; font: var(--font-text3-normal); color: var(--secondary-text-color); }
#view .portfolio-table .person { display: inline-flex; align-items: center; gap: var(--space-8); }
#view .portfolio-managers tbody tr { cursor: pointer; }
#view .portfolio-person-link { display: inline-flex; align-items: center; gap: var(--space-8); }
#view .portfolio-table .num, #view .portfolio-kpis strong { font-variant-numeric: tabular-nums; }
#view .board-table .unknown-value { font: var(--font-text2-normal); }
#view .board-table .portfolio-gap { font: var(--font-text2-normal); }
/* The account card's Resources & margin and Profitability widgets. */
#detail .mini-table .unknown-value, #detail .mini-table .portfolio-status { color: var(--secondary-text-color); }
#detail .mini-table .portfolio-note { display: none; }
#detail .profit-widget .portfolio-label { display: block; margin: var(--space-12) var(--space-16) 0; font: var(--font-text3-normal); color: var(--secondary-text-color); }
#detail .profit-widget .widget-note { margin: var(--space-8) var(--space-16) var(--space-16); }
@media (max-width: 1100px) {
  #view .portfolio-kpi-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #view > .board-toolbar.portfolio-toolbar { flex-wrap: wrap; min-height: 0; padding: var(--space-8) 0; }
  #view > .board-toolbar.portfolio-toolbar .toolbar-main { flex-wrap: wrap; overflow: visible; min-height: 0; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  #view .portfolio-kpi-block { gap: var(--space-8); }
  #view .portfolio-kpis .kpi { min-height: 0; padding: var(--space-12); }
  #view .portfolio-kpis .kpi strong { font-size: 20px; line-height: 28px; }
}
/* Phones: each table row becomes a card, a label beside each value, so nothing scrolls sideways. */
@media (max-width: 600px) {
  #view .portfolio-table, #view .portfolio-table tbody, #view .portfolio-table tr, #view .portfolio-table td { display: block; width: auto; min-width: 0; }
  #view .portfolio-scroll { overflow: visible; }
  #view .portfolio-scroll > .portfolio-table, #view .portfolio-table { width: auto; min-width: 0; overflow: visible; border: 0; background: none; }
  #view .portfolio-table thead { display: none; }
  #view .portfolio-table tr { display: flex; flex-direction: column; margin: 0 0 var(--space-8); border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); }
  #view .portfolio-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); box-sizing: border-box; width: 100%; max-width: none; height: auto; min-height: 36px; padding: 8px 12px; white-space: normal; text-align: right; }
  #view .portfolio-table td::before { content: attr(data-label); flex: none; color: var(--secondary-text-color); text-align: left; }
  #view .portfolio-table td:first-child { justify-content: flex-start; text-align: left; font-weight: 500; }
  #view .portfolio-table td:first-child::before { content: none; }
  #view .portfolio-table tbody tr:last-child td { border-bottom: 1px solid var(--layout-border-color); }
  #view .portfolio-table tbody tr td:last-child { border-bottom: 0; }
}

/* My day (AI notes behind AI_DAY_USERS): up to five items for the person shown on Home, each opening its record, with an optional AI note. */
#view .home-day .day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#view .home-day .day-item + .day-item { border-top: 1px solid var(--layout-border-color); }
#view .home-day .day-item-main { display: flex; align-items: flex-start; gap: var(--space-8); width: 100%; padding: var(--space-8) 0; border: 0; background: none; text-align: left; color: var(--primary-text-color); cursor: pointer; font: inherit; }
#view .home-day .day-item-main:hover .day-item-title { text-decoration: underline; }
#view .home-day .day-item-main > .icon { flex: none; margin-top: 2px; color: var(--secondary-text-color); }
#view .home-day .day-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view .home-day .day-item-title { font: var(--font-text2-bold, var(--font-text2-normal)); overflow-wrap: anywhere; }
#view .home-day .day-item-text small { color: var(--secondary-text-color); }
#view .home-day .day-note { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: 2px; font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .home-day .day-note .ai-sparkle { flex: none; margin-top: 3px; }
#view .home-day .day-more { margin: var(--space-8) 0 0; color: var(--secondary-text-color); font: var(--font-text2-normal); }
#view .home-day .ai-note { display: block; margin-top: var(--space-8); color: var(--secondary-text-color); }
#view .home-day .day-loading { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--secondary-text-color); font: var(--font-text2-normal); }
#view .home-day .home-widget-body { padding: var(--space-8) var(--space-20) var(--space-16); }
#view .home-day .prep-warn { display: flex; align-items: center; gap: 6px; margin: var(--space-8) 0 0; font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .home-day .prep-warn svg.icon { color: var(--warning-color-hover); flex: none; }

/* Pipeline (Dashboards): tiles, alerts by reason, active deals by stage, and what is missing before a forecast. */
#view .pipeline-page { display: flex; flex-direction: column; gap: var(--space-24); padding-bottom: var(--space-32); }
#view .pipeline-head { display: flex; justify-content: flex-end; }
#view .pipeline-owner { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--font-text2-normal); color: var(--secondary-text-color); }
#view .pipeline-owner select { height: 32px; padding: 0 var(--space-8); border: 1px solid var(--ui-border-color, var(--layout-border-color)); border-radius: var(--border-radius-small); background: var(--primary-background-color, var(--surface-color)); color: var(--primary-text-color); font: var(--font-text2-normal); }
#view .pipeline-tiles { margin: 0; }
#view .pipeline-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-16); }
#view .pipeline-alert { border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); padding: var(--space-12) var(--space-16); background: var(--primary-background-color, var(--surface-color)); }
#view .pipeline-alert h3 { display: flex; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-8); font: var(--font-text1-bold); color: var(--primary-text-color); }
#view .pipeline-alert ul, #view .pipeline-gaps { list-style: none; margin: 0; padding: 0; }
#view .pipeline-alert li, #view .pipeline-gaps li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-8) 0; }
#view .pipeline-alert li + li, #view .pipeline-gaps li + li { border-top: 1px solid var(--layout-border-color); }
#view .pipeline-alert small, #view .pipeline-gaps small { color: var(--secondary-text-color); font: var(--font-text2-normal); }
#view .pipeline-gaps li { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); }
#view .pipeline-gap-deal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view .pipeline-gaps .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
#view .pipeline-note { margin: 0 0 var(--space-8); color: var(--secondary-text-color); font: var(--font-text2-normal); }
#view .pipeline-stages th[scope="row"] { font: var(--font-text2-normal); text-align: left; }

/* Home, today first (2026-10-14): My day and Coming up side by side at the top, a slim row of numbers, then the full-width list. */
/* What's new (app.js whatsNewCard): a full-width Home card above My day, one row per addition with its Show me button. */
#view .home-whats-new { margin: 0 0 var(--space-24); }
#view .home-whats-new .whats-new-icon { display: inline-flex; flex: none; color: var(--primary-color); }
#view .home-whats-new .home-widget-body { padding: 0 var(--space-20); }
#view .whats-new-list { list-style: none; margin: 0; padding: 0; }
#view .whats-new-item { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-12) 0; }
#view .whats-new-item + .whats-new-item { border-top: 1px solid var(--layout-border-color); }
#view .whats-new-text { flex: 1; min-width: 0; }
#view .whats-new-text h3 { margin: 0; font: var(--font-text1-bold); color: var(--primary-text-color); overflow-wrap: anywhere; }
#view .whats-new-text p { margin: 2px 0 0; font: var(--font-text2-normal); color: var(--secondary-text-color); overflow-wrap: anywhere; }
#view .whats-new-text p strong { font-weight: 600; color: var(--primary-text-color); }
#view .whats-new-item > .button { flex: none; }
@media (max-width: 760px) {
  #view .home-whats-new { margin-bottom: var(--space-12); }
  #view .home-whats-new .home-widget-body { padding: 0 var(--space-16); }
  /* Title and Show me on one line, the description under both, so the card stays short. */
  #view .whats-new-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-12); }
  #view .whats-new-text { display: contents; }
  #view .whats-new-text h3 { grid-column: 1; grid-row: 1; }
  #view .whats-new-item > .button { grid-column: 2; grid-row: 1; min-height: 40px; }
  #view .whats-new-text p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}
/* Your teams (app.js homeTeams): one compact line under the greeting, a link per Nexaminds team this person may see. */
#view .home-teams { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12); margin: 0 0 var(--space-16); padding: var(--space-8) var(--space-12);
  border: 1px solid var(--application-border-color); border-radius: var(--border-radius-medium); background: var(--primary-background-color); }
#view .home-teams-icon { display: inline-flex; flex: none; color: var(--primary-color); }
#view .home-teams-title { margin: 0; font: var(--font-text1-medium); color: var(--primary-text-color); white-space: nowrap; }
#view .home-teams-list { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); min-width: 0; margin: 0; padding: 0; list-style: none; }
#view .home-teams-list > li { min-width: 0; max-width: 100%; }
#view .home-team { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-8); max-width: 100%; min-height: 32px; box-sizing: border-box; padding: var(--space-4) var(--space-8);
  border-radius: var(--border-radius-small); color: var(--primary-text-color); text-decoration: none; font: var(--font-text2-normal); }
#view .home-team:hover { background: var(--primary-background-hover-color); }
#view .home-team:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#view .home-team-name { font: var(--font-text2-medium); overflow-wrap: anywhere; }
#view .home-team-counts { color: var(--secondary-text-color); }
#view .home-team-counts::before { content: '·'; margin-right: var(--space-8); }
#view .home-team.more { color: var(--link-color, var(--primary-color)); }
@media (max-width: 760px) { #view .home-teams { margin-bottom: var(--space-12); } #view .home-team { min-height: 40px; } }
#view .home-today { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; margin: 0 0 var(--space-24); }
#view .home-today > .home-widget { margin: 0; }
#view .home-today > .home-widget:only-child { grid-column: 1 / -1; }
@container home (max-width: 959px) { #view .home-today { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { #view .home-today { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } }
#view .kpi-row.slim { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-12); margin: 0 0 var(--space-24); }
#view .kpi-row.slim .kpi { height: auto; min-height: 0; justify-content: flex-start; gap: 2px; padding: var(--space-12) var(--space-16); }
#view .kpi-row.slim .kpi strong { font-size: 25px; line-height: 32px; }
@container home (max-width: 999px) { #view .kpi-row.slim { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container home (min-width: 1000px) and (max-width: 1179px) { #view .kpi-row.slim .kpi { padding: var(--space-12); } }
@media (max-width: 760px) { #view .kpi-row.slim { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } #view .kpi-row.slim .kpi { height: auto; } }
#view .home-upcoming .home-widget-body { padding: var(--space-8) 0; }
#view .home-upcoming .upcoming-review { padding: 6px var(--space-20) var(--space-12); border-bottom: 1px solid var(--layout-border-color); }
#view .home-upcoming .upcoming-review-head { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; }
#view .home-upcoming .upcoming-review-head .demo-row-title { display: inline-flex; align-items: center; gap: var(--space-8); }
#view .home-upcoming .upcoming-review-body { padding-left: 56px; }
#view .home-upcoming .upcoming-review-body .prep-intro, #view .home-upcoming .upcoming-review-body .prep-headline { margin: var(--space-4) 0 var(--space-8); font: var(--font-text2-normal); }
#view .home-upcoming .upcoming-review-body .button-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
#view .home-upcoming .upcoming-review-row { text-decoration: none; color: inherit; border-bottom: 1px solid var(--layout-border-color); }
@media (max-width: 760px) { #view .home-upcoming .upcoming-review-body { padding-left: 0; } }

/* Account portfolio: Gap to goal (target against the plan, open positions, deals expected to close). */
#view .portfolio-gap th[scope="row"] { font-weight: 600; text-align: left; }
#view .portfolio-subtitle { margin: var(--space-16) 0 var(--space-8); font: var(--font-text1-bold); color: var(--primary-text-color); }
#view .gap-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); }
#view .gap-items li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-12); }
#view .gap-items li + li { border-top: 1px solid var(--layout-border-color); }
#view .gap-items small { color: var(--secondary-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { #view .gap-items li { grid-template-columns: minmax(0, 1fr) auto; } #view .gap-items small { grid-column: 1 / -1; grid-row: 2; } }