instead of the in
the contract above still gets two lines. Inline, the title and the message
ran together into "Nobody matches thatTry a wider date range" — the margins
below do nothing on an inline box either, so there was not even a space
between them. Both Contacts and Users build these with spans. */
.ds-state-title {
display: block;
font-size: var(--ds-font-size-small);
font-weight: var(--ds-font-weight-semibold);
color: var(--ds-text-secondary);
margin: 0 0 var(--ds-space-xs);
}
.ds-state-msg {
display: block;
font-size: var(--ds-font-size-dense);
color: var(--ds-text-tertiary);
margin: 0 0 var(--ds-space-md);
/* A sentence naming four filter conditions needs a measure. */
max-width: 56ch;
margin-left: auto;
margin-right: auto;
line-height: 1.55;
}
.ds-state-action {
background: var(--ds-color-brand);
color: var(--ds-text-on-brand);
border: 1px solid var(--ds-color-brand);
padding: 7px 14px;
border-radius: var(--ds-radius-sm);
font-family: var(--ds-font-family);
font-size: var(--ds-font-size-label);
font-weight: var(--ds-font-weight-semibold);
cursor: pointer;
}
.ds-state-action:focus-visible {
outline: 2px solid var(--ds-color-brand);
outline-offset: 2px;
}
.ds-state-action.is-secondary {
background: var(--ds-bg-card);
color: var(--ds-text-secondary);
border-color: var(--ds-border-default);
}
.ds-state-action + .ds-state-action { margin-left: var(--ds-space-sm); }
/* ─── Meter ──────────────────────────────────────────────────────────────
One horizontal bar for the whole app. Replaces .pc-target-bar,
.cd-target-bar and .pp-progress-bar, which were three near-identical
copies (54×5px, pill track, tabular-nums 11px value) that had already
drifted apart in the two ways that matter:
1. GREEN MEANT TWO THINGS. On print pipeline green meant "some steps are
done"; on customers it meant "meeting or beating target". Adjacent
pages, same pixels, different rule — so a rep learns the wrong one.
Resolved by splitting the two ideas:
.ds-meter attainment against a target. Judged, so it
carries colour: behind / on track / met.
.ds-meter-steps position in a sequence. NOT judged — 4 of 9
steps done is neither good nor bad — so it is
always neutral and never green.
Green now means exactly one thing app-wide: a target is being met.
2. A MET TARGET RENDERED DIFFERENTLY on the list and the detail page,
because the list also filled the TRACK green. Dropped: at 100% the
fill covers the track anyway, so the override only ever showed up as
an inconsistency.
Also fixes a latent clipping bug in all three originals: the pace notch
was 9px tall inside a 5px track with `overflow: hidden`, so it rendered
flush and 4px shorter than intended. The track now clips the fill only;
the notch sits in an unclipped positioned wrapper.
Width is a variable because the customers/pipeline tables want a fixed
54px column and the customer-details grid wants to fill its cell.
Markup — percentages ride in as custom properties, so no inline
`width:` on a child and no second nested span:
38%, behind
The state word in .ds-sr-only is not optional. Without it the difference
between "behind" and "on track" is carried by hue alone, which a screen
reader cannot announce and a red-green colourblind user cannot see. */
.ds-meter {
display: flex;
align-items: center;
gap: var(--ds-space-sm);
white-space: nowrap;
/* Neutral until a state class says otherwise. */
--ds-meter-color: var(--ds-status-neutral);
}
.ds-meter-bar {
position: relative;
display: block;
width: var(--ds-meter-width, 54px);
flex-shrink: 0;
}
.ds-meter-track {
display: block;
height: 5px;
border-radius: var(--ds-radius-pill);
background: var(--ds-border-default);
overflow: hidden;
}
.ds-meter-track::before {
content: "";
display: block;
height: 100%;
width: var(--ds-meter-fill, 0%);
border-radius: var(--ds-radius-pill);
background: var(--ds-meter-color);
}
/* Where the customer should be by now. Annual only: part-way through a
calendar month is not something a rep can act on. */
.ds-meter-pace {
position: absolute;
top: -2px;
left: var(--ds-meter-pace, 0%);
width: 1px;
height: 9px;
background: var(--ds-text-tertiary);
opacity: 0.55;
}
/* Attainment states. Success is reserved for "target met or beaten". */
.ds-meter.is-behind { --ds-meter-color: var(--ds-status-danger-text); }
.ds-meter.is-ontrack,
.ds-meter.is-done { --ds-meter-color: var(--ds-status-success); }
/* Under target with no pace marker to judge against — in progress, not
failing. Colouring a part-finished month red put 98% with two days left
into alarm red. */
.ds-meter.is-progress { --ds-meter-color: var(--ds-status-neutral); }
/* Sequence progress. Deliberately has no success state. */
.ds-meter-steps { --ds-meter-color: var(--ds-status-neutral); }
.ds-meter > em {
font-style: normal;
font-size: var(--ds-font-size-micro);
color: var(--ds-text-tertiary);
font-variant-numeric: tabular-nums;
}
.ds-meter.is-behind > em { color: var(--ds-status-danger-text); }
.ds-meter.is-ontrack > em,
.ds-meter.is-done > em { color: var(--ds-status-success-text); }
/* ─── Screen-reader-only text ─── */
.ds-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =====================================================
TOUCH & NARROW VIEWPORTS
-----------------------------------------------------
The shell is built for a dense desktop table, which is where most of the
time is spent. But per the design context these pages are also opened by
reps on phones in vehicles and warehouses, and the shell previously had no
rules for either case: `design-system.css` carried a single media query
(prefers-reduced-motion on .ds-spin) and nothing else.
===================================================== */
/* Coarse pointer = finger. Compact 28-32px controls are fine for a mouse and
too small for a thumb, so the targets grow only where a thumb is actually
being used. Keeping this on pointer type rather than viewport width means a
touchscreen laptop gets big targets and a narrow desktop window does not. */
@media (pointer: coarse) {
.ds-filter-btn,
.ds-clear,
.ds-btn-toolbar {
min-height: 44px;
padding-top: var(--ds-space-sm);
padding-bottom: var(--ds-space-sm);
}
.ds-segmented > button { min-height: 44px; }
.ds-popover-options label { padding: var(--ds-space-md) var(--ds-space-sm); }
.ds-split-dismiss { min-width: 36px; justify-content: center; }
/* Rows are the primary tap target on a list page. */
.ds-table tbody td { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 768px) {
/* Header actions drop under the title rather than squeezing it. */
.ds-page-header-row {
flex-direction: column;
align-items: stretch;
gap: var(--ds-space-md);
}
.ds-header-actions { flex-wrap: wrap; }
.ds-search { min-width: 0; flex: 1 1 100%; }
/* A wrapped row of filter buttons needs its own breathing room, otherwise
two rows of chips read as one block. */
.ds-filter-bar { gap: var(--ds-space-sm) var(--ds-space-xs); }
/* Dividers are meaningless once the bar wraps to three lines. */
.ds-filter-divider { display: none; }
.ds-popover {
max-width: calc(100vw - 24px);
min-width: 0;
}
/* Wide tables scroll horizontally on phones. Give the scroll a visible
edge so it is discoverable rather than something you find by accident. */
.ds-table-wrap.is-scrollable {
-webkit-overflow-scrolling: touch;
background-image: linear-gradient(to right, rgba(0, 38, 62, 0.06), transparent 12px);
background-repeat: no-repeat;
background-attachment: local;
}
}
/* =====================================================
SKELETON LOADING
-----------------------------------------------------
Promoted Jul 2026. The gradient and the keyframes existed independently in
eight page stylesheets. Sizing stays page-local — a skeleton should match the
shape of the thing it stands in for — but the shimmer itself is one thing.
===================================================== */
@keyframes ds-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ds-skel {
display: block;
background: var(--ds-skel-gradient);
background-size: 200% 100%;
border-radius: var(--ds-radius-xs);
animation: ds-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ds-skel { animation: none; }
}
/* =====================================================
SELECT
-----------------------------------------------------
Three pages had grown their own: .pc-per-page select, .pp-select-group
select, .d2-rep-select. Same control, same job.
===================================================== */
.ds-select {
font-family: var(--ds-font-family);
font-size: var(--ds-font-size-label);
font-weight: var(--ds-font-weight-semibold);
padding: 6px 10px;
min-height: 32px;
border: 1px solid var(--ds-border-default);
border-radius: var(--ds-radius-sm);
background: var(--ds-bg-card);
color: var(--ds-text-primary);
cursor: pointer;
}
.ds-select:focus-visible {
outline: 2px solid var(--ds-color-brand);
outline-offset: 1px;
}
/* Wider control for long option labels (rep names carrying a dollar figure). */
.ds-select-wide { max-width: 320px; }
@media (pointer: coarse) {
.ds-select { min-height: 44px; }
}
/* =====================================================
CHARTS
-----------------------------------------------------
Promoted Jul 2026 from .cd-chart-* / .cd-bar-* on the customer detail page,
which was the only charting in the app and was built with real care: an
oversized invisible hit target per bar, a per-bar role="img" with a full
aria-label, keyboard focus, and the year carried on January when a range
spans more than one.
NO CHART LIBRARY, deliberately. Chart.js is ~200KB and ApexCharts ~500KB
minified, both render to