/* ===================================================================== CADENCE — Classification badge (the ONE shared rule) Mission: unify-document-badge-idiom-01KYGETY / WP01 ===================================================================== WHAT THIS IS ------------ The document classification badge: the bare three-letter CDX classifier code (SCV, ORQ, RCD, PAC, …) rendered as a small solid pill, with its full label carried in the title attribute. The descriptor behind it comes from one helper — EntityAttachments.classificationPill (js/entity_attachments.js) — resolving the code against the single shared vocabulary in window.CodeLegend. WHY IT IS ITS OWN FILE ---------------------- Three surfaces render this badge (entity drawer, Tracker Documents matrix, Lifecycle view) and each used to carry its OWN copy of the colouring, in three different files. The copies silently DRIFTED: - js/entity_drawer.css background: var(--color-primary-soft) ...with NO fallback - index.html (inline) background: var(--color-primary-soft, #eef2ff) - js/lifecycle/lifecycle.css background: var(--color-primary-soft, #eef2ff) `--color-primary-soft` is defined NOWHERE in this repository, so the drawer's badge rendered with a TRANSPARENT background while the other two fell back to the #eef2ff tint — and the drawer's own comment claimed an AA contrast ratio against a tint that was never applied. Nobody noticed, because there was no single place to look. A named, single-purpose file makes "change the classification badge's colouring in exactly one place" both TRUE and DISCOVERABLE. The three superseded bodies are deleted, not edited: a body that survives with only its colours removed is still a second definition and still a place to drift from. Note in particular that `.lifecycle-view .lc-doc__classpill` has specificity (0,2,0) — a surviving Lifecycle body would WIN over this rule and leave one surface tinted while two went solid. COLOURING (charter DIR-001.8 — the Partner Portal is the reference) ------------------------------------------------------------------- Solid white on indigo-700. Measured with UIContrast.contrastRatio( '#4338ca', '#ffffff') = 7.9031 → 7.90:1, well over the AA floor of 4.5:1. Measured, not read off this stylesheet. The var() fallback is MANDATORY. A bare var() on an undefined custom property yields `transparent`, which is precisely the live bug this file replaces. The 1px border is KEPT but RECOLOURED to the ground, so it is invisible. The old border was indigo-500 (--color-primary) against an indigo-700 ground — that was the seam, and it is gone. The border itself stays for one reason only: FOOTPRINT. Measured (getComputedStyle + getBoundingClientRect, all three surfaces): - HEIGHT is unchanged either way: 15px. index.html:105 declares `* { margin: 0; padding: 0; box-sizing: border-box; }`, so the border sits INSIDE the fixed 15px box. `box-sizing: border-box` is restated below so this rule does not depend on that reset surviving. - WIDTH would shrink by exactly 2px per badge if the border were dropped (32.28px → 30.28px for a three-letter code). border-box does NOT neutralise this: the box is shrink-to-fit, and a 3-character code at 9px/700 plus 10px of padding measures ~30px, which EXCEEDS `min-width: 24px` — so width is content-driven and the border adds to it. Only a box actually pinned at its min-width would be width-neutral. A 2px narrowing is invisible and could not wrap text or move a row, but keeping an invisible border costs nothing and makes NFR-002 ("bounding box identical to today's, every surface") hold literally instead of by argument. Recorded because the rule this file replaces carried a contrast claim about a background that was never applied — an unverified comment is how that started. GEOMETRY — unchanged on every surface ------------------------------------- All three old bodies already declared the same min-width / height / padding / font-size / font-weight / line-height / border-radius, so unifying the colouring moves no row height and no column width. Two deliberate reconciliations, recorded here so a reviewer does not read them as unrequested changes: - letter-spacing settles at .02em (Tracker and Lifecycle already used it). The drawer moves from .04em, measured at 0.55px narrower across a three-character code (its total width delta is therefore 2.55px, against 2.00px on the other two surfaces). - The drawer's `text-transform: uppercase` is dropped as a proven no-op: codes are uppercase at source (TAG_RE = /^CDX-([A-Z]{3})__/). Two declarations are ADDITIONS for the Tracker surface, which declared neither: `box-sizing: border-box` (already supplied there by the global reset) and `flex-shrink: 0` (inert — Tracker chips sit in a , not a flex container). SCOPE ----- Only the classification badge. No other pill (invoice, paid, status, file-type) is restyled. The Partner Portal (partner.html, js/portal/**) is the reference, not a target — partner.html links no stylesheet, so this file cannot reach it. Class names are NOT renamed: they are emitted from six JavaScript call sites and this mission changes zero JavaScript files. An UNCLASSIFIED document renders NO badge element at all — never an empty or neutral pill. That is guarded in JS (classificationPill returns null, with a null-guard at every call site); there is deliberately no "empty badge" styling here to fall back on. ===================================================================== */ .entity-drawer__doc-classpill, .tracker-legend__classpill, .lifecycle-view .lc-doc__classpill { /* Colouring — the whole point of this file */ background: var(--color-primary-dark, #4338ca); /* indigo-700 */ color: #ffffff; /* 7.90:1 (measured) */ /* Border KEPT, but coloured as the ground so it is invisible. Its only job is to preserve the badge's width: the box is shrink-to-fit and a 3-letter code exceeds min-width, so dropping the border would narrow every badge by exactly 2px. Invisible either way; this way NFR-002 ("bounding box identical to today's") holds literally rather than by argument. The old indigo-500 border is gone — that was the seam. */ border: 1px solid var(--color-primary-dark, #4338ca); /* PRINT — load-bearing, not cosmetic. Browsers drop backgrounds when printing unless told otherwise. Because this badge is now WHITE text on a SOLID ground, dropping the background renders it white-on-white and the code VANISHES from the page. The tinted styling this rule replaced degraded gracefully (dark text on a pale ground stayed legible with the background dropped); a solid ground does not, so the graceful degradation was lost with it. These badges genuinely are printed: js/lifecycle/lifecycle.css:830 carries a deliberate @media print block for the Lifecycle document list, and js/full_report/* prints too. */ -webkit-print-color-adjust: exact; /* Safari, older Chrome */ print-color-adjust: exact; /* Geometry — the values all three surfaces already shared */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; min-width: 24px; height: 15px; padding: 0 5px; font-size: 9px; font-weight: 700; line-height: 1; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; cursor: default; }