/* App-local styles for Clients. * * The app is built from @ecosystem/design components; what lives here is the * page header with an action on it, the pipeline board, and the deal card — * three shapes no existing component covers. * * Per packages/design/README.md this file may consume semantic tokens but must * not redefine any .ds-* component, and must not reach for a primitive ramp or * a raw value. */ /* This app's accent lives in @ecosystem/design — css/app-themes.css, keyed on the `data-app` slug the shell puts on , along with every other app's. That is where a per-app accent is repointed now; see the header of that file for why they are derived from the logos rather than chosen. */ /* --- A page heading with one action on the end ---------------------------- */ .cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; } /* --- The pipeline --------------------------------------------------------- */ /* A column per stage, and the number of stages is a workspace's own business — they are rows, and a workspace may have three or nine. So the track is sized rather than counted, and the board scrolls sideways inside itself rather than making the page scroll. */ .cl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--ds-space-4); overflow-x: auto; padding-bottom: var(--ds-space-3); align-items: start; } .cl-column { background: var(--ds-surface-sunken); border-radius: var(--ds-radius-lg); padding: var(--ds-space-3); display: flex; flex-direction: column; gap: var(--ds-space-3); min-width: 0; } .cl-column__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2); font-weight: 600; min-width: 0; } .cl-deal { background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-3); display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; } /* The stage select sits inside a card that is already narrow, so it must be allowed to shrink rather than forcing the column wider. */ .cl-deal .ds-input { min-width: 0; font-size: var(--ds-text-sm); } /* --- Dragging a deal ------------------------------------------------------ */ /* Two states, and both are feedback rather than decoration: a card you have picked up should look picked up, and the column you are over should say it will accept the drop. Without the second, a drag that lands nowhere is indistinguishable from a drag that worked. The `