| |
| body { |
| margin: 0; |
| } |
| /* Astryx 0.2.0 reset uses zero-specificity `:where([hidden])`, so component |
| display declarations can make native-hidden surfaces interactive again. |
| Justified !important: the HTML hidden invariant must beat every component |
| display mode. Remove when the pinned Astryx reset enforces the same invariant. */ |
| [hidden] { |
| display: none !important; |
| } |
| .detailPane { |
| min-width: 0; |
| min-height: 0; |
| overflow: hidden; |
| } |
| .maka-lazy-fallback { |
| font: var(--maka-text-heading-4); |
| min-width: 0; |
| min-height: 72px; |
| display: grid; |
| place-items: center; |
| padding: var(--space-4); |
| color: var(--muted-foreground); |
| text-align: center; |
| } |
| .maka-lazy-fallback[data-surface="panel"] { |
| min-height: 160px; |
| height: 100%; |
| } |
| .maka-lazy-fallback[data-surface="modal"] { |
| min-height: 100%; |
| } |
| .maka-lazy-fallback[data-surface="module"] { |
| align-self: stretch; |
| /* The module shell is a flex row (module-shell.css), so the fallback must |
| claim the main axis itself — `align-self` only stretches it vertically, |
| leaving the loading message shrunk to its own text width. */ |
| flex: 1 1 auto; |
| min-height: min(280px, 45vh); |
| } |
| /* Form-control font inheritance is owned by the Astryx reset. */ |
| .maka-visually-hidden { |
| position: absolute !important; |
| width: 1px !important; |
| height: 1px !important; |
| padding: 0 !important; |
| margin: -1px !important; |
| overflow: hidden !important; |
| clip: rect(0 0 0 0) !important; |
| white-space: nowrap !important; |
| border: 0 !important; |
| } |
| button { |
| transition: |
| background var(--duration-base) var(--ease-out-strong), |
| border-color var(--duration-base) var(--ease-out-strong), |
| color var(--duration-base) var(--ease-out-strong); |
| } |
| /* PR-IR-04: Test-fixture-driven reduced-motion variant (per |
| the reduced-motion contract tests). Mirrors `prefers-reduced-motion: reduce` |
| via an attribute on `<html>` so e2e-fixture renders can exercise a |
| "reduced motion" variant without depending on the host OS |
| accessibility setting. |
| |
| The `data-maka-reduced-motion="true"` attribute is applied by the |
| renderer when `MAKA_E2E_FIXTURE_REDUCED_MOTION=1` is set in the env. |
| Real users still get motion as configured by their OS. */ |
| [data-maka-reduced-motion="true"] *, |
| [data-maka-reduced-motion="true"] *::before, |
| [data-maka-reduced-motion="true"] *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| /* Scroll behavior + view transition durations also collapse */ |
| scroll-behavior: auto !important; |
| } |
| /* E2E-fixture renders must be deterministic. We still exercise the |
| normal DOM for every scenario, but remove purely decorative animation, |
| transitions, and caret blink so the rendered state does not depend on |
| the exact millisecond the fixture settles. `paused` is not equivalent: |
| an animation with `fill-mode: backwards` would be frozen in its hidden |
| entry frame instead of the component's settled state. */ |
| [data-maka-e2e-fixture="true"] *, |
| [data-maka-e2e-fixture="true"] *::before, |
| [data-maka-e2e-fixture="true"] *::after { |
| animation: none !important; |
| transition-duration: 0.01ms !important; |
| caret-color: transparent !important; |
| } |
