/* App shell in the monday CRM 2026 layout (spec §2, QA-1, QA-2): 48px top bar and 72px icon rail on the
   #f6f7fb surface, a 280px white boards pane, and a white content panel with a 16px top-left corner.
   The document scrolls (so long boards print and capture in full); the bar, rail and pane stay put. */

.app-shell { display: grid; grid-template-columns: var(--rail-width) auto minmax(0, 1fr); grid-template-rows: var(--topbar-height) auto;
  min-height: 100vh; background: var(--surface-color); --panel-left: var(--rail-width); }
.app-shell.pane-open:not(.pane-overlay) { --panel-left: calc(var(--rail-width) + var(--leftpane-width)); }

/* ---------- Top bar (§2.3) ---------- */
.app-topbar { grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 60; height: var(--topbar-height); display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-8); padding: 0 var(--space-12) 0 var(--space-4); background: var(--surface-color); }
.product-button { display: inline-flex; align-items: center; height: 40px; padding: 0 10px 0 6px; border-radius: var(--border-radius-small);
  color: var(--primary-text-color); text-decoration: none; flex: none; }
.product-button:hover { background: var(--primary-background-hover-color); }
/* The Nexaminds logo of the sign-in page (nexaminds-logo.svg, the mark over the word) at the bar's height, then a small CRM label.
   Phones get the mark alone (favicon.svg, through <picture>): the word would be too small there. Both sizes are fixed in CSS,
   so nothing moves when the image loads. */
.product-logo { display: block; flex: none; }
.product-logo img { display: block; width: auto; height: 36px; aspect-ratio: 397.65 / 218.27; }
.product-label { margin-left: var(--space-8); padding-left: var(--space-8); border-left: 1px solid var(--ui-border-color); font: 600 13px/20px var(--title-font-family);
  letter-spacing: 0.6px; color: var(--primary-text-color); white-space: nowrap; }
.topbar-search { position: absolute; left: 50%; transform: translateX(-50%); width: 33%; max-width: 400px; }
.search-pill { display: flex; align-items: center; width: 100%; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 100px;
  background: var(--search-pill-background); color: var(--secondary-text-color); font: var(--font-text2-normal); cursor: text; text-align: left;
  transition: border-color var(--motion-productive-medium) var(--motion-timing-transition); }
.search-pill:hover { border-color: var(--ui-border-color); }
.search-pill.open, .search-pill:focus-within { border-color: var(--primary-color); background: var(--primary-background-color); }
.search-pill svg.icon { margin-left: var(--space-12); color: var(--icon-color); }
.topbar-search .search-pill-text { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 var(--space-8); border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--primary-text-color); font: var(--font-text2-normal); text-overflow: ellipsis; }
.topbar-search .search-pill-text::placeholder { color: var(--secondary-text-color); }
.search-pill:focus-within .keycaps { display: none; }
.keycaps { display: inline-flex; margin-right: var(--space-12); opacity: .6; }
.keycaps kbd { min-width: 16px; height: 16px; margin: 0 2px; padding: 0 3px; border-radius: var(--border-radius-small); background: var(--keycap-background);
  font: 600 10px/16px var(--font-family); color: var(--primary-text-color); text-align: center; box-sizing: border-box; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.topbar-actions .icon-button { color: var(--primary-text-color); }
.topbar-separator { width: 1px; height: 22px; margin: 0 var(--space-4); background: var(--separator-color); }
.account-menu, .rail-more, .board-title-wrap, .split-wrap { position: relative; }
.avatar-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; }
.avatar-button:hover { background: var(--primary-background-hover-color); }
.avatar-button[aria-expanded="true"] { background: var(--primary-selected-color); }
.avatar-button .avatar { --size: 32px; }
.account-popover { right: 0; top: calc(100% + 4px); width: 280px; }
.account-card { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8); }
.account-card[hidden] { display: none; }
.account-card .avatar { --size: 40px; }
.account-text { display: flex; flex-direction: column; min-width: 0; }
.account-text strong { font: var(--font-text2-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-text small { font: var(--font-text3-normal); color: var(--secondary-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-storage { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-8); color: var(--secondary-text-color); font: var(--font-text3-normal); }
.account-storage .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive-color); flex: none; }
.account-popover .menu-item, .rail-more-menu .menu-item { color: var(--primary-text-color); }

/* Global search popover */
.global-search { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: max(100%, 400px); max-width: calc(100vw - 32px); padding: var(--space-8); box-sizing: border-box; }
.global-search:has(> .global-search-results:empty) { display: none; }
.global-search-results { max-height: min(60vh, 480px); overflow-y: auto; }
.global-search-results:empty { display: none; }
.gs-group { margin: var(--space-8) 0 var(--space-4); padding: 0 var(--space-8); font: var(--font-text3-normal); color: var(--secondary-text-color); }
.gs-result { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 44px; padding: var(--space-4) var(--space-8); border: 0;
  border-radius: var(--border-radius-small); background: transparent; color: var(--primary-text-color); text-align: left; cursor: pointer; }
.gs-result:hover, .gs-result.active { background: var(--primary-background-hover-color); }
.gs-result.active { box-shadow: inset 0 0 0 1px var(--primary-color); }
.gs-result > svg.icon { width: 20px; height: 20px; color: var(--icon-color); }
.gs-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gs-title { font: var(--font-text2-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-title mark { background: var(--warning-color-selected); color: inherit; border-radius: 2px; }
.gs-sub { font: var(--font-text3-normal); color: var(--secondary-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-kind { flex: none; font: var(--font-text3-normal); color: var(--secondary-text-color); }
.gs-empty { padding: var(--space-16) var(--space-8); color: var(--secondary-text-color); text-align: center; }

/* ---------- Icon rail (§2.4, QA-1.1) ---------- */
.app-rail { grid-column: 1; grid-row: 2; position: sticky; top: var(--topbar-height); align-self: start; height: calc(100vh - var(--topbar-height));
  display: flex; flex-direction: column; align-items: center; padding-top: var(--space-8); background: var(--surface-color); z-index: 56; gap: 0; box-sizing: border-box; }
.rail-expand { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 4px 0 16px; padding: 0; border: 1px solid var(--ui-background-hover-color);
  border-radius: var(--border-radius-medium); background: transparent; color: var(--icon-color); cursor: pointer; }
.rail-expand svg.icon { transform: scaleX(-1); }
.rail-expand:hover { background: var(--primary-background-hover-color); }
.app-shell:not(.pane-open) .rail-expand { display: inline-flex; }
.rail-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 58px; max-width: 58px; padding: var(--space-8) 0; border: 0;
  background: transparent; color: var(--rail-label-color); text-decoration: none; cursor: pointer; font: inherit; }
.rail-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--border-radius-medium);
  color: var(--icon-color); transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); position: relative; }
.rail-tile svg.icon { transition: transform var(--motion-productive-medium) var(--motion-timing-transition); }
.rail-label { max-width: 58px; font: 400 11px/14px var(--font-family); letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item:hover, .rail-item:hover .rail-tile { color: var(--primary-text-color); }
.rail-item:hover .rail-tile { background: var(--primary-background-hover-color); }
.rail-item:hover .rail-tile svg.icon { transform: scale(1.1); }
.rail-item.selected, .rail-item.selected .rail-tile { color: var(--primary-text-color); }
.rail-item.selected .rail-tile { background: var(--crm-selected-color); }
.rail-item.selected:hover .rail-tile { box-shadow: inset 0 0 0 32px rgba(50, 51, 56, .08); }
.rail-item:focus-visible { box-shadow: none; }
.rail-item:focus-visible .rail-tile { box-shadow: var(--focus-ring); }
.rail-more-menu { left: calc(100% + 4px); bottom: 0; top: auto; }
.rail-more-menu .menu-caption { padding: var(--space-4) var(--space-16); font: var(--font-text3-normal); color: var(--secondary-text-color); white-space: nowrap; }
.rail-more { margin-top: 0; }
/* Teams is in the rail on computers; on phones it is the first item of More (below). */
.rail-more-menu .rail-more-teams { display: none; }

/* ---------- Left pane (§2.5, QA-1.2) ---------- */
.app-leftpane { grid-column: 2; grid-row: 2; position: sticky; top: var(--topbar-height); align-self: start; z-index: 40; box-sizing: border-box;
  width: var(--leftpane-width); height: calc(100vh - var(--topbar-height)); display: flex; flex-direction: column; background: var(--primary-background-color);
  border: 1px solid var(--application-border-color); border-bottom: 0; border-top-left-radius: var(--border-radius-big);
  transition: width var(--leftpane-motion), visibility 0s; }
.app-shell:not(.pane-open) .app-leftpane { width: 0; border-width: 0; visibility: hidden; overflow: hidden; transition: width var(--leftpane-motion), visibility 0s 300ms; }
.pane-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding: 20px 16px 8px 24px; flex: none; }
.pane-title { font: var(--font-text2-normal); color: var(--secondary-text-color); white-space: nowrap; }
.pane-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-bottom: var(--space-16); }
.pane-scroll::-webkit-scrollbar { width: 9px; }
.pane-scroll::-webkit-scrollbar-thumb { border-radius: var(--border-radius-small); }
.pane-list { display: flex; flex-direction: column; gap: var(--space-4); }
.pane-row { display: flex; align-items: center; gap: var(--space-8); height: 32px; margin: 0 var(--space-16); padding: var(--space-4) var(--space-8); box-sizing: border-box;
  border-radius: var(--border-radius-small); color: var(--primary-text-color); text-decoration: none; font: var(--font-text2-normal); white-space: nowrap; }
