| |
| body { |
| margin: 0; |
| } |
| .detailPane { |
| min-width: 0; |
| min-height: 0; |
| overflow: hidden; |
| } |
| .maka-overlay-scrollarea { |
| min-width: 0; |
| min-height: 0; |
| } |
| .maka-overlay-scrollarea-viewport { |
| min-width: 0; |
| min-height: 0; |
| } |
| .maka-overlay-scrollarea-content { |
| min-width: 0; |
| } |
| .maka-lazy-fallback { |
| min-width: 0; |
| min-height: 72px; |
| display: grid; |
| place-items: center; |
| padding: var(--space-4); |
| color: var(--muted-foreground); |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-semibold); |
| 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; |
| min-height: min(280px, 45vh); |
| } |
| .os-theme-maka { |
| /* local: OverlayScrollbars theme overrides */ |
| --os-size: 8px; |
| --os-padding-perpendicular: 1px; |
| --os-padding-axis: 2px; |
| --os-track-border-radius: var(--radius-surface); |
| --os-track-bg: transparent; |
| --os-track-bg-hover: transparent; |
| --os-track-bg-active: transparent; |
| --os-handle-border-radius: var(--radius-control); |
| --os-handle-bg: var(--border); |
| --os-handle-bg-hover: oklch(from var(--foreground) l c h / 0.22); |
| --os-handle-bg-active: oklch(from var(--foreground) l c h / 0.30); |
| --os-handle-interactive-area-offset: 6px; |
| --os-handle-min-size: 40px; |
| box-sizing: border-box; |
| } |
| .os-theme-maka.os-scrollbar-vertical { |
| width: var(--os-size); |
| } |
| .os-theme-maka.os-scrollbar-horizontal { |
| height: var(--os-size); |
| } |
| .maka-overlay-scrollarea-viewport:focus-visible { |
| outline: none; |
| box-shadow: none; |
| } |
| /* Form-control font inheritance is Tailwind preflight's job (`@layer base`: |
| button/input/select/textarea { font: inherit }). Do NOT re-declare it here: |
| an unlayered duplicate outranks every layered rule, which silently kills |
| all font utilities (text-*, font-*, leading-*) on form controls app-wide. |
| Locked by renderer-form-font-reset-contract.test.ts. */ |
| .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 pause purely decorative animation, |
| transitions, and caret blink so the rendered state does not depend on |
| the exact millisecond the fixture settles. */ |
| [data-maka-e2e-fixture="true"] *, |
| [data-maka-e2e-fixture="true"] *::before, |
| [data-maka-e2e-fixture="true"] *::after { |
| animation-play-state: paused !important; |
| transition-duration: 0.01ms !important; |
| caret-color: transparent !important; |
| } |
