Fixed: Scope injected styles to Diva's root to prevent global style leak

[etosphere]

Problem

diva.js injects its stylesheet into document.head as <style id="diva-inline-styles">. Two rules in it were unscoped and therefore affected the entire embedding page, not just Diva:

• * { box-sizing: border-box } — reapplied the border-box model to every element on the host page, shifting the layout of any component that relied on the default content-box.
• :root { color-scheme: light } — forced the document's color scheme, overriding host dark mode and changing native control rendering.

Fix

Scope both rules to Diva's own root (src/styles/app.css):

• box-sizing is now applied to .diva-app and its descendants only;
• color-scheme: light moved from :root onto the .diva-app rule.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a078d683-bb45-40ec-9d9b-cf8074b594ab

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[ahankinson]

I’m fixing this in a separate bit of work. I’ll keep this open to remind me tho