refactor(web): consolidate CSS ownership

[bipolarrr]

Summary

• give every live selector group one component/feature owner
• colocate base, dark-theme, and responsive rules in that owner
• remove the central admin.css, admin-forms.css, and responsive/mobile.css cascade dependencies
• make index.css import-only and tokens.css variable/theme-token-only
• delete verified legacy/dead home, archive, project, modal, and admin CSS

Closes #39.

Root cause

The original CSS architecture mixed component ownership with import-order ownership. The single entry point loaded admin-forms.css before admin.css and loaded responsive/mobile.css last, while component dark rules also lived in tokens.css. Equal-specificity declarations therefore depended on global source order, and higher-specificity dark selectors sometimes overrode later mobile rules.

The refactor preserves those existing computed winners explicitly in the relevant owner instead of relying on unrelated files loading later. Examples include the mobile form padding, 360px two-column archive grid, dark mobile archive search background, dark admin sidebar states, and the currently ineffective admin-import result accent.

Ownership map

Before	After owner
admin shell/header/sidebar mixed in admin.css/tokens/mobile	admin-layout.css
admin cards/tables/mobile visibility mixed in admin.css/mobile	admin-collections.css
projects filters/search/bulk/pagination/cards	admin-projects.css
admin years/exhibition rows/posters	admin-exhibitions.css
import dropzone/result/actions	admin-import.css
shared form/select/file-field rules	components/forms.css
editor member/asset/status/meta rules	admin-project-editor.css
submission member/poster/file-preview rules	project-submission.css
upload widget rules spread across admin/forms/mobile	upload.css
badges/errors/mock role switcher	components/feedback.css
Years/archive base/dark/mobile and card reset	archive.css
project detail/public meta/play/mobile	project.css
modal and preview-modal only	project-modal.css
current home header/year-card behavior	home-archive-landing.css
shell/container/bottom-nav/home main padding	site-shell.css

index.css now contains 25 imports and no declarations. tokens.css contains only 31 custom properties plus color-scheme. Cross-file selector ownership duplicates are zero.

Removed duplication and dead CSS

• removed responsive/mobile.css after moving every live override to its owner
• removed the overlapping admin.css and admin-forms.css ownership model
• removed all !important; the dropzone dashed border and member editor sizing now win through explicit owner-local selectors/order
• removed verified-dead admin filter-count, legacy hero/project-grid/video-container/modal-gallery rules
• removed legacy home-core.css, home-hero.css, home-sections.css, home-showcase.css, home-theme.css, and their home.css aggregator after retaining the live landing selectors/tokens
• removed legacy archive year/project card families that have no render path
• retained runtime selectors such as NavLink.active, mapped badge--*, and dynamic export status classes

The directly managed CSS total decreases from 7,143 to 5,472 lines. The new files follow actual component/feature boundaries rather than a line-count target.

Preserved computed behavior

• mobile form controls: 0.6rem 0.75rem; textarea min-height: 120px
• admin import dropzone: four-sided 1px dashed card-colored border
• admin import result: four-sided 1px solid border; the previously overridden 4px green accent remains absent
• 360px archive: two columns in both normal and poster modes
• dark mobile archive search: #131315
• mobile Years: hero 20px padding, title 24px, card 16px padding/12px gap, year 18.4px
• mobile .main--home: 0 16px 0
• modal prose 14.72px / 26.496px; project-detail mobile prose remains distinct
• dark mobile admin sidebar active/hover behavior and shadow
• member editor mobile/dark width, font, padding, radius, and background without !important

Validation

• npm test -w apps/web — 26 files, 111 tests passed
• npm run lint -w apps/web — passed
• npm run build -w apps/web — passed
• git diff --check — passed
• stale local imports — 0
• cross-file selector ownership duplicates — 0 (excluding keyframe from/to parser artifacts)
• !important — 0
• deleted-selector TS/TSX exact references — 0; dynamic class mappings reviewed separately

Visual regression

Compared latest-master baseline CSS with this branch on the same mock DOM/data in Chromium. The matrix covered home, years, archive, project detail, admin projects, and admin new form at exact 360×800, 768×1024, and 1280×800 viewports in light and dark themes: 36 baseline/after pairs.

All key computed styles and layout geometry matched. Most screenshots had zero differing pixels. A few light screenshots differed by 12–73 anti-aliased text pixels (at most about 0.015%) with no position, size, color, or border changes. Async form data was awaited and the affected six pairs were recaptured before comparison. Dark mode was forced with the existing data-theme hook because the UI toggle is currently inactive.

An independent reviewer reran test/lint/build, duplicate/import/unused checks, the full visual matrix, and the targeted cascade assertions and returned Approve with no blocking findings.

GitHub Actions

• verify — passed
• integration — passed on failed-job rerun

The first integration attempt failed two unrelated apps/api PostgreSQL+Garage storage-recovery assertions even though this PR changes CSS only. The same API state had passed on the immediately preceding PR. No API or test code was changed; rerunning the failed job completed successfully.