.pane-row svg.icon { width: 20px; height: 20px; color: var(--primary-text-color); }
.pane-row:hover { background: var(--primary-background-hover-color); }
.pane-row.active { background: var(--crm-selected-color); }
.pane-row.active:hover { background: var(--crm-selected-hover-color); }
.pane-row .pane-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pane-row .pane-count { font: var(--font-text3-normal); color: var(--secondary-text-color); }
.pane-collapse { position: absolute; top: 19px; right: -14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--ui-border-color); border-radius: 50%; background: var(--primary-background-color); color: var(--primary-text-color); cursor: pointer;
  opacity: 0; transition: opacity var(--motion-productive-medium); }
.app-leftpane:hover .pane-collapse, .pane-collapse:focus-visible { opacity: 1; }
.pane-collapse:hover { background: var(--primary-background-hover-color); }
.pane-backdrop { display: none; }

/* ---------- Content panel (§2.2, §2.6) ---------- */
.app-shell > main { grid-column: 3; grid-row: 2; min-width: 0; min-height: calc(100vh - var(--topbar-height)); margin: 0; box-sizing: border-box;
  background: var(--primary-background-color); border: 0; border-top: 1px solid var(--application-border-color); border-left: 1px solid var(--application-border-color);
  border-radius: 0; border-top-left-radius: var(--border-radius-big); box-shadow: none; position: relative; }
.app-shell.pane-open:not(.pane-overlay) > main { border-top-left-radius: 0; border-left: 0; }
/* While the page scrolls, keep the panel's top edge and rounded corner fixed under the top bar. */
.app-shell > main::before { content: ""; position: fixed; top: var(--topbar-height); left: var(--panel-left); width: 16px; height: 16px; z-index: 45; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, transparent 15px, var(--application-border-color) 15px, var(--application-border-color) 16px, var(--surface-color) 16.5px); }
.app-shell > main::after { content: ""; position: fixed; top: var(--topbar-height); left: calc(var(--panel-left) + 16px); right: 0; height: 1px; z-index: 45;
  pointer-events: none; background: var(--application-border-color); }
.app-shell.pane-open:not(.pane-overlay) > main::before { display: none; }
.app-shell.pane-open:not(.pane-overlay) > main::after { left: var(--panel-left); }
.app-shell > main > .content { padding: 0; margin: 0; max-width: none; }

