/*
* Huli FHIR IG — main override stylesheet (#1364 §Visual identity)
*
* Stripe/Anthropic/Vercel-grade restyle of the HL7 IG Publisher output.
* Loaded by `.github/workflows/fhir-ig-build.yml` AFTER all of the base
* template's CSS (bootstrap-fhir.css, project.css, hl7.css, prism.css)
* so these rules win without `!important` battles.
*
* Sections:
* 1. Resets / base / typography
* 2. Three-column app shell (sticky topbar + sidebar + content + TOC)
* 3. Topbar
* 4. Left sidebar (repositioned navbar nav)
* 5. Right TOC ("On this page")
* 6. Breadcrumbs
* 7. Content + reading column
* 8. Headings + anchor links
* 9. Prose (paragraphs, lists, blockquotes)
* 10. Links
* 11. Inline code + code blocks
* 12. Callouts / admonitions (#publish-box, alerts)
* 13. Tables (FHIR structure-definition + generic)
* 14. FHIR convention glyphs (S / ?! / Σ / I)
* 15. Panels + bootstrap cards
* 16. Buttons + form widgets
* 17. FHIR resource tabs
* 18. Page-meta + footer (INCLUDES BOTTOM-CUTOFF FIX)
* 19. Prev / Next pagination
* 20. Reduced motion
*/
/* Inter web font + JetBrains Mono via Google Fonts CDN — same family the
* docs site uses (#1363). Single @import block, no FOUC because the IG
* Publisher loads all stylesheets in before body renders. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* =========================================================================
* 1. Resets / base / typography
* ======================================================================= */
html {
color-scheme: dark;
background-color: var(--canvas);
}
body {
background-color: var(--canvas);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
margin: 0;
padding-bottom: 0;
}
::selection {
background: var(--accent-muted);
color: var(--text-primary);
}
/* Kill any bootstrap container white backgrounds inherited from
* bootstrap-fhir.css. */
.segment > .container,
#segment-header .container,
#segment-navbar .container,
#segment-breadcrumb .container,
#segment-content .container,
#segment-footer .container,
#segment-post-footer .container,
body > .container,
body > div > .container {
background-color: transparent;
}
/* =========================================================================
* 2. Three-column app shell
*
* `huli-enhance.js` adds the `.has-shell` class to once it has
* wrapped the IG Publisher's existing segments into a Grid layout:
*
*
*
*
*
*
#segment-breadcrumb + #segment-content
*
*