/* ============================================================================
* Canopy · Figtree webfont
* NOTE: the Canopy source ships self-hosted Figtree woff2 (400/500/600/700),
* but no binaries were included with the codebase, so this design system
* pulls Figtree from Google Fonts. Swap this @import for self-hosted
* @font-face rules when the woff2 files are available.
* ==========================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');
/* ============================================================================
* Canopy · Color tokens — CultureMonkey Platform (namespace cm-)
* Primitive ramps (green-tinted neutral, brand green, status, data-viz) +
* the SEMANTIC layer. Components read SEMANTIC vars only, never primitives.
* All colors measured vs #ffffff for WCAG 2.2 AA per pairing.
* ==========================================================================*/
:root {
/* primitive · neutral (green-tinted, never blue-black) */
--cm-neutral-0: #ffffff; /* app base */
--cm-neutral-25: #fbfcfb; /* sidebar */
--cm-neutral-50: #f7f9f8; /* wells, table header */
--cm-neutral-100: #eef1ef; /* chips, hover wash */
--cm-neutral-200: #e3e8e4; /* border default */
--cm-neutral-300: #d3d9d4; /* border strong, input border */
--cm-neutral-400: #b6c0b8; /* radio/checkbox rim */
--cm-neutral-500: #8f998f; /* placeholder / disabled only (never running text) */
--cm-neutral-600: #67726b; /* muted text — 5.0 AA — NOT #6f7a73 */
--cm-neutral-700: #4b554f; /* body text — 7.8 */
--cm-neutral-800: #38413b; /* strong body — 10.6 */
--cm-neutral-900: #19211c; /* headings — 16.5 */
/* primitive · green / accent (brand-anchored) */
--cm-green-50: #eef5ee; /* soft wash */
--cm-green-100: #d9eedd; /* selected wash, success soft */
--cm-green-500: #0eb969; /* brand mark, progress fills (non-text) */
--cm-green-600: #0a9a56; /* large icons, >=24px text — 3.6 */
--cm-green-700: #0c7a43; /* action.primary, solid buttons, links — 5.4 */
--cm-green-800: #0a5c36; /* accent text, active nav, focus ring — 8.1 */
--cm-green-900: #074d2a; /* key-line / pressed */
/* primitive · status (color + label/icon, never color alone) */
--cm-warning-icon: #b8851f;
--cm-warning-text: #7a4f0e; /* 7.1 */
--cm-warning-soft: #faf2dd;
--cm-danger-solid: #b42318; /* 6.6 */
--cm-danger-text: #99231a;
--cm-danger-soft: #fbeae8;
--cm-danger-soft-strong: #fdeee8; /* high-risk fill */
--cm-danger-text-strong: #93421f;
--cm-info-solid: #1a51b8; /* 7.2 */
--cm-info-text: #1a51b8;
--cm-info-soft: #e9f0fc;
--cm-violet: #6b5fc9; /* AI OUTPUT ONLY — never elsewhere */
--cm-violet-soft: #efedf9;
--cm-violet-text: #4f4399;
--cm-teal: #3f93a3; /* case stage: concluding */
--cm-teal-soft: #e8f2f4;
--cm-teal-text: #2a6470;
/* primitive · data-viz */
--cm-viz-diverge-neg2: #b85036;
--cm-viz-diverge-neg1: #f0d8c0;
--cm-viz-diverge-zero: #eef1ef;
--cm-viz-diverge-pos1: #cfe6d6;
--cm-viz-diverge-pos2: #0a7a4a;
--cm-viz-cat-1: #0a7a4a;
--cm-viz-cat-2: #3565c0;
--cm-viz-cat-3: #b8771f;
--cm-viz-cat-4: #6b5fc9;
--cm-viz-cat-5: #3f93a3;
--cm-viz-cat-6: #a84e6e;
/* SEMANTIC — the only layer components should read */
--cm-bg-app: var(--cm-neutral-0);
--cm-bg-sidebar: var(--cm-neutral-25);
--cm-bg-well: var(--cm-neutral-50);
--cm-bg-hover: var(--cm-neutral-100);
--cm-text-primary: var(--cm-neutral-900);
--cm-text-strong: var(--cm-neutral-800);
--cm-text-body: var(--cm-neutral-700);
--cm-text-muted: var(--cm-neutral-600); /* 5.0 AA — never #6f7a73 */
--cm-text-disabled: var(--cm-neutral-500);
--cm-text-accent: var(--cm-green-800);
--cm-text-on-accent:#ffffff;
--cm-border-default: var(--cm-neutral-200);
--cm-border-strong: var(--cm-neutral-300);
--cm-border-control: var(--cm-neutral-300);
--cm-rim: var(--cm-neutral-400);
/* tenant theming (white-label) overrides ONLY these ~6 vars */
--cm-action-primary: var(--cm-green-700);
--cm-action-primary-hover: #0a6b3b;
--cm-action-keyline: var(--cm-green-900);
--cm-action-pressed: var(--cm-green-900);
--cm-accent-wash: var(--cm-green-50);
--cm-accent-wash-selected: #f2f9f4;
/* success ALIASES the accent ramp (always pair with checkmark + copy) */
--cm-success-solid: var(--cm-green-700);
--cm-success-text: var(--cm-green-800);
--cm-success-soft: var(--cm-green-100);
/* focus ring — 2.5px green.800 + mandatory 2px offset gap, never suppressed */
--cm-focus-ring: var(--cm-green-800);
--cm-focus-ring-width: 2.5px;
--cm-focus-ring-offset: 2px;
}
/* ============================================================================
* Canopy · Typography tokens — Figtree only (400/500/600/700)
* No em-dash. No ALL-CAPS (tracked sentence-case eyebrows allowed).
* No monospace: IDs stay in Figtree with tabular-nums.
* Type scale exposed as size / line / weight / tracking triplets per role.
* ==========================================================================*/
:root {
--cm-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* weight system: 400 body · 500 nav/inactive · 600 headings/labels/buttons · 700 active */
--cm-weight-regular: 400;
--cm-weight-medium: 500;
--cm-weight-semibold: 600;
--cm-weight-bold: 700;
/* type scale — page heroes (rare) */
--cm-display-size: 31px; --cm-display-line: 38px; --cm-display-weight: 600; --cm-display-tracking: -0.018em;
/* employee page titles */
--cm-display-sm-size: 25px; --cm-display-sm-line: 32px; --cm-display-sm-weight: 600; --cm-display-sm-tracking: -0.015em;
/* admin page titles, case ID */
--cm-heading-lg-size: 21px; --cm-heading-lg-line: 28px; --cm-heading-lg-weight: 600; --cm-heading-lg-tracking: -0.01em;
/* card / modal titles */
--cm-heading-size: 17px; --cm-heading-line: 24px; --cm-heading-weight: 600;
/* employee reading text */
--cm-body-lg-size: 16px; --cm-body-lg-line: 24px; --cm-body-lg-weight: 400;
/* admin default, card descriptions */
--cm-body-size: 14px; --cm-body-line: 20px; --cm-body-weight: 400;
/* meta rows, compact tables */
--cm-body-sm-size: 13px; --cm-body-sm-line: 18px; --cm-body-sm-weight: 400;
/* field labels (sentence case) */
--cm-label-size: 13px; --cm-label-line: 16px; --cm-label-weight: 600;
/* numerals in tables / KPIs (tabular) */
--cm-data-size: 13px; --cm-data-line: 18px; --cm-data-weight: 500;
/* tracked eyebrow (group labels, sub-nav headers) — sentence case, never ALL-CAPS */
--cm-eyebrow-size: 11px; --cm-eyebrow-weight: 700; --cm-eyebrow-tracking: 0.06em;
}
/* ============================================================================
* Canopy · Spacing · Radius · Elevation tokens
* Spacing on a 4px base. Radius: no pill-everything. Elevation is border-first:
* a shadow means "floats above the page", never decoration on an in-flow card.
* ==========================================================================*/
:root {
/* spacing (4px base) */
--cm-space-1: 4px;
--cm-space-2: 8px;
--cm-space-3: 12px;
--cm-space-4: 16px; /* card pad compact */
--cm-space-6: 24px; /* card pad comfortable, section gaps */
--cm-space-8: 32px;
--cm-space-12: 48px;
/* radius */
--cm-radius-sm: 6px; /* badges, chips, kbd */
--cm-radius-md: 9px; /* buttons, inputs, selects */
--cm-radius-lg: 12px; /* cards, radio-cards, wells */
--cm-radius-xl: 16px; /* modals, drawers, page frames */
--cm-radius-full: 999px; /* avatars, radio dots only */
/* elevation (border-first) */
--cm-elevation-1: 0 1px 2px rgba(25, 33, 28, 0.06); /* raised: cards lifting slightly */
--cm-elevation-2: 0 4px 16px rgba(25, 33, 28, 0.12); /* overlay: dropdowns, toasts, tooltips */
--cm-elevation-3: 0 12px 32px rgba(25, 33, 28, 0.18); /* modal: modals, drawers, palette */
/* density: control + table-row heights per register */
--cm-control-comfortable: 48px; /* employee */
--cm-row-comfortable: 48px;
--cm-control-compact: 38px; /* admin */
--cm-row-compact: 36px;
}
/* ============================================================================
* Canopy · Motion tokens
* Motion is functional: state feedback only, 120-240ms. No entrance
* choreography or parallax. prefers-reduced-motion collapses durations to 0.
* ==========================================================================*/
:root {
--cm-duration-fast: 120ms; /* @kind other */
--cm-duration-base: 180ms; /* @kind other */
--cm-duration-slow: 240ms; /* @kind other */
--cm-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
--cm-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
:root {
--cm-duration-fast: 0ms; /* @kind other */
--cm-duration-base: 0ms; /* @kind other */
--cm-duration-slow: 0ms; /* @kind other */
}
}
/* ============================================================================
* Canopy · Icon glyph tokens
* CSS-mask glyphs: recolor via background-color (no inline SVG per instance).
* These cover the chrome glyphs the system draws itself (chevron, check).
* Product iconography is a stroked line-icon set — see readme ICONOGRAPHY.
* ==========================================================================*/
:root {
--cm-icon-chevron: url("data:image/svg+xml,"); /* @kind other */
--cm-icon-chevron-muted: url("data:image/svg+xml,"); /* @kind other */
--cm-icon-check: url("data:image/svg+xml,"); /* @kind other */
}
/* ============================================================================
* Canopy — CultureMonkey Platform design system (namespace cm-)
* Vendored from the design-system source into this app's asset pipeline so
* the app is self-contained at runtime (no link to the design-system
* checkout). Token files below are copied verbatim from `tokens/`.
*
* Font substitution flag (per the source's own SKILL.md): the design system
* self-hosts Figtree woff2 in its original codebase, but shipped no font
* binaries, so tokens/fonts.css pulls Figtree from Google Fonts instead.
* That is intentionally preserved as-is here — swap in self-hosted
* @font-face rules if/when offline operation is required.
*
* Sprockets (not browser @import) concatenates these at asset-compile time.
* ==========================================================================*/
/*
*/
/*
* Adoption Engine — restyled onto Canopy, the CultureMonkey Platform design
* system. Canopy tokens are vendored under canopy/ and required first;
* everything below reads the SEMANTIC layer only (--cm-text-muted,
* --cm-action-primary, --cm-border-default, ...), never a primitive ramp
* step or a raw hex value. Register: admin — compact desktop, 13-14px type,
* 36-40px controls, a 56px dark top nav (see "App shell" below) with an
* optional 48px breadcrumb sub-bar, full-width content beneath.
*
*/
/* ---------------------------------------------------------------------
Light re-skin (2026-08) — "make the background to white, the dark is
not good" (user, verbatim). Reverses the dark reskin two commits back
(d35fa93 tokens, 36a6777 charts, b5b7d0d sign-in) onto Canopy's light
semantic layer. This is the SAME override point those commits used for
the accent/dark surface stack, just pointed back at light values — the
app bar/menus/dialog/palette/tabs architecture is untouched, only what
its tokens resolve to changes again.
Brand hue is still #1CA3DE. It cannot itself carry text or bound a
control — 2.86:1 on white, under both the 4.5:1 text floor and the
3.0:1 UI-component floor — so it's used only where a large filled area
carries the meaning (chart series, meter fills, the busiest heatmap
cell); text, actions, focus and key-lines take the darkened steps:
500 #1ca3de brand, large fills only 2.86:1 (never text)
700 #1475a0 actions, white label on it 5.14:1
800 #126c93 accent text, focus ring 5.85:1
900 #0f5a7a key-lines, pressed 7.60:1
The three-tier dark surface stack (canvas/raised/elevated) collapses
back to two: a tinted canvas behind the content, and one flat white for
everything that sits on it — cards, tables AND chrome alike. --cm-bg-
elevated stays defined only because navigation.css's app bar/menu/
dialog/palette rules already read it (untouched, per the brief); on
light it's just an alias for the same white every card uses — the
dark build's "chrome one step lighter than cards" distinction doesn't
exist here, Canopy never had it. Warning/danger/info tokens are no
longer overridden at all: Canopy's own vendored ones
(canopy/tokens/colors.css) are already calibrated for a white ground
and were only ever shadowed by the dark reskin's lightened copies.
Every pairing below is COMPUTED, not eyeballed — WCAG relative-
luminance contrast ratio, script at
/private/tmp/claude-501/-Users-siva-work-git-culturemonkey/
276a5372-16da-4aea-9a19-11b647f8fd3c/scratchpad/contrast.js. Full
report re-run against every surface a token actually appears on:
text-primary #19211c on white 16.46:1
text-primary #19211c on canvas #f1f7fa 15.23:1
text-strong #38413b on white 10.57:1
text-body #4b554f on white/canvas 7.74 / 7.16 : 1
text-muted #67726b on white/canvas 5.00 / 4.63 : 1
text-accent/focus-ring #126c93 on white/canvas/accent-wash
5.85 / 5.41 / 5.41 : 1
white on action-primary/-hover/-pressed (700/800/900)
5.14 / 5.85 / 7.60 : 1
warning-text #7a4f0e on white/warning-soft 7.11 / 6.37 : 1
danger-text #99231a on white/danger-soft 8.05 / 6.91 : 1
danger-text-strong #93421f on danger-soft-strong 6.11:1
white on danger-solid #b42318 6.57:1
info-text #1a51b8 on info-soft/white 6.29 / 7.21 : 1
border-default #e3e8e4 on white (decorative, hairline) 1.24:1
Decorative-only pairings (hairlines, disabled text) are deliberately
sub-AA, same "borders don't need to pop" logic that's always applied
here — never a text/UI pairing. */
:root {
--cm-brand-500: #1ca3de;
--cm-brand-700: #1475a0;
--cm-brand-800: #126c93;
--cm-brand-900: #0f5a7a;
--cm-action-primary: var(--cm-brand-700);
--cm-action-primary-hover: var(--cm-brand-800);
--cm-action-keyline: var(--cm-brand-900);
--cm-action-pressed: var(--cm-brand-900);
--cm-text-accent: var(--cm-brand-800);
--cm-focus-ring: var(--cm-brand-800);
--cm-accent-wash: #edf8fc;
--cm-accent-wash-selected: #e4f4fb;
/* Deliberate deviation from Canopy's own hard rule ("success = green").
The user was explicit: "not green should be there. The whole theme is
Blue." Canopy's success tokens (--cm-success-solid/-text/-soft) are
ALIASES of the green ramp at the source (canopy/tokens/colors.css) —
overriding them here, the same override point tenant theming already
uses for --cm-action-*, is what turns every consumer of "success"
(status-chip--active, flash--notice, health-badge--healthy, the good
step of the score meter) blue instead of touching each component
individually. Warning stays amber and critical stays red — those come
straight from Canopy's own vendored tokens now (already light-
calibrated, see the file-header contrast table) and are untouched. */
--cm-success-solid: var(--cm-brand-700);
--cm-success-text: var(--cm-brand-800);
--cm-success-soft: var(--cm-accent-wash);
/* Surface hierarchy — "lot of whites are there" (user, from the original
brief; still true). --cm-bg-app stays Canopy's white (cards, tiles and
tables keep it, so their text keeps every documented AA margin), but
the page CANVAS behind those cards, the sidebar rail and every well/
table-header sit on a tinted blue rather than blending into the same
white as the content floating on them. Checked against --cm-text-muted
(the tightest-margin text color in the app, 5.0:1 on pure white) and
keeps >=4.6:1: bg-canvas/-well/-sidebar #f1f7fa vs muted 4.63:1. */
--cm-bg-canvas: #f1f7fa;
--cm-bg-sidebar: #f1f7fa;
--cm-bg-well: #f1f7fa;
/* The dark reskin's three-tier stack added this token so chrome (app
bar/menus/dialog/palette) could sit one step lighter than ordinary
cards. On light there's no such distinction — Canopy's kit never had
one — so this is just an alias for the same white --cm-bg-app
resolves to (Canopy's own --cm-neutral-0). Kept defined, not removed,
because navigation.css's chrome rules read it directly and that
structure is untouched by this re-skin. */
--cm-bg-elevated: var(--cm-neutral-0);
/* A floating chip (the slide-over-trigger tooltip) reads best darker
than any surface it sits over, the same convention most UIs use for a
tooltip regardless of the app's own theme — this was true before the
dark reskin too (it borrowed the same near-black chip), just under a
token name that no longer implies a whole dark surface stack. */
--cm-tooltip-bg: #0c1216;
--cm-tooltip-text: #eef4f7;
/* Sequential heatmap scale, re-hued to the accent. Canopy ships a
terracotta -> green DIVERGING ramp for signed benchmarks; a heatmap of
raw event counts has no negative half, so this is a single-hue
sequential scale from "no activity" to "busiest day". */
--cm-viz-seq-100: #eef1f4;
--cm-viz-seq-150: #e3eef4;
--cm-viz-seq-200: #d7eaf3;
--cm-viz-seq-250: #cce7f3;
--cm-viz-seq-300: #c0e3f2;
--cm-viz-seq-350: #b5e0f2;
--cm-viz-seq-400: #a9dcf1;
--cm-viz-seq-450: #90c9e1;
--cm-viz-seq-500: #77b7d2;
--cm-viz-seq-550: #5ea4c2;
--cm-viz-seq-600: #4491b2;
--cm-viz-seq-650: #2b7fa3;
--cm-viz-seq-700: #126c93;
}
/* ---------------------------------------------------------------------
Base
--------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--cm-bg-canvas);
color: var(--cm-text-body);
font-family: var(--cm-font-family);
font-size: var(--cm-body-size);
line-height: var(--cm-body-line);
}
/* `color-scheme` tells the browser this page is light, so native controls
(checkboxes, radios, scrollbars, the date-input picker chrome) draw
from its light built-in palette rather than guessing from the OS
setting; `accent-color` then re-hues the checked/selected state to the
theme's own accent instead of the browser default blue. */
html { color-scheme: light; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cm-action-primary); }
a { color: var(--cm-text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: var(--cm-weight-semibold); margin: 0 0 0.4em; color: var(--cm-text-primary); }
h1 { font-size: var(--cm-heading-lg-size); line-height: var(--cm-heading-lg-line); letter-spacing: var(--cm-heading-lg-tracking); }
h2 { font-size: var(--cm-heading-size); line-height: var(--cm-heading-line); }
h3 { font-size: var(--cm-heading-size); line-height: var(--cm-heading-line); color: var(--cm-text-primary); }
h4 { font-size: var(--cm-body-size); line-height: var(--cm-body-line); color: var(--cm-text-strong); }
p { margin: 0 0 0.75em; color: var(--cm-text-body); }
table { font-variant-numeric: tabular-nums; }
code { font-family: var(--cm-font-family); font-variant-numeric: tabular-nums; background: var(--cm-bg-well); border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm); padding: 1px 6px; font-size: 0.92em; }
/* Sentence-case tracked eyebrow — the ONE permitted exception to "never
ALL-CAPS". Authored per-string in sentence case; letter-spacing (not
text-transform) gives it the "label" weight so we never risk
accidentally capitalising "and". */
.eyebrow {
font-size: var(--cm-eyebrow-size);
font-weight: var(--cm-eyebrow-weight);
letter-spacing: var(--cm-eyebrow-tracking);
color: var(--cm-text-muted);
}
/* Focus ring — signature, never suppressed. 2.5px solid + mandatory 2px
offset gap so the ring never touches an accent control or selected card. */
:focus-visible {
outline: var(--cm-focus-ring-width) solid var(--cm-focus-ring);
outline-offset: var(--cm-focus-ring-offset);
border-radius: var(--cm-radius-sm);
}
.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;
}
/* Inline stroked icon — recolors via currentColor, sized by context. */
.cm-icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.cm-icon--sm { width: 14px; height: 14px; }
.cm-icon--md { width: 16px; height: 16px; }
.cm-icon--lg { width: 20px; height: 20px; }
.cm-icon--flip { transform: scaleX(-1); }
/* No left rail left to share width with — the content column now runs the
full viewport width (minus side padding), so the wide tenant table and
other data-dense pages get real breathing room instead of being capped
at the old 1400px meant to sit beside a 248px sidebar. 1600px still caps
line length on ultra-wide monitors for the handful of prose blocks
(auth screen aside, empty states) that aren't tables/grids. */
.main__content {
padding: 24px 28px 60px;
max-width: 1600px;
width: 100%;
}
.page-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.page-header__meta { color: var(--cm-text-muted); font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Item 1's "one-click way to include the rest" — a plain, always-visible
text link (not hidden behind the filter bar) sitting right next to the
count it explains. */
.inline-clear-link { color: var(--cm-text-accent); font-weight: var(--cm-weight-medium); }
/* Tenant list's prominent "needs attention" toggle — see
tenants_controller#index and tenants/index.html.erb. Warning-amber, same
pairing the risk badges already use, so it reads as a severity signal
rather than an ordinary filter chip; `.is-active` (the filter is on)
switches to a solid fill, the same "pressed" treatment the view-toggle
segmented control uses elsewhere on this page. */
.attention-toggle {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: 999px;
border: 1px solid var(--cm-warning-icon); background: var(--cm-warning-soft); color: var(--cm-warning-text);
font-size: 13px; font-weight: var(--cm-weight-medium); text-decoration: none; white-space: nowrap;
}
.attention-toggle:hover { border-color: var(--cm-warning-text); }
/* is-active fill uses --cm-warning-text (7.1:1 white-on-fill, page-
independent — Canopy's own vendored value, not overridden here). */
.attention-toggle.is-active { background: var(--cm-warning-text); color: #fff; border-color: var(--cm-warning-text); }
.attention-toggle .cm-icon { flex-shrink: 0; }
/* ---------------------------------------------------------------------
Flash banners — Alert pattern, always icon + copy
--------------------------------------------------------------------- */
.flash {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: var(--cm-radius-md);
margin: 0 0 18px;
font-size: 13.5px;
line-height: 1.5;
border: 1px solid;
}
/* Border colors are hand-picked, not tokens — a hairline one step more
saturated than each banner's own soft fill. --cm-success-soft's border
used to be a hardcoded leftover from Canopy's green ramp (#d9eedd) — the
one stray green pixel in the whole app; this is a blue-tinted hairline
instead, matching the "success is blue here" override above it. */
.flash--notice { background: var(--cm-success-soft); border-color: #c8e6f2; color: var(--cm-success-text); }
.flash--alert { background: var(--cm-danger-soft); border-color: #f0cdc8; color: var(--cm-danger-text); }
.flash .cm-icon { margin-top: 1px; }
/* ---------------------------------------------------------------------
Cards — border-first elevation. 1px border, radius-lg, NO shadow.
--------------------------------------------------------------------- */
.card {
background: var(--cm-bg-app);
border: 1px solid var(--cm-border-default);
border-radius: var(--cm-radius-lg);
padding: var(--cm-space-6);
margin-bottom: var(--cm-space-6);
}
.card__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--cm-space-4); flex-wrap: wrap; }
.card__title h3 { margin: 0; }
.grid { display: grid; gap: var(--cm-space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* ---------------------------------------------------------------------
Stat tiles — label / value / delta / sparkline. Elevation-1 ("raised":
a card lifting slightly, per Canopy) distinguishes a KPI tile from a
flat in-flow table — it's a distinct, glanceable surface, not decor.
The value is set well above the label (30px vs. an 11px tracked
eyebrow) so the number dominates on sight, per the dataviz stat-tile
contract ("the number should dominate its label by a wide margin").
--------------------------------------------------------------------- */
.stat-tile {
background: var(--cm-bg-app);
border: 1px solid var(--cm-border-default);
border-radius: var(--cm-radius-lg);
padding: 16px 18px 18px;
box-shadow: var(--cm-elevation-1);
}
.stat-tile__label {
font-size: var(--cm-eyebrow-size);
font-weight: var(--cm-eyebrow-weight);
letter-spacing: var(--cm-eyebrow-tracking);
color: var(--cm-text-muted);
margin-bottom: 9px;
}
.stat-tile__value { font-size: 30px; font-weight: var(--cm-weight-semibold); color: var(--cm-text-primary); line-height: 1.1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
/* Pre-existing overflow, surfaced while checking every tile on a dark
surface: a route-path identifier ("engines/candidates/..._managers#index")
is one unbroken string with no spaces, so it can't wrap at all without
this and instead blows out of the tile and the KPI grid. Not a color
fix, but this pass is the one that noticed it. */
.stat-tile__value--sm { font-size: 18px; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.stat-tile { min-width: 0; }
/* Item 9's "Never adopted" KPI — same warning-amber basis as the risk
badges, used sparingly: only when the count is actually positive (see
menus/index.html.erb), never a permanent color. */
.stat-tile__value--warning { color: var(--cm-warning-text); }
/* The dropped-events counter on /ops (item 2 of the throughput fix) — same
danger text token used for the churn/bus-factor callouts. Only applied
when the count is actually positive; see ops/show.html.erb. */
.stat-tile__value--danger { color: var(--cm-danger-text); }
.stat-tile__unit { font-size: 14px; color: var(--cm-text-muted); font-weight: var(--cm-weight-medium); letter-spacing: normal; }
.stat-tile__sparkline { margin-top: 8px; height: 36px; }
/* ---------------------------------------------------------------------
Meter — adoption score track
--------------------------------------------------------------------- */
.meter { height: 8px; border-radius: 4px; background: var(--cm-neutral-200); overflow: hidden; }
/* Breadth column's inline meter, sized to sit beside the "83%" text rather
than under it — moved out of a per-row inline style into a class so it's
one declaration to maintain, not one per