/* ---------- Board header (§2.6, QA-2.1, QA-2.2) ---------- */
.board-header { padding: 18px 30px 0 38px; }
body[data-page="today"] .board-header { display: none; }
.board-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 32px; }
.board-title-wrap { min-width: 0; }
.board-title { display: inline-flex; align-items: center; gap: var(--space-4); max-width: 600px; padding: 1px var(--space-4); border-radius: var(--border-radius-small); cursor: pointer; }
.board-title:hover { background: var(--primary-background-hover-color); }
.board-title:active, .board-title.open { background: var(--primary-selected-color); }
.board-title h1, .board-header h1#page-title { font: var(--font-h2-normal); letter-spacing: var(--letter-spacing-h2); margin: 0; color: var(--primary-text-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-title-icon:empty { display: none; }
.board-title-icon { display: none; }
.board-title-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--border-radius-small);
  background: transparent; color: var(--primary-text-color); cursor: pointer; }
.board-title-chevron svg.icon { width: 20px; height: 20px; transition: transform var(--motion-productive-medium); }
.board-title-chevron[aria-expanded="true"] svg.icon { transform: rotate(180deg); }
.board-info { top: calc(100% + 8px); left: 0; width: 320px; padding: var(--space-16); }
.board-info h2 { margin: 0 0 var(--space-8); font: var(--font-h3-normal); letter-spacing: var(--letter-spacing-h3); }
.board-info p, #page-description { display: block; margin: 0; font: var(--font-text2-normal); color: var(--secondary-text-color); }
#board-help:not(:empty) { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--layout-border-color); }
#board-help p { margin: 0 0 var(--space-8); font: var(--font-text2-normal); color: var(--primary-text-color); }
#board-help p:last-child { margin-bottom: 0; }
.board-actions { display: flex; align-items: center; gap: var(--space-8); flex: none; min-width: 0; }
body[data-page="workspace"] .board-actions .board-team { display: none; }
.save-indicator { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--secondary-text-color); font: var(--font-text2-normal); white-space: nowrap; }
.save-indicator svg.icon { width: 16px; height: 16px; }
.save-indicator[data-state="error"] { color: var(--negative-color); }
.save-indicator[data-state="saving"] .loader { width: 14px; height: 14px; color: var(--primary-color); }
#save-status { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.board-team:empty { display: none; }
.board-team .avatar, .board-team .avatar-counter { --size: 28px; }
#page-actions { display: flex; align-items: center; gap: var(--space-8); }
#page-actions:empty { display: none; }

/* ---------- View tabs (§3.3, QA-2.3) ---------- */
.board-views { position: relative; display: flex; align-items: flex-end; height: 34px; margin-top: var(--space-8); box-shadow: inset 0 -1px 0 var(--layout-border-color); }
.board-views:empty { display: none; }
.board-views .view-switch.board-view-tabs { position: static; display: flex; align-items: flex-end; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: 0; width: auto; height: 34px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.board-views .view-switch.board-view-tabs::-webkit-scrollbar { display: none; }
.board-views .board-view-tabs > button, .board-views .saved-tab > button:first-child { position: relative; flex: none; height: 34px; min-height: 34px; margin: 0; padding: 0 0 2px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--primary-text-color); font: var(--font-text2-normal); cursor: pointer; }
.board-views .board-view-tabs .tab-inner { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; max-width: 200px; padding: var(--space-4) 20px;
  box-sizing: border-box; border-radius: var(--border-radius-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--motion-productive-short) var(--motion-timing-transition); }
/* Hover only where a pointer hovers: on touch the last-tapped tab would keep the grey box. */
@media (hover: hover) { .board-views .board-view-tabs > button:hover .tab-inner, .board-views .saved-tab > button:first-child:hover .tab-inner { background: var(--primary-background-hover-color); } }
.board-views .board-view-tabs > button.selected, .board-views .saved-tab > button.selected { box-shadow: inset 0 -2px 0 var(--primary-color); color: var(--primary-text-color); font-weight: 400; background: none; }
.board-views .board-view-tabs.saved-active > button.selected { box-shadow: none; }
.board-views .board-view-tabs > button:disabled { opacity: .5; cursor: not-allowed; }
.board-views .board-view-tabs > button:focus-visible { box-shadow: var(--focus-ring); }
.board-views .saved-tab { position: relative; display: inline-flex; align-items: flex-end; flex: none; height: 34px; }
/* The selected tab shows its "…" menu inside the tab; its text shifts 12px left to make room (QA-2.3). */
.board-views .board-view-tabs .tab-inner { position: relative; }
.board-views .tab-content { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform var(--motion-productive-medium) var(--motion-timing-transition); }
.board-views .tab-menu { position: absolute; right: 8px; top: 5px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 3px;
  box-sizing: border-box; border-radius: var(--border-radius-small); color: var(--primary-text-color); opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity var(--motion-productive-medium) var(--motion-timing-transition); }
.board-views .tab-menu svg.icon { width: 14px; height: 14px; }
.board-views button.selected .tab-content { transform: translateX(-12px); }
.board-views button.selected .tab-menu { opacity: 1; pointer-events: all; }
.board-views .board-view-tabs.saved-active > button.selected .tab-content { transform: none; }
.board-views .tab-menu:hover, .board-views .tab-menu.open { background: var(--primary-selected-color); }
.board-views .tab-menu:focus-visible { opacity: 1; box-shadow: var(--focus-ring); }
.tab-menu-popover { position: fixed; z-index: 1000; min-width: 220px; }
.tab-menu-popover .rename-view-form { display: flex; flex-direction: column; gap: var(--space-8); width: 240px; padding: var(--space-8); }
.tab-menu-popover .rename-view-form label { display: flex; flex-direction: column; gap: var(--space-4); font: var(--font-text2-normal); color: var(--primary-text-color); }
.tab-menu-popover .rename-view-form input { height: 32px; padding: 0 var(--space-8); border: 1px solid var(--primary-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); }
.tab-menu-popover .button-row { display: flex; justify-content: flex-end; gap: var(--space-8); }
.board-views .save-view-menu { position: static; flex: none; margin: 0 0 1px var(--space-4); align-self: center; }
.board-views .save-view-menu > summary { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0;
  border-radius: var(--border-radius-small); background: transparent; color: var(--primary-text-color); list-style: none; cursor: pointer; gap: 0; box-shadow: none; }
