/* ============================================================= barrio_npm_prototype — Project ID chips beside project titles Editors identify projects by code (26PHD07, 21-24RP01), so the code is rendered beside every project title as a small monospace chip. Added 2026-08-22 alongside making the codes searchable — see documentation/project-id-title-prefix-plan.md. ⚠ HIDDEN BY DEFAULT, AND THAT IS THE WHOLE CACHING DESIGN. The chip markup is emitted for EVERY visitor — anonymous included — and revealed only for users carrying `np-can-edit-projects` on (added by barrio_npm_prototype_preprocess_html for anyone holding `edit any project content`). So the HTML is byte-identical no matter who asks for it. That matters because both page caches are on: page_cache serves anonymous for 900s, dynamic_page_cache serves authenticated. Had the chip been built conditionally in PHP, every render containing a project title would have needed a user.permissions cache context — across four builders, node canonicals, several views and the search preprocess — and missing one fails silently in both directions: a reader seeing internal codes, or an editor seeing none and reporting the feature broken. Hiding with CSS moves that to a SINGLE declared context on the page itself. No secret is exposed by shipping the code in anonymous markup: 228 of 597 projects are already published AT /project/. Do NOT reimplement this as a PHP conditional without reading §2 of the plan first. ============================================================= */ .np-pid { display: none; } /* The reveal. Everything below only ever applies inside this scope. */ body.np-can-edit-projects .np-pid { display: inline; font-family: var(--bs-font-monospace, ui-monospace, "SF Mono", Menlo, Consolas, monospace); /* Steps down hard from the title it prefixes — the title stays the scannable thing, the code is a lookup handle sitting beside it. */ font-size: .78em; font-weight: 600 !important; font-style: normal; letter-spacing: .02em; color: #6c675f; background: #f1ece1; border-radius: 3px; padding: 1px 5px; margin-right: 6px; /* Codes must never wrap mid-token — a broken code is unscannable. */ white-space: nowrap; vertical-align: baseline; } /* typography.css sets `h1, h2, … { font-weight: 100 !important }`, which would otherwise render the chip hairline inside every heading it sits in. Hence the !important above — the documented escape hatch, see CLAUDE.md's typography gotcha. */ /* On the report card the title is large italic; keep the chip upright and slightly smaller so it reads as metadata rather than as the first word of the title. */ body.np-can-edit-projects .np-report-card-title .np-pid { font-size: .68em; } /* The person modal's compact list runs at 13px — the chip would otherwise crowd a two-line title. */ body.np-can-edit-projects .np-profile-related-project-title .np-pid { font-size: .82em; padding: 0 4px; margin-right: 4px; }