style(docs): prose polish, Algolia modal, tabs pill, 404 cards, footer chips

[sserrata]

Summary

Continues the visual refresh started in #1344. Pure CSS + one small React tweak in the doc footer.

Prose surfaces

• Blockquotes — subtle gray background, 3px accent border-left, rounded right side.
• Inline code — lighter tint than pre blocks, subtle border, tighter padding. Scoped to .markdown :not(pre) > code so OpenAPI/Explorer code surfaces are untouched.
• Admonitions — thinner accent (border-left only), rounded right side, softer dark-mode background. Uses [class*=] prefix matching for the css-module internals so it survives theme version bumps.
• Prose <details> — same border-left accent + rounded right as admonitions. Scoped away from API-doc details via :not(.theme-api-markdown *).

Headings

• Scroll-margin — deep links no longer hide under the sticky navbar.
• Hover anchor polish — the # anchor Docusaurus already reveals on hover now uses gray-500 idle → primary on hover, in both themes.

Code block titles

• Dark bg + light text in both themes so the title bar visually attaches to the (always-dark) code area below. Rounded top corners match --ifm-code-border-radius.

Tabs → primary-tinted pill

• Code-language tabs and MIME tabs get rounded corners, muted default color, and an emphasis-100 hover tint.
• Active tab: primary-blue text + soft primary-tinted background (color-mix), dropping the default underline in favor of the pill.
• MIME tabs (openapi-docs request-body variants) switched to [class*="mimeTabActive_"] prefix match so it survives openapi-docs version bumps.
• Response tabs (200/400/etc.) left alone — they already use a primary-outlined pattern that reads well.

Algolia DocSearch modal

• Rides on top of DocSearch's own --docsearch-* variables so modal/searchbox/footer/kbd all track site tokens (--ifm-color-*, --ifm-background-color) in both themes instead of raw hex.
• Modal uses --ifm-background-color; overflow: hidden clips the searchbox/footer to the rounded corners so they no longer bleed past the border-radius.
• Selected result uses a neutral emphasis-200 tint (gray in both themes) instead of a full primary fill — subtler, closer to Spotlight / Raycast conventions. Matched-text <mark> stays primary blue so hits are still easy to spot.
• Backdrop gets a subtle blur; navbar trigger button picks up the same rounded/bordered treatment as the search input.

404 page

• Frames the inline DocSearch trigger so it doesn't render as a bare full-width bar mid-sentence.
• Algolia suggestion rows now render as cards using the shared --pan-card-* tokens for hover consistency with pagination and the homepage.

Footer chip row + FloatingIsland

• Doc footer's Copy / Edit / Report links become sibling pill chips using the --pan-card-border token and primary-tint hover; flex-wrap + gap so labels never break mid-word. Below the 996px mobile breakpoint they collapse to 36px circular icon-only buttons so all three sit on one row on tablet/phone.
• FloatingIsland (visible when the footer scrolls off-screen) rewritten as a single glass pill — content-driven width, backdrop blur, per-icon circular hover targets in primary tint. All three legacy width variants share the same treatment.
• Drops the empty layout column in the footer so the chip row can flex across the full width; neutralizes base styles of the Copy and Issue components so the containing surface (chip row or island) controls color and spacing.

Card tokens (supporting)

• Adds --pan-card-* variables in :root (radius, border, shadow, shadow-hover, transition, hover-lift) with a dark-theme override that strengthens the border and deepens the shadow. Consumed by the 404 cards and footer chips above; kept minimal so future card surfaces can adopt the same tokens.

OpenAPI fix (scope-adjacent)

• Schema summary flex — with openapi-docs 5.1.2's new schema-depth toggle, the header's h3/strong was wrapping the "required" chip to a new line. Force nowrap on the header, wrap on the summary itself so the toggle drops below only when there's truly no horizontal room.

Test plan

• Visual: light + dark mode — blockquotes, inline code, all admonition variants, prose <details> render as expected
• Visual: fenced code blocks — new dark title bar with rounded top corners
• Visual: deep-link to a heading anchor — heading sits below navbar with breathing room
• Visual: code-language tabs + MIME tabs — active state is a primary-tinted pill (no underline); hover state has emphasis-100 tint
• Visual: open Algolia modal — modal/footer/kbd track site tokens; selected result is neutral gray with primary-blue matched text; backdrop has subtle blur
• Visual: 404 page — inline DocSearch trigger is framed; suggestion rows render as cards with hover lift
• Visual: doc footer chip row (desktop) → three pill chips with icons + labels; resize below 996px → chips collapse to circular icon-only buttons on one row
• Visual: scroll past the footer → FloatingIsland appears as a single glass pill with backdrop blur; hover each icon to see circular primary-tint target
• Regression: OpenAPI Explorer + API doc pages — inline code, <details>, schema summaries look correct (title + required chip on same line); response tabs unchanged
• Regression: markdown tables from style(docs): modernize markdown table styling #1344 unchanged
• Cross-browser: Chrome + Safari

🤖 Generated with Claude Code

[github-actions]

Visit the preview URL for this PR (updated for commit 9ba163f):

https://pan-dev-f1b58--pr1345-rimjixnz.web.app

_{(expires Wed, 22 Jul 2026 20:10:57 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 9359a9fa100d5fdb082f75280473a90b1f96eb51}