.board-views .save-view-menu > summary::before, .board-views .save-view-menu > summary::after { content: none; }
.board-views .save-view-menu > summary[data-tip]::after { content: attr(data-tip); }
.board-views .save-view-menu > summary[data-tip]::before { content: ""; }
.board-views .save-view-menu > summary::-webkit-details-marker { display: none; }
.board-views .save-view-menu > summary svg.icon { width: 16px; height: 16px; }
.board-views .save-view-menu > summary:hover, .board-views .save-view-menu[open] > summary { background: var(--primary-background-hover-color); }
.board-views .save-view-form { position: absolute; top: 40px; z-index: 1000; width: 280px; padding: var(--space-16); background: var(--primary-background-color);
  border: 0; border-radius: var(--border-radius-medium); box-shadow: var(--box-shadow-medium); box-sizing: border-box; }
.board-views .save-view-form label { display: block; font: var(--font-text2-normal); color: var(--primary-text-color); }
.board-views .save-view-form input { width: 100%; height: 32px; margin: var(--space-8) 0 var(--space-4); 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); outline: none; }
.board-views .save-view-form input:focus { border-color: var(--primary-color); }
.board-views .save-view-form small { display: block; margin: 0 0 var(--space-12); color: var(--secondary-text-color); font: var(--font-text3-normal); }

/* ---------- Board toolbar (§3.4, QA-2.5) ---------- */
#view { display: block; padding: 0 30px 120px var(--board-body-left, 42px); }
body[data-page="today"] #view { padding: 24px 40px 80px; }
body[data-page="workspace"] #view { padding-top: var(--space-16); }
#notice { margin: var(--space-12) 30px 0 42px; padding: 10px 14px; border: 1px solid var(--primary-selected-color); border-radius: var(--border-radius-medium);
  background: var(--primary-highlighted-color); color: var(--primary-text-color); font-size: 12px; line-height: 1.7; }
#notice[hidden] { display: none; }
#view > .board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-16); margin: 0 0 var(--space-8); padding: 0; min-height: 64px;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
.board-toolbar .toolbar-main, #view > .board-toolbar .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; min-height: 64px; flex: 1 1 auto; min-width: 0; }
.board-toolbar .toolbar-new { display: inline-flex; margin-right: var(--space-8); }
.board-toolbar .toolbar-new:empty { display: none; }
.board-toolbar .toolbar-slot, .board-toolbar .board-label-tools, .board-toolbar .label-tools { display: contents; }
.board-toolbar .toolbar-end { display: flex; align-items: center; gap: var(--space-8); flex: none; margin-left: auto; }
.board-toolbar .toolbar-end:empty { display: none; }
.toolbar-item { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-12) 0 0; border: 0; border-radius: var(--border-radius-small);
  background: transparent; color: var(--primary-text-color); font: var(--font-text2-normal); white-space: nowrap; cursor: pointer; flex: none; box-shadow: none; min-height: 32px;
  transition: background-color var(--motion-productive-short) var(--motion-timing-transition); }
.toolbar-item:hover { background: var(--primary-background-hover-color); }
.toolbar-item > svg.icon:first-child { width: 32px; height: 20px; padding: 0 6px; box-sizing: border-box; color: var(--icon-color); }
.toolbar-item.active, .toolbar-item[aria-expanded="true"], details[open] > summary.toolbar-item { background: var(--primary-selected-color); }
.toolbar-item.active:hover { background: var(--primary-selected-hover-color); }
.toolbar-item:focus-within { box-shadow: var(--focus-ring); }
.toolbar-item .toolbar-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.toolbar-item .toolbar-count { padding-left: var(--space-4); }
.toolbar-item .toolbar-caret { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px; margin: 0 calc(var(--space-12) * -1) 0 6px;
  border-left: 1px solid #fff; color: var(--primary-text-color); }
.toolbar-item .toolbar-caret svg.icon { width: 16px; height: 16px; }
/* Native selects keep their behaviour; they sit invisibly over the item so the item can look like monday's. */
.toolbar-select select, #view .board-toolbar .toolbar-select select { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; opacity: 0;
  cursor: pointer; appearance: none; border: 0; font: var(--font-text2-normal); }
/* Search (QA-2.5): idle it is a compact "Search" item like Person; focused or holding text it is a 260px input
   with a clear ✕ and the "Search options" knobs. */
.toolbar-search { position: relative; display: inline-flex; align-items: center; height: 32px; width: auto; padding: 0; border: 1px solid transparent; border-radius: var(--border-radius-small);
  background: transparent; color: var(--icon-color); cursor: pointer; flex: none; box-sizing: border-box;
  transition: width var(--motion-productive-long) var(--motion-timing-transition), background-color var(--motion-productive-short), border-color var(--motion-productive-short); }
.toolbar-search:hover { background: var(--primary-background-hover-color); }
.toolbar-search > svg.icon { flex: none; width: 32px; height: 20px; padding: 0 6px; box-sizing: border-box; }
#view .board-toolbar .toolbar-search > input, .toolbar-search > input { flex: 1; min-width: 0; width: 60px; height: 30px; min-height: 0; margin: 0; padding: 0 var(--space-12) 0 0; border: 0;
  background: transparent; box-shadow: none; outline: none; color: var(--primary-text-color); font: var(--font-text2-normal); border-radius: 0; cursor: pointer; }
