/* * chrome-compat.css — v4 * * Why this file exists: * Chrome/Blink has a cascade bug: layered logical properties (padding-block, * margin-inline) from @layer utilities can override unlayered physical props. * Tailwind v4 uses logical properties inside @layer, so spacing collapses in * Chrome. This file fixes it with author-!important unlayered overrides that * CSS Cascade Level 5 guarantees will always win over non-important @layer rules. * * Structure: * 1. @property — type-register critical spacing vars so Chrome resolves them * 2. :root — belt-and-suspenders custom property definitions (unlayered) * 3. Base utility overrides — with !important, both logical AND physical props * 4. Responsive overrides — same, inside @media queries (later = wins for !important) */ /* ── Root font-size lock ──────────────────────────────────────────────────── Chrome respects the user-agent font size preference (can be 9px, 12px, etc). rem units throughout Tailwind/the app assume 1rem = 16px. We lock it here so layout is consistent regardless of the browser font-size setting. !important is required to beat any @layer base rule that might cascade in. */ html { font-size: 16px !important; } /* ── 1. @property — guarantee var types for Chrome ─────────────────────────── */ @property --spacing { syntax: ''; inherits: true; initial-value: 0.25rem; } @property --container-xs { syntax: ''; inherits: true; initial-value: 20rem; } @property --container-sm { syntax: ''; inherits: true; initial-value: 24rem; } @property --container-md { syntax: ''; inherits: true; initial-value: 28rem; } @property --container-lg { syntax: ''; inherits: true; initial-value: 32rem; } @property --container-xl { syntax: ''; inherits: true; initial-value: 36rem; } @property --container-2xl { syntax: ''; inherits: true; initial-value: 42rem; } @property --container-3xl { syntax: ''; inherits: true; initial-value: 48rem; } @property --container-4xl { syntax: ''; inherits: true; initial-value: 56rem; } @property --container-5xl { syntax: ''; inherits: true; initial-value: 64rem; } @property --container-6xl { syntax: ''; inherits: true; initial-value: 72rem; } @property --container-7xl { syntax: ''; inherits: true; initial-value: 80rem; } /* ── 2. :root custom properties (unlayered, beats @layer theme) ─────────────── */ :root { --spacing: 0.25rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem; --text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem; --text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --radius: 1.5rem; --radius-sm: 1.25rem; --radius-md: 1.375rem; --radius-lg: 1.5rem; --radius-xl: 1.875rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; } /* ── 3. Base utility overrides (!important, logical + physical) ─────────────── */ /* px-* (horizontal padding) */ .px-0 { padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-inline: 0.25rem !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .px-2 { padding-inline: 0.5rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-3 { padding-inline: 0.75rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-4 { padding-inline: 1rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } .px-5 { padding-inline: 1.25rem !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .px-6 { padding-inline: 1.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-7 { padding-inline: 1.75rem !important; padding-left: 1.75rem !important; padding-right: 1.75rem !important; } .px-8 { padding-inline: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .px-10 { padding-inline: 2.5rem !important; padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .px-12 { padding-inline: 3rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } .px-14 { padding-inline: 3.5rem !important; padding-left: 3.5rem !important; padding-right: 3.5rem !important; } .px-16 { padding-inline: 4rem !important; padding-left: 4rem !important; padding-right: 4rem !important; } /* py-* (vertical padding) */ .py-0 { padding-block: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-block: 0.25rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-block: 0.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-block: 0.75rem !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-4 { padding-block: 1rem !important; padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-5 { padding-block: 1.25rem !important; padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .py-6 { padding-block: 1.5rem !important; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-7 { padding-block: 1.75rem !important; padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } .py-8 { padding-block: 2rem !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-10 { padding-block: 2.5rem !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .py-12 { padding-block: 3rem !important; padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-14 { padding-block: 3.5rem !important; padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .py-16 { padding-block: 4rem !important; padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-20 { padding-block: 5rem !important; padding-top: 5rem !important; padding-bottom: 5rem !important; } .py-24 { padding-block: 6rem !important; padding-top: 6rem !important; padding-bottom: 6rem !important; } .py-28 { padding-block: 7rem !important; padding-top: 7rem !important; padding-bottom: 7rem !important; } .py-32 { padding-block: 8rem !important; padding-top: 8rem !important; padding-bottom: 8rem !important; } /* pt-* (padding-top) */ .pt-0 { padding-block-start: 0 !important; padding-top: 0 !important; } .pt-1 { padding-block-start: 0.25rem !important; padding-top: 0.25rem !important; } .pt-2 { padding-block-start: 0.5rem !important; padding-top: 0.5rem !important; } .pt-3 { padding-block-start: 0.75rem !important; padding-top: 0.75rem !important; } .pt-4 { padding-block-start: 1rem !important; padding-top: 1rem !important; } .pt-5 { padding-block-start: 1.25rem !important; padding-top: 1.25rem !important; } .pt-6 { padding-block-start: 1.5rem !important; padding-top: 1.5rem !important; } .pt-7 { padding-block-start: 1.75rem !important; padding-top: 1.75rem !important; } .pt-8 { padding-block-start: 2rem !important; padding-top: 2rem !important; } .pt-10 { padding-block-start: 2.5rem !important; padding-top: 2.5rem !important; } .pt-12 { padding-block-start: 3rem !important; padding-top: 3rem !important; } .pt-14 { padding-block-start: 3.5rem !important; padding-top: 3.5rem !important; } .pt-16 { padding-block-start: 4rem !important; padding-top: 4rem !important; } .pt-20 { padding-block-start: 5rem !important; padding-top: 5rem !important; } .pt-24 { padding-block-start: 6rem !important; padding-top: 6rem !important; } /* pb-* (padding-bottom) */ .pb-0 { padding-block-end: 0 !important; padding-bottom: 0 !important; } .pb-1 { padding-block-end: 0.25rem !important; padding-bottom: 0.25rem !important; } .pb-2 { padding-block-end: 0.5rem !important; padding-bottom: 0.5rem !important; } .pb-3 { padding-block-end: 0.75rem !important; padding-bottom: 0.75rem !important; } .pb-4 { padding-block-end: 1rem !important; padding-bottom: 1rem !important; } .pb-5 { padding-block-end: 1.25rem !important; padding-bottom: 1.25rem !important; } .pb-6 { padding-block-end: 1.5rem !important; padding-bottom: 1.5rem !important; } .pb-7 { padding-block-end: 1.75rem !important; padding-bottom: 1.75rem !important; } .pb-8 { padding-block-end: 2rem !important; padding-bottom: 2rem !important; } .pb-10 { padding-block-end: 2.5rem !important; padding-bottom: 2.5rem !important; } .pb-12 { padding-block-end: 3rem !important; padding-bottom: 3rem !important; } .pb-16 { padding-block-end: 4rem !important; padding-bottom: 4rem !important; } .pb-20 { padding-block-end: 5rem !important; padding-bottom: 5rem !important; } /* gap-* */ .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 0.75rem !important; } .gap-4 { gap: 1rem !important; } .gap-5 { gap: 1.25rem !important; } .gap-6 { gap: 1.5rem !important; } .gap-8 { gap: 2rem !important; } .gap-10 { gap: 2.5rem !important; } .gap-12 { gap: 3rem !important; } .gap-14 { gap: 3.5rem !important; } .gap-16 { gap: 4rem !important; } .gap-20 { gap: 5rem !important; } /* mx-* / my-* (margins) */ .mx-auto { margin-inline: auto !important; margin-left: auto !important; margin-right: auto !important; } .mx-0 { margin-inline: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-inline: 0.25rem !important; margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .mx-2 { margin-inline: 0.5rem !important; margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-3 { margin-inline: 0.75rem !important; margin-left: 0.75rem !important; margin-right: 0.75rem !important; } .mx-4 { margin-inline: 1rem !important; margin-left: 1rem !important; margin-right: 1rem !important; } .my-0 { margin-block: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-block: 0.25rem !important; margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-block: 0.5rem !important; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-4 { margin-block: 1rem !important; margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-8 { margin-block: 2rem !important; margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-10 { margin-block: 2.5rem !important; margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } /* mt-* (margin-top) */ .mt-0 { margin-block-start: 0 !important; margin-top: 0 !important; } .mt-1 { margin-block-start: 0.25rem !important; margin-top: 0.25rem !important; } .mt-2 { margin-block-start: 0.5rem !important; margin-top: 0.5rem !important; } .mt-3 { margin-block-start: 0.75rem !important; margin-top: 0.75rem !important; } .mt-4 { margin-block-start: 1rem !important; margin-top: 1rem !important; } .mt-5 { margin-block-start: 1.25rem !important; margin-top: 1.25rem !important; } .mt-6 { margin-block-start: 1.5rem !important; margin-top: 1.5rem !important; } .mt-8 { margin-block-start: 2rem !important; margin-top: 2rem !important; } .mt-10 { margin-block-start: 2.5rem !important; margin-top: 2.5rem !important; } .mt-12 { margin-block-start: 3rem !important; margin-top: 3rem !important; } .mt-16 { margin-block-start: 4rem !important; margin-top: 4rem !important; } .mt-20 { margin-block-start: 5rem !important; margin-top: 5rem !important; } .mt-24 { margin-block-start: 6rem !important; margin-top: 6rem !important; } .mt-auto { margin-block-start: auto !important; margin-top: auto !important; } /* mb-* (margin-bottom) */ .mb-0 { margin-block-end: 0 !important; margin-bottom: 0 !important; } .mb-1 { margin-block-end: 0.25rem !important; margin-bottom: 0.25rem !important; } .mb-2 { margin-block-end: 0.5rem !important; margin-bottom: 0.5rem !important; } .mb-3 { margin-block-end: 0.75rem !important; margin-bottom: 0.75rem !important; } .mb-4 { margin-block-end: 1rem !important; margin-bottom: 1rem !important; } .mb-5 { margin-block-end: 1.25rem !important; margin-bottom: 1.25rem !important; } .mb-6 { margin-block-end: 1.5rem !important; margin-bottom: 1.5rem !important; } .mb-7 { margin-block-end: 1.75rem !important; margin-bottom: 1.75rem !important; } .mb-8 { margin-block-end: 2rem !important; margin-bottom: 2rem !important; } .mb-10 { margin-block-end: 2.5rem !important; margin-bottom: 2.5rem !important; } .mb-12 { margin-block-end: 3rem !important; margin-bottom: 3rem !important; } .mb-14 { margin-block-end: 3.5rem !important; margin-bottom: 3.5rem !important; } .mb-16 { margin-block-end: 4rem !important; margin-bottom: 4rem !important; } .mb-20 { margin-block-end: 5rem !important; margin-bottom: 5rem !important; } /* max-w-* (max-width — overrides var(--container-*) failures) */ .max-w-xs { max-width: 20rem !important; } .max-w-sm { max-width: 24rem !important; } .max-w-md { max-width: 28rem !important; } .max-w-lg { max-width: 32rem !important; } .max-w-xl { max-width: 36rem !important; } .max-w-2xl { max-width: 42rem !important; } .max-w-3xl { max-width: 48rem !important; } .max-w-4xl { max-width: 56rem !important; } .max-w-5xl { max-width: 64rem !important; } .max-w-6xl { max-width: 72rem !important; } .max-w-7xl { max-width: 80rem !important; } .max-w-full { max-width: 100% !important; } .max-w-none { max-width: none !important; } /* min-w-0 (critical for flex children) */ .min-w-0 { min-width: 0 !important; } /* ── 4. Responsive overrides — MUST come after base overrides ───────────────── */ /* At breakpoints, the md:/lg: variants should win over the base class overrides. Same !important specificity → last declared wins → these responsive rules win. */ @media (min-width: 640px) { .sm\:px-6 { padding-inline: 1.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .sm\:px-8 { padding-inline: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .sm\:py-12 { padding-block: 3rem !important; padding-top: 3rem !important; padding-bottom: 3rem !important; } .sm\:py-16 { padding-block: 4rem !important; padding-top: 4rem !important; padding-bottom: 4rem !important; } .sm\:mt-0 { margin-block-start: 0 !important; margin-top: 0 !important; } .sm\:mt-4 { margin-block-start: 1rem !important; margin-top: 1rem !important; } } @media (min-width: 768px) { /* px */ .md\:px-6 { padding-inline: 1.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .md\:px-8 { padding-inline: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .md\:px-10 { padding-inline: 2.5rem !important; padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .md\:px-12 { padding-inline: 3rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } /* py */ .md\:py-8 { padding-block: 2rem !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } .md\:py-10 { padding-block: 2.5rem !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .md\:py-12 { padding-block: 3rem !important; padding-top: 3rem !important; padding-bottom: 3rem !important; } .md\:py-16 { padding-block: 4rem !important; padding-top: 4rem !important; padding-bottom: 4rem !important; } .md\:py-20 { padding-block: 5rem !important; padding-top: 5rem !important; padding-bottom: 5rem !important; } .md\:py-24 { padding-block: 6rem !important; padding-top: 6rem !important; padding-bottom: 6rem !important; } .md\:py-28 { padding-block: 7rem !important; padding-top: 7rem !important; padding-bottom: 7rem !important; } .md\:py-32 { padding-block: 8rem !important; padding-top: 8rem !important; padding-bottom: 8rem !important; } /* pt / pb */ .md\:pt-4 { padding-block-start: 1rem !important; padding-top: 1rem !important; } .md\:pt-6 { padding-block-start: 1.5rem !important; padding-top: 1.5rem !important; } .md\:pt-7 { padding-block-start: 1.75rem !important; padding-top: 1.75rem !important; } .md\:pt-8 { padding-block-start: 2rem !important; padding-top: 2rem !important; } .md\:pt-12 { padding-block-start: 3rem !important; padding-top: 3rem !important; } .md\:pt-16 { padding-block-start: 4rem !important; padding-top: 4rem !important; } .md\:pt-20 { padding-block-start: 5rem !important; padding-top: 5rem !important; } .md\:pb-4 { padding-block-end: 1rem !important; padding-bottom: 1rem !important; } .md\:pb-6 { padding-block-end: 1.5rem !important; padding-bottom: 1.5rem !important; } .md\:pb-7 { padding-block-end: 1.75rem !important; padding-bottom: 1.75rem !important; } .md\:pb-8 { padding-block-end: 2rem !important; padding-bottom: 2rem !important; } .md\:pb-12 { padding-block-end: 3rem !important; padding-bottom: 3rem !important; } .md\:pb-16 { padding-block-end: 4rem !important; padding-bottom: 4rem !important; } .md\:pb-20 { padding-block-end: 5rem !important; padding-bottom: 5rem !important; } /* gap */ .md\:gap-4 { gap: 1rem !important; } .md\:gap-6 { gap: 1.5rem !important; } .md\:gap-8 { gap: 2rem !important; } .md\:gap-10 { gap: 2.5rem !important; } .md\:gap-12 { gap: 3rem !important; } /* mt / mb */ .md\:mt-0 { margin-block-start: 0 !important; margin-top: 0 !important; } .md\:mt-4 { margin-block-start: 1rem !important; margin-top: 1rem !important; } .md\:mt-6 { margin-block-start: 1.5rem !important; margin-top: 1.5rem !important; } .md\:mt-8 { margin-block-start: 2rem !important; margin-top: 2rem !important; } .md\:mt-12 { margin-block-start: 3rem !important; margin-top: 3rem !important; } .md\:mb-0 { margin-block-end: 0 !important; margin-bottom: 0 !important; } .md\:mb-4 { margin-block-end: 1rem !important; margin-bottom: 1rem !important; } .md\:mb-6 { margin-block-end: 1.5rem !important; margin-bottom: 1.5rem !important; } .md\:mb-8 { margin-block-end: 2rem !important; margin-bottom: 2rem !important; } } @media (min-width: 1024px) { /* px */ .lg\:px-8 { padding-inline: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .lg\:px-10 { padding-inline: 2.5rem !important; padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .lg\:px-12 { padding-inline: 3rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } .lg\:px-16 { padding-inline: 4rem !important; padding-left: 4rem !important; padding-right: 4rem !important; } /* py */ .lg\:py-16 { padding-block: 4rem !important; padding-top: 4rem !important; padding-bottom: 4rem !important; } .lg\:py-20 { padding-block: 5rem !important; padding-top: 5rem !important; padding-bottom: 5rem !important; } .lg\:py-24 { padding-block: 6rem !important; padding-top: 6rem !important; padding-bottom: 6rem !important; } .lg\:py-28 { padding-block: 7rem !important; padding-top: 7rem !important; padding-bottom: 7rem !important; } .lg\:py-32 { padding-block: 8rem !important; padding-top: 8rem !important; padding-bottom: 8rem !important; } /* pt / pb */ .lg\:pt-8 { padding-block-start: 2rem !important; padding-top: 2rem !important; } .lg\:pt-12 { padding-block-start: 3rem !important; padding-top: 3rem !important; } .lg\:pt-16 { padding-block-start: 4rem !important; padding-top: 4rem !important; } .lg\:pb-8 { padding-block-end: 2rem !important; padding-bottom: 2rem !important; } .lg\:pb-12 { padding-block-end: 3rem !important; padding-bottom: 3rem !important; } .lg\:pb-16 { padding-block-end: 4rem !important; padding-bottom: 4rem !important; } /* gap */ .lg\:gap-6 { gap: 1.5rem !important; } .lg\:gap-8 { gap: 2rem !important; } .lg\:gap-10 { gap: 2.5rem !important; } .lg\:gap-12 { gap: 3rem !important; } /* mt */ .lg\:mt-0 { margin-block-start: 0 !important; margin-top: 0 !important; } .lg\:mt-8 { margin-block-start: 2rem !important; margin-top: 2rem !important; } .lg\:mt-12 { margin-block-start: 3rem !important; margin-top: 3rem !important; } .lg\:mb-0 { margin-block-end: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 1280px) { .xl\:px-8 { padding-inline: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .xl\:px-12 { padding-inline: 3rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } .xl\:py-20 { padding-block: 5rem !important; padding-top: 5rem !important; padding-bottom: 5rem !important; } .xl\:py-24 { padding-block: 6rem !important; padding-top: 6rem !important; padding-bottom: 6rem !important; } .xl\:py-28 { padding-block: 7rem !important; padding-top: 7rem !important; padding-bottom: 7rem !important; } .xl\:py-32 { padding-block: 8rem !important; padding-top: 8rem !important; padding-bottom: 8rem !important; } .xl\:gap-8 { gap: 2rem !important; } .xl\:gap-12 { gap: 3rem !important; } .xl\:gap-16 { gap: 4rem !important; } }