.toolbar-search > input::placeholder { color: var(--primary-text-color); opacity: 1; }
.toolbar-search > input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.toolbar-search .search-clear, .toolbar-search .search-options-wrap { display: none; }
.toolbar-search .search-clear { color: var(--primary-color); }
.toolbar-search .search-clear[hidden] { display: none !important; }
/* .expanded holds the width for 200ms after the empty input blurs, so a click on Person/Filter lands before the item collapses. */
.toolbar-search:focus-within, .toolbar-search.has-value, .toolbar-search.expanded, .toolbar-search:has(.search-options[aria-expanded="true"]) { width: 260px; cursor: text; }
.toolbar-search:focus-within > input, .toolbar-search.has-value > input, .toolbar-search.expanded > input, .toolbar-search:has(.search-options[aria-expanded="true"]) > input { width: 100%; padding-right: var(--space-4); cursor: text; }
.toolbar-search:focus-within .search-clear, .toolbar-search.has-value .search-clear { display: inline-flex; }
.toolbar-search:focus-within .search-options-wrap, .toolbar-search.has-value .search-options-wrap, .toolbar-search:has(.search-options[aria-expanded="true"]) .search-options-wrap { display: inline-flex; margin-right: var(--space-4); }
.toolbar-search:focus-within { border-color: var(--primary-color); background: var(--primary-background-color); }
.toolbar-search:focus-within > input::placeholder { color: var(--placeholder-color); }
.toolbar-search.has-value { background: var(--primary-selected-color); }
.toolbar-search.has-value:focus-within { background: var(--primary-selected-color); }
.toolbar-search:focus-within { box-shadow: none; }
.toolbar-search .search-options.active { color: var(--primary-color); }
.search-options-popover { top: calc(100% + 8px); left: auto; right: -4px; min-width: 260px; max-height: 420px; overflow-y: auto; padding: var(--space-16); box-sizing: border-box; cursor: default; }
.search-options-popover h2 { margin: 0 0 var(--space-12); font: var(--font-text1-normal); color: var(--primary-text-color); }
.search-options-popover .picker-search { display: flex; width: 100%; box-sizing: border-box; margin-bottom: var(--space-8); }
.search-options-popover label { display: flex; align-items: center; gap: var(--space-8); min-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; }
.search-options-popover label:hover { background: var(--primary-background-hover-color); }
.search-options-popover .sc-all b { font-weight: 700; }
.search-options-popover .sc-all span { color: var(--secondary-text-color); }
.search-options-popover .sc-title { margin: var(--space-8) var(--space-4) var(--space-4); font: var(--font-text2-normal); color: var(--secondary-text-color); }
.search-options-popover .sc-note { margin: 0; color: var(--secondary-text-color); font: var(--font-text2-normal); }

/* Person and Filter toolbar items and their popovers (spec §3.4, QA-2.6) */
.toolbar-pop-wrap { position: relative; display: inline-flex; flex: none; }
.toolbar-item.active, .toolbar-item[aria-expanded="true"] { padding-left: var(--space-4); }
.toolbar-item.active > svg.icon:first-child, .toolbar-item[aria-expanded="true"] > svg.icon:first-child { width: 28px; padding: 0 4px 0 2px; }
.toolbar-item .toolbar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; }
.toolbar-item .toolbar-avatar .avatar { --size: 20px; font-size: 9px; }
.toolbar-item .toolbar-caret:hover { background: var(--ui-border-color); border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; }
.toolbar-backing { position: absolute; width: 1px; height: 1px; overflow: hidden; }
/* Toolbar Sort popover (spec §3.4): one row, column dropdown + direction dropdown, padding 16px. */
.sort-popover { top: calc(100% + 8px); left: 0; width: max-content; min-width: 360px; padding: var(--space-16); box-sizing: border-box; border-radius: var(--border-radius-medium); box-shadow: var(--box-shadow-medium); cursor: default; }
.sort-popover h2 { margin: 0 0 var(--space-12); font: var(--font-text1-medium); color: var(--primary-text-color); letter-spacing: 0; }
.sort-popover .sort-row { display: flex; gap: var(--space-8); }
.sort-popover .qf-select { flex: 1 1 0; min-width: 0; height: 32px; 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); }
.sort-popover .qf-select:first-child { flex-grow: 1.6; }
.sort-popover .qf-select:disabled { color: var(--disabled-text-color); background: var(--disabled-background-color, var(--allgrey-background-color)); }
.sort-popover .sort-clear { margin-top: var(--space-12); }
.filter-popover { top: calc(100% + 8px); left: 0; width: max-content; min-width: 520px; max-width: min(1000px, calc(100vw - var(--panel-left, 72px) - 60px)); padding: var(--space-24) var(--space-24) 0;
  box-sizing: border-box; border-radius: var(--border-radius-medium); box-shadow: var(--box-shadow-medium); cursor: default; }
.filter-popover .qf-head { display: flex; align-items: center; gap: var(--space-8); height: 32px; }
.filter-popover .qf-head h2 { margin: 0; font: var(--font-text1-medium); color: var(--primary-text-color); letter-spacing: 0; }
.filter-popover .qf-showing { font: var(--font-text2-normal); color: var(--secondary-text-color); }
.filter-popover .qf-info { display: inline-flex; margin-left: -4px; color: var(--icon-color); }
.filter-popover .qf-info svg.icon { width: 16px; height: 16px; }
.filter-popover .qf-tools { display: flex; gap: var(--space-8); margin-left: auto; }
.filter-popover .qf-tools .button:disabled { opacity: var(--disabled-component-opacity); color: var(--primary-text-color); }
.filter-popover .qf-body { display: flex; gap: var(--space-24); margin-top: var(--space-16); padding-bottom: var(--space-16); overflow-x: auto; }
.filter-popover .qf-column { flex: none; width: 144px; }
.filter-popover .qf-title { height: 20px; font: var(--font-text2-normal); color: var(--primary-text-color); white-space: nowrap; }
.filter-popover .qf-title-count { color: var(--primary-text-color); }
.filter-popover .qf-values { display: flex; flex-direction: column; gap: var(--space-8); max-height: 240px; margin-top: var(--space-8); overflow-y: auto; }
.qf-value { display: flex; align-items: center; gap: var(--space-8); width: 144px; height: 32px; min-height: 32px; flex: none; margin: 0; padding: 0 var(--space-8); box-sizing: border-box;
  border: 0; border-radius: var(--border-radius-small); background: var(--pulse-background-color); color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer;
  transition: background-color var(--motion-productive-short) var(--motion-timing-transition); }
.qf-value:hover { background: var(--pulse-hover-background-color); }
.qf-value.selected { background: var(--primary-selected-color); box-shadow: inset 0 0 0 1px var(--primary-color); }
.qf-value.selected:hover { background: var(--primary-selected-hover-color); }
.qf-value:focus-visible { box-shadow: var(--focus-ring); }
.qf-value .qf-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf-value .qf-count { flex: none; font: var(--font-text3-normal); color: var(--secondary-text-color); }
.qf-value .qf-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.qf-value .qf-dot.small { width: 8px; height: 8px; }
.qf-value .avatar { --size: 24px; font-size: 10px; }
.qf-value .qf-empty-person { display: inline-flex; color: var(--person-empty-color); }
.filter-popover .qf-foot { display: flex; align-items: center; height: 56px; margin: 0 calc(-1 * var(--space-24)); padding: 0 var(--space-24); border-top: 1px solid var(--layout-border-color); }
.filter-popover .qf-switch { height: 32px; padding: var(--space-4) var(--space-8); border: 0; border-radius: var(--border-radius-small); background: var(--ui-background-color); color: var(--primary-text-color);
  font: var(--font-text2-normal); cursor: pointer; }
.filter-popover .qf-switch:hover { background: var(--ui-background-hover-color); }
.filter-popover .qf-advanced-rows { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-16); padding-bottom: var(--space-16); }
.filter-popover .qf-row { display: grid; grid-template-columns: 56px 140px 32px minmax(200px, 1fr); align-items: center; gap: var(--space-8); }
.filter-popover .qf-where, .filter-popover .qf-is { color: var(--secondary-text-color); }
.filter-popover .qf-col { display: flex; align-items: center; height: 32px; padding: 0 var(--space-8); border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); }
.filter-popover .qf-select { height: 32px; 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); }
.person-popover { top: calc(100% + 8px); left: 0; padding: var(--space-16) var(--space-24) var(--space-24); min-width: 280px; box-sizing: border-box; cursor: default; }
.person-popover .person-pop-head h2 { margin: 0; font: var(--font-text1-medium); color: var(--primary-text-color); letter-spacing: 0; }
.person-popover .person-pop-head p { margin: 2px 0 var(--space-16); font: var(--font-text2-normal); color: var(--secondary-text-color); }
.person-popover .person-avatars { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.person-popover .person-pick { display: inline-flex; padding: 2px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.person-popover .person-pick .avatar { --size: 28px; }
.person-popover .person-pick:hover { background: var(--primary-background-hover-color); }
.person-popover .person-pick.selected { box-shadow: inset 0 0 0 2px var(--primary-color); }
/* The toolbar "…" overflow and the collapse-header "^" */
.board-toolbar .toolbar-more { color: var(--primary-text-color); }
.toolbar-more-menu { top: calc(100% + 4px); left: 0; }
.toolbar-more-menu .toolbar-more-slot { display: contents; }
.toolbar-more-menu .toolbar-more-slot:empty + .menu-divider { display: none; }
.board-toolbar .header-collapse { width: 24px; height: 24px; border-radius: 50%; padding: 0; background: var(--grey-background-color); color: var(--primary-text-color); }
.board-toolbar .header-collapse:hover { background: var(--ui-background-color); }
.board-header.collapsed .board-title-row, .board-header.collapsed .board-views { display: none; }
.board-header.collapsed { padding-top: 0; }

/* Hide (Columns) menu as a toolbar item */
#view .board-toolbar .columns-menu { position: relative; margin: 0; width: auto; z-index: 20; }
#view .board-toolbar .columns-menu > summary { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-12) 0 0; border: 0; border-radius: var(--border-radius-small);
  background: transparent; color: var(--primary-text-color); font: var(--font-text2-normal); list-style: none; cursor: pointer; gap: 0; box-shadow: none; }
#view .board-toolbar .columns-menu > summary::before { display: none; content: none; }
#view .board-toolbar .columns-menu > summary::-webkit-details-marker { display: none; }
#view .board-toolbar .columns-menu > summary > svg.icon { width: 32px; height: 20px; padding: 0 6px; box-sizing: border-box; color: var(--icon-color); }
#view .board-toolbar .columns-menu > summary:hover { background: var(--primary-background-hover-color); }
#view .board-toolbar .columns-menu[open] > summary { background: var(--primary-selected-color); }
#view .board-toolbar .columns-popover { position: absolute; top: calc(100% + 8px); left: 0; right: auto; z-index: 1000; width: 260px; max-height: 420px; overflow-y: auto; padding: var(--space-16);
  border: 0; border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: var(--box-shadow-medium); }
#view .board-toolbar .columns-popover strong { display: block; margin-bottom: var(--space-8); font: var(--font-text1-normal); color: var(--primary-text-color); }
#view .board-toolbar .columns-popover label { display: flex; align-items: center; gap: var(--space-8); min-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 .board-toolbar .columns-popover label:hover { background: var(--primary-background-hover-color); }

/* Segmented scopes (follow-ups) in the toolbar's right cluster */
.board-toolbar .toolbar-end .view-switch { margin: 0; }

/* ---------- Mid widths: the pane floats over the panel (below 1280px) ---------- */
@media (max-width: 1279px) {
  .app-shell.pane-open.pane-overlay .app-leftpane { position: fixed; left: var(--rail-width); top: var(--topbar-height); bottom: 0; height: calc(100vh - var(--topbar-height)); align-self: stretch; box-shadow: var(--box-shadow-medium); z-index: 55; }
  .app-shell.pane-overlay .pane-backdrop:not([hidden]) { display: block; position: fixed; inset: var(--topbar-height) 0 0 var(--rail-width); z-index: 50; background: transparent; }
  .app-shell.pane-overlay { grid-template-columns: var(--rail-width) 0 minmax(0, 1fr); }
  .board-header { padding-left: 30px; }
  #view { padding-left: var(--board-body-left, 34px); padding-right: 24px; }
  .topbar-search { width: 28%; }
}
@media (max-width: 1023px) {
  .keycaps { display: none; }
  .board-actions .board-team { display: none; }
}

/* ---------- Phones (760px and below): compact 48px bar, the rail as a bottom tab bar,
   the boards pane as a bottom sheet over a dimmed page, and boards that scroll sideways. ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: calc(var(--topbar-height) + var(--space-8)); scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-8)); }
  /* The page keeps room under its last line for the fixed tab bar */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); background: var(--primary-background-color); }
  .app-shell { display: block; min-height: calc(100vh - 56px); overflow-x: clip; --panel-left: 0px; --tabbar-height: 56px; background: var(--primary-background-color); }
  .app-topbar { position: sticky; top: 0; gap: var(--space-4); padding: 0 var(--space-4) 0 var(--space-4); border-bottom: 1px solid var(--application-border-color); }
  .product-button { padding: 0 var(--space-4); }
  .product-logo img { width: 28px; height: 28px; aspect-ratio: 1; }
  .product-label { margin-left: var(--space-4); padding-left: 0; border-left: 0; font-size: 12px; letter-spacing: 0.4px; }
  .topbar-search { position: static; transform: none; width: auto; flex: 1; min-width: 0; max-width: none; }
  .search-pill { height: 36px; }
  .topbar-search .search-pill-text { font-size: 13px; }
  .global-search { position: fixed; left: var(--space-8); right: var(--space-8); top: 52px; transform: none; width: auto; max-width: none; }
  .topbar-actions { gap: 0; }
  .topbar-actions .icon-button.medium { width: 36px; height: 36px; }
  .topbar-settings, .topbar-help, .topbar-separator { display: none; }
  .avatar-button { width: 36px; height: 36px; }
  .avatar-button .avatar { --size: 30px; }

  /* Bottom tab bar: Home, CRM (opens the boards sheet), AI, My work, Workspace, More. Teams moves to the top of More: a seventh tab at
     390px cut Workspace's label short (checked 2026-10-22). */
  .app-rail .rail-item#rail-teams { display: none; }
  .rail-more-menu .rail-more-teams { display: flex; }
  .app-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0; padding: 0 var(--space-4) env(safe-area-inset-bottom, 0px);
    background: var(--primary-background-color); border-top: 1px solid var(--application-border-color); box-shadow: 0 -2px 8px rgba(0, 0, 0, .04); }
  .rail-expand { display: none !important; }
  .rail-more { flex: 1 1 0; display: flex; min-width: 0; }
  .rail-item { flex: 1 1 0; min-width: 0; width: auto; max-width: none; justify-content: center; gap: 2px; padding: var(--space-4) 0; border-radius: 0; }
  .rail-item .rail-tile { width: 40px; height: 28px; border-radius: 14px; }
  .rail-item .rail-tile svg.icon { width: 22px; height: 22px; }
  .rail-label { max-width: 100%; font: 400 11px/14px var(--font-family); letter-spacing: 0; color: var(--secondary-text-color); }
  .rail-item:hover .rail-tile { background: none; }
  .rail-item:hover .rail-tile svg.icon { transform: none; }
  .rail-item.selected .rail-tile { background: var(--crm-selected-color); color: var(--primary-text-color); }
  .rail-item.selected .rail-label { color: var(--primary-text-color); font-weight: 600; }
  .rail-item#rail-crm[aria-expanded="true"] .rail-tile { background: var(--primary-selected-color); }
  .rail-more-menu { left: auto; right: 0; top: auto; bottom: calc(100% + var(--space-8)); }

  /* Boards pane as a bottom sheet */
  .app-shell .app-leftpane, .app-shell.pane-open.pane-overlay .app-leftpane, .app-shell:not(.pane-open) .app-leftpane {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 80; width: auto; height: auto; max-height: 75vh; max-height: 75dvh;
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
    background: var(--primary-background-color); box-shadow: var(--box-shadow-large); overflow: hidden; }
  .app-shell:not(.pane-open) .app-leftpane { visibility: hidden; transform: translateY(100%); transition: transform var(--motion-productive-long) var(--motion-timing-exit), visibility 0s var(--motion-productive-long); }
  .app-shell.pane-open .app-leftpane { visibility: visible; transform: none; transition: transform var(--motion-productive-long) var(--motion-timing-enter); }
  .app-leftpane::before { content: ""; display: block; width: 36px; height: 4px; margin: var(--space-8) auto 0; border-radius: 2px; background: var(--ui-border-color); }
  .pane-head { padding: var(--space-8) var(--space-16) var(--space-8) var(--space-24); min-height: 40px; }
  .pane-title { font: var(--font-h3-normal); color: var(--primary-text-color); }
  .pane-collapse { top: 22px; right: var(--space-12); width: 32px; height: 32px; border: 0; opacity: 1; background: transparent; }
  .pane-collapse svg.icon { transform: rotate(-90deg); }
  .pane-scroll { padding-bottom: 0; }
  .pane-list { gap: 0; }
  .pane-row { height: 48px; margin: 0 var(--space-8); padding: 0 var(--space-16); gap: var(--space-12); font: var(--font-text1-normal); }
  .pane-row svg.icon { width: 22px; height: 22px; }
  .app-shell .pane-backdrop:not([hidden]), .app-shell.pane-overlay .pane-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 75;
    background: var(--backdrop-color); animation: backdrop-in var(--motion-productive-medium) var(--motion-timing-enter); }

  /* Content panel fills the screen */
  .app-shell > main { min-height: 0; border: 0; border-radius: 0; }
  .app-shell > main::before, .app-shell > main::after { display: none; }
  .board-header { padding: var(--space-12) var(--space-16) 0; }
  .board-title-row { flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
  .board-title h1, .board-header h1#page-title { font: var(--font-h3-medium); font-size: 20px; line-height: 28px; }
  .board-actions .board-team, .board-actions #export-view { display: none; }
  .save-indicator { font-size: 11.5px; }
  .board-info { width: min(320px, calc(100vw - 32px)); }
  #view { padding: 0 var(--space-16) var(--space-32); }
  body[data-page="today"] #view { padding: var(--space-16) var(--space-16) var(--space-32); }
  #notice { margin: var(--space-12) var(--space-16) 0; }

  /* One 48px toolbar row that scrolls sideways (monday mobile); search is an icon until tapped, then an overlay row */
  #view > .board-toolbar { flex-wrap: nowrap; gap: var(--space-4); min-height: 48px; position: relative; }
  .board-toolbar .toolbar-main, #view > .board-toolbar .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--space-4); min-height: 48px; padding: 0; }
  .board-toolbar .toolbar-main::-webkit-scrollbar { display: none; }
  /* No header-collapse on mobile (monday); the last toolbar item fades out instead of being sliced. The mask is dropped while a
     toolbar popover or the search overlay is open, because a mask would also clip those descendants. */
  .board-toolbar .header-collapse { display: none; }
  #view > .board-toolbar .toolbar-main { padding-right: 24px; }
  .board-toolbar .toolbar-main:not(:has([aria-expanded="true"], details[open])):not(:focus-within) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .board-toolbar .toolbar-new { margin-right: var(--space-4); }
  .board-toolbar .toolbar-end { flex: none; margin: 0; }
  .toolbar-search, .toolbar-search.expanded { width: 32px; }
  .toolbar-search > svg.icon { width: 30px; }
  /* Collapsed, the input covers the 32px icon cell invisibly, so a tap focuses it and the field opens as an overlay row. */
  #view .board-toolbar .toolbar-search:not(:focus-within) > input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
  .toolbar-search:focus-within, .toolbar-search.has-value, .toolbar-search:has(.search-options[aria-expanded="true"]) { position: absolute; left: 0; right: 0; top: 8px; z-index: 30; width: auto;
    height: 32px; background: var(--primary-background-color); border-color: var(--primary-color); box-shadow: var(--box-shadow-small); }
  .toolbar-search.has-value:not(:focus-within) { position: relative; top: auto; width: 32px; box-shadow: none; border-color: transparent; }
  .toolbar-search.has-value:not(:focus-within) .search-clear, .toolbar-search.has-value:not(:focus-within) .search-options-wrap { display: none; }
  .toolbar-search.has-value:not(:focus-within) { background: var(--primary-selected-color); }
  .board-toolbar .toolbar-text { max-width: 120px; }
  .board-toolbar .sort-item .toolbar-text { display: none; }
  .filter-popover, .person-popover, .search-options-popover, .sort-popover, .toolbar-more-menu, .new-menu { position: fixed; left: var(--space-8); right: var(--space-8); top: auto; min-width: 0; width: auto; max-width: none;
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-8)); max-height: 70vh; max-height: 70dvh; overflow-y: auto; border-radius: var(--border-radius-big); box-shadow: var(--box-shadow-large); }
  .filter-popover { padding: var(--space-16) var(--space-16) 0; }
  .filter-popover .qf-head { flex-wrap: wrap; height: auto; gap: 2px var(--space-8); }
  .filter-popover .qf-body { flex-wrap: wrap; gap: var(--space-16); }
  .filter-popover .qf-column, .qf-value { width: calc(50vw - 40px); }
  .filter-popover .qf-foot { margin: 0 calc(-1 * var(--space-16)); padding: 0 var(--space-16); }
  .filter-popover .qf-row { grid-template-columns: 48px 1fr; }
  .filter-popover .qf-row .qf-is { display: none; }
  .filter-popover .qf-row .qf-select { grid-column: 1 / -1; }
  /* Toolbar popovers open as sheets above the tab bar so they never run off the screen */
  .board-views .save-view-form, #view .board-toolbar .columns-popover { position: fixed; left: var(--space-8); right: var(--space-8); top: auto;
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-8)); width: auto; max-height: 60vh; max-height: 60dvh; overflow-y: auto;
    border-radius: var(--border-radius-big); box-shadow: var(--box-shadow-large); }
}
.board-views .save-view-menu:not([open]) .save-view-form { display: none; }
/* Toolbar order (older stylesheets order .filters after the quick views) */
#view > .board-toolbar > .toolbar-main { order: 1; }
#view > .board-toolbar > .toolbar-end { order: 2; }
#view .board-toolbar .toolbar-search > input { min-width: 0; padding-left: 0; background: none; }
.toolbar-search > input:placeholder-shown::-webkit-search-cancel-button { display: none; }
.toolbar-search > input::-webkit-search-decoration { -webkit-appearance: none; }

/* ---------- Review round 1: header "…", pane tools, Dashboards section, AI rail item and floating pill ---------- */
.board-menu-wrap { position: relative; display: inline-flex; }
.board-actions .board-menu { width: 32px; height: 32px; border-radius: var(--border-radius-small); color: var(--primary-text-color); }
.board-actions .board-menu svg.icon { color: var(--primary-text-color); }
.board-menu-pop { top: calc(100% + 4px); right: 0; left: auto; }
.save-indicator { cursor: default; }
.pane-tools { display: inline-flex; align-items: center; gap: 0; margin-left: auto; }
.pane-tools .icon-button { color: var(--primary-text-color); }
.pane-menu-wrap { position: relative; display: inline-flex; }
.pane-menu { top: calc(100% + 4px); right: 0; left: auto; }
.pane-section { margin-top: var(--space-8); }
.pane-section-head { display: flex; align-items: center; gap: var(--space-4); width: calc(100% - 32px); height: 32px; margin: 6px var(--space-16); padding: 0 0 0 var(--space-8); box-sizing: border-box;
  border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--primary-text-color); font: var(--font-text2-medium); text-align: left; cursor: pointer; }
.pane-section-head:hover { background: var(--primary-background-hover-color); }
.pane-section-head svg.icon { width: 20px; height: 20px; color: var(--icon-color); transition: transform var(--motion-productive-medium) var(--motion-timing-transition); }
.pane-section-head[aria-expanded="false"] svg.icon { transform: rotate(-90deg); }
.pane-section .pane-list[hidden] { display: none; }
.rail-item[hidden] { display: none; }
.rail-item[data-rail="ai"] .rail-tile svg.icon { width: 18px; height: 18px; }
/* Floating "Ask, create, analyze" pill, centred over the content panel (§2.7, QA-1.3) */
.ai-pill { position: fixed; bottom: 10px; left: calc(var(--panel-left, 72px) + (100vw - var(--panel-left, 72px)) / 2); z-index: 800; display: inline-flex; align-items: center; gap: var(--space-8);
  width: 208px; height: 48px; padding: 0 var(--space-16); box-sizing: border-box; transform: translateX(-50%); border: 1px solid var(--ui-background-color); border-radius: 24px;
  background: var(--primary-background-color); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); color: #9699a6; font: var(--font-text2-normal); cursor: pointer;
  transition: box-shadow var(--motion-productive-medium) var(--motion-timing-transition), border-color var(--motion-productive-medium); }
.ai-pill:hover { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ai-gradient) border-box; box-shadow: var(--ai-glow); }
.ai-pill[hidden] { display: none; }
.ai-pill .ai-sparkle { width: 16px; height: 16px; }
body:has(.bulk-bar:not([hidden])) .ai-pill, body:has(#item-panel[open]) .ai-pill, body:has(#ai-panel[open]) .ai-pill, body:has(#review-brief[open]) .ai-pill { display: none; }
@media (max-width: 767px) { .ai-pill { display: none; } }