/* inter-tight-cyrillic-ext-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-cyrillic-ext-wght-normal-okcGN4Nq.woff2) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-tight-cyrillic-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-cyrillic-wght-normal-BS41q_Tv.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-tight-greek-ext-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-greek-ext-wght-normal-DQgQPNk4.woff2) format('woff2-variations'); unicode-range: U+1F00-1FFF; } /* inter-tight-greek-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-greek-wght-normal-sS1B39LI.woff2) format('woff2-variations'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-tight-vietnamese-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-vietnamese-wght-normal-TKKdAiBA.woff2) format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-tight-latin-ext-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-latin-ext-wght-normal-B4u9PlvR.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-tight-latin-wght-normal */ @font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-tight-latin-wght-normal-DX-nOvPD.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-font-weight: initial; --tw-content: ""; --tw-duration: initial; --tw-leading: initial; --tw-border-style: solid; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-ease: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-space-y-reverse: 0; --tw-tracking: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-space-x-reverse: 0; } } } @layer theme { :root, :host { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --leading-relaxed: 1.625; --radius-sm: calc(var(--radius) * .5); --radius-md: calc(var(--radius) * .75); --radius-lg: calc(var(--radius) * 1); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --ease-out: cubic-bezier(0, 0, .2, 1); --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-md: 12px; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --shadow-overlay: var(--overlay-shadow); --shadow-field: var(--field-shadow); --border-width-field: var(--field-border-width, var(--border-width)); --ease-smooth: ease; --ease-out-quad: cubic-bezier(.25, .46, .45, .94); --ease-out-quart: cubic-bezier(.165, .84, .44, 1); --ease-out-fluid: cubic-bezier(.32, .72, 0, 1); --ease-linear: linear; } @layer theme { @layer base { :root, .light, .default, [data-theme="light"], [data-theme="default"] { color-scheme: light; --white: oklch(100% 0 0); --black: oklch(0% 0 0); --snow: oklch(99.11% 0 0); --eclipse: oklch(21.03% .0059 285.89); --spacing: .25rem; --border-width: 1px; --field-border-width: 0px; --disabled-opacity: .5; --ring-offset-width: 2px; --cursor-interactive: pointer; --cursor-disabled: not-allowed; --radius: .5rem; --field-radius: calc(var(--radius) * 1.5); --background: oklch(97.02% 0 0); --foreground: var(--eclipse); --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: oklch(95.24% .0013 286.37); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(93.73% .0013 286.37); --surface-tertiary-foreground: var(--foreground); --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: oklch(55.17% .0138 285.94); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(94% .001 286.375); --default-foreground: var(--eclipse); --accent: oklch(62.04% .195 253.83); --accent-foreground: var(--snow); --field-background: var(--white); --field-foreground: oklch(21.03% .0059 285.89); --field-placeholder: var(--muted); --field-border: transparent; --success: oklch(73.29% .1935 150.81); --success-foreground: var(--eclipse); --warning: oklch(78.19% .1585 72.33); --warning-foreground: var(--eclipse); --danger: oklch(65.32% .2328 25.74); --danger-foreground: var(--snow); --segment: var(--white); --segment-foreground: var(--eclipse); --border: oklch(90% .004 286.32); --separator: oklch(92% .004 286.32); --focus: var(--accent); --link: var(--foreground); --backdrop: #00000080; --surface-hover: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --background-secondary: var(--background); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --background-tertiary: var(--background); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --background-inverse: var(--foreground); --default-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --field-hover: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --field-hover: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --field-focus: var(--field-background, var(--default)); --field-border-hover: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --field-border-focus: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --default-soft: var(--default); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --default-soft: color-mix(in oklab, var(--default) 50%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --default-soft-foreground: var(--default-foreground); --default-soft-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-soft: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-soft-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-soft: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-soft-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-soft: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-soft-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-soft: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-soft: color-mix(in oklab, var(--success) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-soft-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --separator-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --separator-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --border-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --border-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"] { --surface-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f; --overlay-shadow: 0 2px 8px 0 #0000000f, 0 -6px 12px 0 #00000008, 0 14px 28px 0 #00000014; --field-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f; --skeleton-animation: shimmer; --tooltip-delay: 1.5s; --tooltip-close-delay: .5s; } .dark, [data-theme="dark"] { color-scheme: dark; --background: oklch(12% .005 285.823); --foreground: var(--snow); --surface: oklch(21.03% .0059 285.89); --surface-foreground: var(--foreground); --surface-secondary: oklch(25.7% .0037 286.14); --surface-tertiary: oklch(27.21% .0024 247.91); --overlay: oklch(21.03% .0059 285.89); --overlay-foreground: var(--foreground); --muted: oklch(70.5% .015 286.067); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); } } .dark, [data-theme="dark"] { --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(27.4% .006 286.033); --default-foreground: var(--snow); --field-background: oklch(21.03% .0059 285.89); --field-foreground: var(--foreground); --warning: oklch(82.03% .1388 76.34); --warning-foreground: var(--eclipse); --danger: oklch(59.4% .1967 24.63); --danger-foreground: var(--snow); --segment: oklch(39.64% .01 285.93); --segment-foreground: var(--foreground); --border: oklch(28% .006 286.033); --separator: oklch(25% .006 286.033); --focus: var(--accent); --link: var(--foreground); --backdrop: #0009; --surface-shadow: 0 0 0 0 transparent inset; --overlay-shadow: 0 0 1px 0 #ffffff4d inset; --field-shadow: 0 0 0 0 transparent inset; --surface-hover: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } .dark, [data-theme="dark"] { --background-secondary: var(--background); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); } } .dark, [data-theme="dark"] { --background-tertiary: var(--background); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); } } .dark, [data-theme="dark"] { --background-inverse: var(--foreground); --default-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } .dark, [data-theme="dark"] { --accent-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .dark, [data-theme="dark"] { --success-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); } } .dark, [data-theme="dark"] { --warning-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); } } .dark, [data-theme="dark"] { --danger-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); } } .dark, [data-theme="dark"] { --field-hover: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --field-hover: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .dark, [data-theme="dark"] { --field-focus: var(--field-background, var(--default)); --field-border-hover: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .dark, [data-theme="dark"] { --field-border-focus: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%); } } .dark, [data-theme="dark"] { --default-soft: var(--default); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --default-soft: color-mix(in oklab, var(--default) 50%, transparent); } } .dark, [data-theme="dark"] { --default-soft-foreground: var(--default-foreground); --default-soft-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); } } .dark, [data-theme="dark"] { --accent-soft: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent); } } .dark, [data-theme="dark"] { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"] { --accent-soft-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent); } } .dark, [data-theme="dark"] { --danger-soft: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); } } .dark, [data-theme="dark"] { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"] { --danger-soft-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); } } .dark, [data-theme="dark"] { --warning-soft: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent); } } .dark, [data-theme="dark"] { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"] { --warning-soft-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent); } } .dark, [data-theme="dark"] { --success-soft: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --success-soft: color-mix(in oklab, var(--success) 12%, transparent); } } .dark, [data-theme="dark"] { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"] { --success-soft-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent); } } .dark, [data-theme="dark"] { --separator-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); } } .dark, [data-theme="dark"] { --separator-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } .dark, [data-theme="dark"] { --border-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); } } .dark, [data-theme="dark"] { --border-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"] { --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } } } } @layer components; } @layer base { @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } *, :after, :before, ::backdrop { border-color: var(--border, currentColor); } ::file-selector-button { border-color: var(--border, currentColor); } :root { view-transition-name: none; } ::view-transition { pointer-events: none; } [data-scrollbar="thin"] { --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --scrollbar-gutter: auto; } [data-scrollbar="default"] { --scrollbar-width: auto; --scrollbar-color: auto; --scrollbar-gutter: auto; } [data-scrollbar="none"] { --scrollbar-width: none; --scrollbar-color: auto; --scrollbar-gutter: auto; } } @layer components { .close-button { isolation: isolate; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); transform-origin: center; border-radius: calc(var(--radius) * 1.5); padding: var(--spacing); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), color .15s var(--ease-out), background-color .1s var(--ease-out), box-shadow .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; } .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .close-button:focus-visible:not(:focus), .close-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .close-button:disabled, .close-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .close-button[data-pending="true"] { pointer-events: none; } .close-button svg { pointer-events: none; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); margin-inline: calc(var(--spacing) * -.5); margin-block: calc(var(--spacing) * .5); flex-shrink: 0; align-self: center; } .close-button--default { background-color: var(--default); color: var(--muted); } @media (hover: hover) { .close-button--default:hover, .close-button--default[data-hovered="true"] { background-color: var(--default-hover); } } .close-button--default:active, .close-button--default[data-pressed="true"] { transform: scale(.93); } .description { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); } .error-message { height: auto; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); overflow-wrap: break-word; color: var(--danger); transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth); } .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .field-error { height: 0; padding-inline: var(--spacing); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); overflow-wrap: break-word; color: var(--danger); opacity: 0; } .field-error[data-visible] { opacity: 1; height: auto; } .field-error { transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth); } .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox > .field-error, .checkbox > [data-slot="field-error"], .switch > .field-error, .switch > [data-slot="field-error"], .radio > .field-error, .radio > [data-slot="field-error"] { height: auto; min-height: 0; color: var(--muted); opacity: 1; margin: 0; padding: 0; transition: none; } .label { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } :is(.label--required, [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"]) > .label, [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label):after { margin-left: calc(var(--spacing) * .5); color: var(--danger); --tw-content: "*"; content: var(--tw-content); } .label--disabled, [data-disabled="true"] .label { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .label--invalid, [data-invalid="true"] .label, [aria-invalid="true"] .label { color: var(--danger); } .accordion { contain: layout style; width: 100%; } .accordion__body { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .accordion__body-inner { padding-inline: calc(var(--spacing) * 4); padding-top: 0; padding-bottom: calc(var(--spacing) * 4); color: var(--muted); } .accordion__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; margin-left: auto; transition-duration: .25s; } .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .accordion__indicator[data-expanded="true"] { rotate: -180deg; } .accordion__item { --tw-border-style: none; border-style: none; position: relative; } .accordion__item:after { content: ""; border-radius: calc(var(--radius) * .25); background-color: var(--separator); width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; } .accordion__item:last-child:after { content: none; } .accordion__item[data-hide-separator="true"]:after { display: none; } .accordion__trigger { cursor: var(--cursor-interactive); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 4); text-align: left; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); -webkit-tap-highlight-color: transparent; transition: opacity .15s var(--ease-out), box-shadow .15s var(--ease-out); flex: 1; justify-content: space-between; align-items: center; display: flex; } .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .accordion__trigger:hover:not([aria-expanded="true"]), .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) { background-color: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { .accordion__trigger:hover:not([aria-expanded="true"]), .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) { background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%); } } } .accordion__trigger:focus-visible:not(:focus), .accordion__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .accordion__trigger:disabled, .accordion__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .accordion__panel { opacity: 0; height: var(--disclosure-panel-height); transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out); overflow: clip; } .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .accordion__panel[data-expanded="true"] { will-change: height, opacity; opacity: 1; } .accordion--surface { background-color: var(--surface); border-radius: min(32px, var(--radius-3xl)); } @media (hover: hover) { .accordion--surface .accordion__trigger:hover:not([aria-expanded="true"]), .accordion--surface .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) { background-color: var(--default); } } .accordion--surface .accordion__item:after { background-color: var(--surface-foreground); } @supports (color: color-mix(in lab, red, red)) { .accordion--surface .accordion__item:after { background-color: color-mix(in oklab, var(--surface-foreground) 6%, transparent); } } .accordion--surface .accordion__item:after { width: 94%; left: 3%; } .accordion--surface .accordion__item:first-child [data-slot="accordion-trigger"] { border-top-left-radius: min(32px, var(--radius-3xl)); border-top-right-radius: min(32px, var(--radius-3xl)); } .accordion--surface .accordion__item:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"])) [data-slot="accordion-trigger"] { border-bottom-left-radius: min(32px, var(--radius-3xl)); border-bottom-right-radius: min(32px, var(--radius-3xl)); } .breadcrumbs { align-items: center; display: flex; } .breadcrumbs .breadcrumbs__link { padding-inline: calc(var(--spacing) * .5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); opacity: 1; text-decoration-line: none; position: relative; } .breadcrumbs .breadcrumbs__link:hover, .breadcrumbs .breadcrumbs__link[data-hovered="true"] { text-decoration-line: underline; } .breadcrumbs .breadcrumbs__link[data-current="true"] { color: var(--link); opacity: 1; } .breadcrumbs .breadcrumbs__item { justify-content: center; align-items: center; gap: calc(var(--spacing) * .5); padding-inline: calc(var(--spacing) * .5); flex-shrink: 0; display: flex; } .breadcrumbs .breadcrumbs__separator { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: var(--muted); } .breadcrumbs .breadcrumbs__separator:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .disclosure-group { contain: layout style; width: 100%; } .disclosure { position: relative; } .accordion__heading { display: flex; } .disclosure__trigger { cursor: var(--cursor-interactive); -webkit-tap-highlight-color: transparent; display: inline-block; } .disclosure__trigger:focus-visible:not(:focus), .disclosure__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .disclosure__trigger:disabled, .disclosure__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .disclosure__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: inherit; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; margin-left: auto; transition-duration: .25s; } .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .disclosure__indicator[data-expanded="true"] { rotate: -180deg; } .disclosure__content { opacity: 0; height: var(--disclosure-panel-height); transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out); overflow: clip; } .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .disclosure__content[data-expanded="true"] { will-change: height, opacity; opacity: 1; } .disclosure__body { padding: calc(var(--spacing) * 2); } .link { border-radius: calc(var(--radius) * 1.5); --tw-font-weight: var(--font-weight-medium); width: fit-content; height: fit-content; font-weight: var(--font-weight-medium); color: var(--link); text-decoration-line: none; -webkit-text-decoration-color: var(--separator-tertiary); -webkit-text-decoration-color: var(--separator-tertiary); text-decoration-color: var(--separator-tertiary); text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; transition: color .1s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .1s var(--ease-out); align-items: center; text-decoration-thickness: 1.5px; display: inline-flex; position: relative; } .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .link { cursor: var(--cursor-interactive); } @media (hover: hover) { .link:hover, .link[data-hovered="true"] { text-decoration-line: underline; -webkit-text-decoration-color: var(--muted); -webkit-text-decoration-color: var(--muted); text-decoration-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .link:hover, .link[data-hovered="true"] { -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); } } :is(.link:hover, .link[data-hovered="true"]) .link__icon { opacity: 1; } } .link:active, .link[data-pressed="true"] { text-decoration-line: underline; -webkit-text-decoration-color: var(--muted); -webkit-text-decoration-color: var(--muted); text-decoration-color: var(--muted); } :is(.link:active, .link[data-pressed="true"]) .link__icon { opacity: 1; } .link:focus-visible:not(:focus), .link[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } :is(.link:focus-visible:not(:focus), .link[data-focus-visible="true"]) .link__icon { opacity: 1; } .link[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .link .link__icon { pointer-events: none; color: currentColor; opacity: .6; width: .75em; height: .75em; transition: opacity .15s var(--ease-out); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .link .link__icon svg { transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .link .link__icon[data-default-icon="true"] { margin-left: var(--spacing); padding-bottom: calc(var(--spacing) * 1.5); } .link.button { gap: 0; text-decoration-line: none; } .pagination { justify-content: space-between; align-items: center; gap: calc(var(--spacing) * 4); flex-direction: column; width: 100%; display: flex; } @media (min-width: 40rem) { .pagination { flex-direction: row; } } .pagination__summary { align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); align-self: flex-start; display: flex; } @media (min-width: 40rem) { .pagination__summary { align-self: center; } } .pagination__content { align-items: center; gap: var(--spacing); align-self: flex-start; display: flex; } @media (min-width: 40rem) { .pagination__content { align-self: center; } } .pagination__item { display: inline-flex; } .pagination__link { isolation: isolate; width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); transform-origin: center; border-radius: calc(var(--radius) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; justify-content: center; align-items: center; display: inline-flex; position: relative; } @media (min-width: 48rem) { .pagination__link { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } .pagination__link { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .pagination__link { --pagination-link-bg: transparent; --pagination-link-bg-hover: var(--default-hover); --pagination-link-bg-pressed: var(--default-hover); --pagination-link-fg: var(--default-foreground); background-color: var(--pagination-link-bg); color: var(--pagination-link-fg); } .pagination__link:focus-visible, .pagination__link[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .pagination__link:disabled, .pagination__link[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .pagination__link:hover, .pagination__link[data-hovered="true"] { background-color: var(--pagination-link-bg-hover); } } .pagination__link:active, .pagination__link[data-pressed="true"] { background-color: var(--pagination-link-bg-pressed); transform: scale(.97); } .pagination__link[data-active="true"] { --pagination-link-bg: var(--default); --pagination-link-bg-hover: var(--default-hover); --pagination-link-bg-pressed: var(--default-hover); } .pagination__ellipsis { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; display: inline-flex; } @media (min-width: 48rem) { .pagination__ellipsis { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } .pagination__link--nav { gap: calc(var(--spacing) * 1.5); width: auto; padding-inline: calc(var(--spacing) * 2.5); } .pagination--sm .pagination__link { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (min-width: 48rem) { .pagination--sm .pagination__link { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } } .pagination--sm .pagination__link:active, .pagination--sm .pagination__link[data-pressed="true"] { transform: scale(.98); } .pagination--sm .pagination__link--nav { width: auto; padding-inline: calc(var(--spacing) * 2); } .pagination--sm .pagination__ellipsis { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (min-width: 48rem) { .pagination--sm .pagination__ellipsis { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } } .pagination--sm .pagination__summary { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .pagination--lg .pagination__link { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .pagination--lg .pagination__link { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } } .pagination--lg .pagination__link:active, .pagination--lg .pagination__link[data-pressed="true"] { transform: scale(.96); } .pagination--lg .pagination__link--nav { width: auto; padding-inline: calc(var(--spacing) * 3); } .pagination--lg .pagination__ellipsis { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .pagination--lg .pagination__ellipsis { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } } .pagination--lg .pagination__summary { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .tabs { gap: calc(var(--spacing) * 2); display: flex; } .tabs[data-orientation="horizontal"] { flex-direction: column; } .tabs[data-orientation="vertical"] { flex-direction: row; } .tabs__list-container { background-color: var(--default); border-radius: calc(var(--radius) * 2.5); position: relative; } .tabs__list-container > .tabs__list-container__scroller[data-orientation="vertical"] { height: 100%; } .tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next { z-index: 2; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); cursor: var(--cursor-interactive); border-style: var(--tw-border-style); color: var(--foreground); --tw-outline-style: none; transition: opacity .15s var(--ease-smooth); background-color: #0000; border-width: 0; border-radius: 3.40282e38px; outline-style: none; justify-content: center; align-items: center; padding: 0; display: none; position: absolute; } :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):hover { opacity: .7; } } :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-prev { top: 50%; left: var(--spacing); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-next { top: 50%; right: var(--spacing); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .tabs__list-container:has([data-orientation="vertical"]) > .tabs__list-container__scroll-prev { top: var(--spacing); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .tabs__list-container:has([data-orientation="vertical"]) > .tabs__list-container__scroll-next { bottom: var(--spacing); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .tabs__list-container:has( > :is([data-left-scroll="true"], [data-left-right-scroll="true"], [data-top-scroll="true"], [data-top-bottom-scroll="true"])) > .tabs__list-container__scroll-prev, .tabs__list-container:has( > :is([data-right-scroll="true"], [data-left-right-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"])) > .tabs__list-container__scroll-next { display: inline-flex; } .tabs__list { padding: var(--spacing); display: inline-flex; } .tabs__list[data-orientation="horizontal"] { flex-direction: row; width: max-content; min-width: 100%; } .tabs__list[data-orientation="vertical"] { gap: var(--spacing); flex-direction: column; } .tabs__list[data-orientation="vertical"] .tabs__tab { min-width: calc(var(--spacing) * 20); } .tabs__tab { height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 3); width: 100%; padding-inline: calc(var(--spacing) * 4); text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; z-index: 1; cursor: var(--cursor-interactive); transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .15s var(--ease-smooth); outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs__tab[data-selected="true"] { color: var(--segment-foreground); } .tabs__tab[data-selected="true"] .tabs__separator, .tabs__tab[data-selected="true"] + .tabs__tab .tabs__separator { opacity: 0; } .tabs__tab:disabled, .tabs__tab[data-disabled="true"], .tabs__tab[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .tabs__tab:not([data-selected="true"]):not([data-disabled="true"]):hover, .tabs__tab[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) { opacity: .7; } } .tabs__tab:focus-visible:not(:focus), .tabs__tab[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .tabs__separator { pointer-events: none; border-radius: calc(var(--radius) * .5); background-color: var(--muted); position: absolute; } @supports (color: color-mix(in lab, red, red)) { .tabs__separator { background-color: color-mix(in oklab, var(--muted) 25%, transparent); } } .tabs__separator { transition: opacity .15s var(--ease-smooth); } .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs__list[data-orientation="horizontal"] .tabs__separator { width: 1px; height: 50%; top: 25%; left: 0; } .tabs__list[data-orientation="vertical"] .tabs__separator { width: 90%; height: 1px; top: 0; left: 5%; } .tabs__panel { width: 100%; padding: calc(var(--spacing) * 2); --tw-outline-style: none; outline-style: none; } .tabs__panel[data-exiting="true"] { width: 100%; position: absolute; top: 0; left: 0; } .tabs__panel[data-orientation="horizontal"] { margin-top: calc(var(--spacing) * 4); } .tabs__panel[data-orientation="vertical"] { margin-left: calc(var(--spacing) * 4); } .tabs__indicator { border-radius: calc(var(--radius) * 3); background-color: var(--segment); --tw-shadow: var(--surface-shadow); width: 100%; height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: -1; transition-property: translate, width, height; transition-duration: .25s; transition-timing-function: var(--ease-out-fluid); position: absolute; top: 0; left: 0; } .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs--secondary > .tabs__list-container { background-color: #0000; border-radius: 0; } .tabs--secondary > .tabs__list-container .tabs__list { padding: 0; } .tabs--secondary > .tabs__list-container .tabs__separator { display: none; } .tabs--secondary > .tabs__list-container .tabs__tab { border-radius: 0; } .tabs--secondary > .tabs__list-container .tabs__tab[data-selected="true"] { color: var(--foreground); } .tabs--secondary > .tabs__list-container .tabs__indicator { background-color: var(--accent); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: 0; } .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--border); } .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator { height: calc(var(--spacing) * .5); top: auto; bottom: 0; } .tabs--secondary[data-orientation="vertical"] > .tabs__list-container { border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--border); } .tabs--secondary[data-orientation="vertical"] > .tabs__list-container .tabs__indicator { height: 100%; width: calc(var(--spacing) * .5); top: 0; left: 0; } .button { isolation: isolate; height: calc(var(--spacing) * 10); transform-origin: center; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: calc(var(--radius) * 3); width: fit-content; padding-inline: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } @media (min-width: 48rem) { .button { height: calc(var(--spacing) * 9); } } .button { transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); will-change: transform; } .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .button { cursor: var(--cursor-interactive); --button-bg: transparent; --button-bg-hover: var(--button-bg); --button-bg-pressed: var(--button-bg-hover); --button-fg: currentColor; background-color: var(--button-bg); color: var(--button-fg); } .button:focus-visible:not(:focus), .button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .button:disabled, .button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .button[data-pending="true"] { pointer-events: none; } .button:active, .button[data-pressed="true"] { background-color: var(--button-bg-pressed); transform: scale(.97); } @media (hover: hover) { .button:hover, .button[data-hovered="true"] { background-color: var(--button-bg-hover); } } .button svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { pointer-events: none; margin-inline: calc(var(--spacing) * -.5); margin-block: calc(var(--spacing) * .5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; align-self: center; } @media (min-width: 40rem) { .button svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { margin-block: var(--spacing); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .button--sm { height: calc(var(--spacing) * 9); padding-inline: calc(var(--spacing) * 3); } @media (min-width: 48rem) { .button--sm { height: calc(var(--spacing) * 8); } } .button--sm svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .button--sm:active, .button--sm[data-pressed="true"] { transform: scale(.98); } .button--lg { height: calc(var(--spacing) * 11); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .button--lg { height: calc(var(--spacing) * 10); } } .button--lg:active, .button--lg[data-pressed="true"] { transform: scale(.96); } .button--primary { --button-bg: var(--accent); --button-bg-hover: var(--accent-hover); --button-bg-pressed: var(--accent-hover); --button-fg: var(--accent-foreground); } .button--secondary { --button-bg: var(--default); --button-bg-hover: var(--default-hover); --button-bg-pressed: var(--default-hover); --button-fg: var(--accent-soft-foreground); } .button--tertiary { --button-bg: var(--default); --button-bg-hover: var(--default-hover); --button-bg-pressed: var(--default-hover); } .button--ghost, .button--outline { --button-bg: transparent; --button-bg-hover: var(--default); --button-bg-pressed: var(--default); --button-fg: var(--default-foreground); } .button--outline { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); --button-bg-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { .button--outline { --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent); } } .button--danger { --button-bg: var(--danger); --button-bg-hover: var(--danger-hover); --button-bg-pressed: var(--danger-hover); --button-fg: var(--danger-foreground); } .button--danger-soft { --button-bg: var(--danger-soft); --button-bg-hover: var(--danger-soft-hover); --button-bg-pressed: var(--danger-soft-hover); --button-fg: var(--danger-soft-foreground); } .button--icon-only { width: calc(var(--spacing) * 10); padding: 0; } @media (min-width: 48rem) { .button--icon-only { width: calc(var(--spacing) * 9); } } .button--icon-only.button--sm { width: calc(var(--spacing) * 9); } @media (min-width: 48rem) { .button--icon-only.button--sm { width: calc(var(--spacing) * 8); } } .button--icon-only.button--lg { width: calc(var(--spacing) * 11); } @media (min-width: 48rem) { .button--icon-only.button--lg { width: calc(var(--spacing) * 10); } } .button--full-width { width: 100%; } .button-group { justify-content: center; align-items: center; gap: 0; height: auto; display: inline-flex; } .button-group--horizontal { flex-direction: row; } .button-group--vertical { flex-direction: column; } .button-group .button { border-radius: 0; } .button-group--horizontal .button:first-child { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .button-group--vertical .button:first-child { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .button-group--vertical .button:last-child { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--vertical .button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .button-group .button:active, .button-group .button[data-pressed="true"] { transform: none; } .button-group .button:focus-visible:not(:focus), .button-group .button[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .button-group__separator { border-radius: calc(var(--radius) * .5); opacity: .15; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; position: absolute; } .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .button-group--horizontal .button-group__separator { width: 1px; height: 50%; top: 25%; left: -1px; } .button-group--vertical .button-group__separator { width: 50%; height: 1px; top: -1px; left: 25%; } .button-group--horizontal .button--outline:first-child { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0; } .button-group--horizontal .button--outline:last-child { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0; } .button-group--horizontal .button--outline:not(:first-child):not(:last-child) { border-inline-style: var(--tw-border-style); border-inline-width: 0; } .button-group--vertical .button--outline:first-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .button-group--vertical .button--outline:last-child { border-top-style: var(--tw-border-style); border-top-width: 0; } .button-group--vertical .button--outline:not(:first-child):not(:last-child) { border-block-style: var(--tw-border-style); border-block-width: 0; } .button-group--full-width { width: 100%; } .toggle-button { isolation: isolate; height: calc(var(--spacing) * 10); transform-origin: center; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: calc(var(--radius) * 3); width: fit-content; padding-inline: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } @media (min-width: 48rem) { .toggle-button { height: calc(var(--spacing) * 9); } } .toggle-button { transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toggle-button { cursor: var(--cursor-interactive); --toggle-button-bg: var(--default); --toggle-button-bg-hover: var(--default-hover); --toggle-button-bg-pressed: var(--default-hover); --toggle-button-fg: currentColor; --toggle-button-bg-selected: var(--accent-soft); --toggle-button-bg-selected-hover: var(--accent-soft-hover); --toggle-button-bg-selected-pressed: var(--accent-soft-hover); --toggle-button-fg-selected: var(--accent-soft-foreground); background-color: var(--toggle-button-bg); color: var(--toggle-button-fg); } .toggle-button:focus-visible:not(:focus), .toggle-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .toggle-button:disabled, .toggle-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .toggle-button:hover, .toggle-button[data-hovered="true"] { background-color: var(--toggle-button-bg-hover); } } .toggle-button:active, .toggle-button[data-pressed="true"] { background-color: var(--toggle-button-bg-pressed); transform: scale(.97); } .toggle-button[data-selected="true"] { background-color: var(--toggle-button-bg-selected); color: var(--toggle-button-fg-selected); } @media (hover: hover) { .toggle-button[data-selected="true"]:hover, .toggle-button[data-selected="true"][data-hovered="true"] { background-color: var(--toggle-button-bg-selected-hover); } } .toggle-button[data-selected="true"]:active, .toggle-button[data-selected="true"][data-pressed="true"] { background-color: var(--toggle-button-bg-selected-pressed); } .toggle-button svg { pointer-events: none; margin-inline: calc(var(--spacing) * -.5); margin-block: calc(var(--spacing) * .5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; align-self: center; } @media (min-width: 40rem) { .toggle-button svg { margin-block: var(--spacing); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .toggle-button--sm { height: calc(var(--spacing) * 9); padding-inline: calc(var(--spacing) * 3); } @media (min-width: 48rem) { .toggle-button--sm { height: calc(var(--spacing) * 8); } } .toggle-button--sm svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toggle-button--sm:active, .toggle-button--sm[data-pressed="true"] { transform: scale(.98); } .toggle-button--lg { height: calc(var(--spacing) * 11); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .toggle-button--lg { height: calc(var(--spacing) * 10); } } .toggle-button--lg:active, .toggle-button--lg[data-pressed="true"] { transform: scale(.96); } .toggle-button--default { --toggle-button-bg: var(--default); --toggle-button-bg-hover: var(--default-hover); --toggle-button-bg-pressed: var(--default-hover); } .toggle-button--ghost { --toggle-button-bg: transparent; --toggle-button-bg-hover: var(--default); --toggle-button-bg-pressed: var(--default); --toggle-button-fg: var(--default-foreground); } .toggle-button--icon-only { width: calc(var(--spacing) * 10); padding: 0; } @media (min-width: 48rem) { .toggle-button--icon-only { width: calc(var(--spacing) * 9); } } .toggle-button--icon-only.toggle-button--sm { width: calc(var(--spacing) * 9); } @media (min-width: 48rem) { .toggle-button--icon-only.toggle-button--sm { width: calc(var(--spacing) * 8); } } .toggle-button--icon-only.toggle-button--lg { width: calc(var(--spacing) * 11); } @media (min-width: 48rem) { .toggle-button--icon-only.toggle-button--lg { width: calc(var(--spacing) * 10); } } .toggle-button-group { justify-content: center; align-items: center; gap: 0; width: fit-content; height: auto; display: inline-flex; } .toggle-button-group--horizontal { flex-direction: row; } .toggle-button-group--vertical { flex-direction: column; } .toggle-button-group--full-width { width: 100%; } .toggle-button-group .toggle-button { border-radius: 0; } .toggle-button-group--horizontal .toggle-button:first-child { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:first-child { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:last-child { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .toggle-button-group .toggle-button:active, .toggle-button-group .toggle-button[data-pressed="true"] { transform: none; } .toggle-button-group .toggle-button:focus-visible:not(:focus), .toggle-button-group .toggle-button[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .toggle-button-group--full-width .toggle-button { flex: 1; } .toggle-button-group__separator { border-radius: calc(var(--radius) * .5); opacity: .15; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; position: absolute; } .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toggle-button-group--horizontal .toggle-button-group__separator { width: 1px; height: 50%; top: 25%; left: -1px; } .toggle-button-group--vertical .toggle-button-group__separator { width: 50%; height: 1px; top: -1px; left: 25%; } .toggle-button-group--detached { gap: var(--spacing); } .toggle-button-group--detached .toggle-button { border-radius: calc(var(--radius) * 3); } .toggle-button-group--detached .toggle-button-group__separator { display: none; } .toolbar { align-items: center; gap: calc(var(--spacing) * 2); grid-auto-flow: column; width: fit-content; display: grid; } .toolbar .separator--vertical { align-self: center; height: 50%; } .toolbar .separator--horizontal { justify-content: center; justify-self: center; width: 50%; } .toolbar--vertical { grid-auto-flow: row; justify-content: flex-start; align-items: flex-start; } .toolbar--vertical .button-group { justify-content: flex-start; } .toolbar--attached { border-radius: calc(var(--radius) * 3); background-color: var(--surface); padding: var(--spacing); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dropdown { gap: var(--spacing); flex-direction: column; display: flex; } .dropdown__trigger { --tw-outline-style: none; transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; display: inline-block; } .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .dropdown__trigger { cursor: var(--cursor-interactive); } .dropdown__trigger:focus-visible:not(:focus), .dropdown__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .dropdown__trigger:disabled, .dropdown__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .dropdown__trigger[data-pending="true"] { pointer-events: none; } .dropdown__trigger:active, .dropdown__trigger[data-pressed="true"] { transform: scale(.97); } .dropdown__popover { max-width: 48svw; transform-origin: var(--trigger-anchor-point); scroll-padding-block: var(--spacing); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; background-color: var(--overlay); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); will-change: transform; padding: 0; overflow-y: auto; } @media (min-width: 48rem) { .dropdown__popover { min-width: calc(var(--spacing) * 55); } } .dropdown__popover { border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); } .dropdown__popover:focus-visible:not(:focus), .dropdown__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .dropdown__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .dropdown__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .dropdown__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .dropdown__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .dropdown__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .dropdown__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .dropdown__popover[data-exiting="true"], .dropdown__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .dropdown__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .dropdown__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .dropdown__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .dropdown__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .dropdown__popover [data-slot="dropdown-menu"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .dropdown__popover [data-slot="menu-item"] { padding-inline: calc(var(--spacing) * 2.5); } .dropdown__menu { gap: calc(var(--spacing) * .5); width: 100%; padding: var(--spacing); flex-direction: column; display: flex; position: relative; overflow: clip; } .dropdown__menu [data-slot="separator"] { width: 94%; margin-left: 3%; } .list-box-item { min-height: calc(var(--spacing) * 9); justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * 2); width: 100%; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out); outline-style: none; display: flex; position: relative; } .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item { cursor: var(--cursor-interactive); } .list-box-item [data-slot="label"] { pointer-events: none; -webkit-user-select: none; user-select: none; width: fit-content; } .list-box-item [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; user-select: none; } .list-box-item:has(.list-box-item__indicator) { padding-inline-end: calc(var(--spacing) * 7); } .list-box-item:focus-visible:not(:focus), .list-box-item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .list-box-item:active, .list-box-item[data-pressed="true"] { transform: scale(.98); } @media (hover: hover) { .list-box-item:hover, .list-box-item[data-hovered="true"] { background-color: var(--default); } } .list-box-item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .list-box-item__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--default-foreground); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; inset-inline-end: calc(var(--spacing) * 2); flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .25s; display: flex; position: absolute; top: 50%; } .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .3s; transition-duration: .3s; } .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] { transition: stroke-dashoffset .25s linear; } :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item--danger .list-box-item__indicator, .list-box-item--danger [data-slot="label"] { color: var(--danger); } .list-box-section { flex-direction: column; align-items: flex-start; gap: 0; display: flex; } .list-box { width: 100%; padding: var(--spacing); position: relative; overflow: clip; } .list-box > * + * { margin-top: var(--spacing); } .list-box [data-slot="separator"][data-orientation="horizontal"] { width: 94%; margin-left: 3%; } .menu-item { min-height: calc(var(--spacing) * 9); justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * 2); width: 100%; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out); will-change: transform; outline-style: none; display: flex; position: relative; } .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item { cursor: var(--cursor-interactive); } .menu-item [data-slot="label"] { pointer-events: none; -webkit-user-select: none; user-select: none; width: fit-content; } .menu-item [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; user-select: none; } .menu-item [data-slot="submenu-indicator"] svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .menu-item:has(.menu-item__indicator) { padding-inline-start: calc(var(--spacing) * 7); } .menu-item[data-has-submenu="true"]:has(.menu-item__indicator) { padding-inline-start: calc(var(--spacing) * 2); padding-inline-end: calc(var(--spacing) * 7); } .menu-item:focus-visible:not(:focus), .menu-item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .menu-item:active, .menu-item[data-pressed="true"] { transform: scale(.98); } @media (hover: hover) { .menu-item:hover, .menu-item[data-hovered="true"] { background-color: var(--default); } } :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"] { transition: stroke-dashoffset .1s linear; } :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--dot"] { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1; } .menu-item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .menu-item__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; inset-inline-start: calc(var(--spacing) * 2); flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .25s; display: flex; position: absolute; top: 50%; } .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item[data-has-submenu="true"] .menu-item__indicator { inset-inline-start: auto; inset-inline-end: calc(var(--spacing) * 2); } .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]) { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .3s; transition-duration: .3s; } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item__indicator [data-slot="menu-item-indicator--dot"] { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]) { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; transition-duration: .25s; } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item__indicator [data-slot="menu-item-indicator--dot"] { --tw-scale-x: 70%; --tw-scale-y: 70%; --tw-scale-z: 70%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; } .menu-item__indicator--submenu { color: var(--muted); } .menu-item__indicator--submenu svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .menu-item--danger .menu-item__indicator, .menu-item--danger [data-slot="label"] { color: var(--danger); } .menu-section { flex-direction: column; align-items: flex-start; gap: 0; display: flex; } .menu { gap: var(--spacing); width: 100%; padding: var(--spacing); flex-direction: column; display: flex; position: relative; overflow: clip; } .menu [data-slot="separator"] { width: 94%; margin-left: 3%; } .tag-group { gap: var(--spacing); flex-direction: column; display: flex; position: relative; } .tag-group__list { gap: calc(var(--spacing) * 1.5); flex-wrap: wrap; display: flex; position: relative; } .tag-group [slot="description"], .tag-group [data-slot="description"], .tag-group [slot="errorMessage"], .tag-group [data-slot="error-message"] { padding: var(--spacing); } .tag { --optical-offset: .031em; align-items: center; gap: var(--spacing); border-radius: calc(var(--radius) * 1.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out); transform-origin: center; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); display: inline-flex; position: relative; } .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tag { cursor: var(--cursor-interactive); } .tag svg { pointer-events: none; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: currentColor; flex-shrink: 0; align-self: center; } .tag:is([data-disabled="true"], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tag:is(:focus-visible, [data-focus-visible]) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .tag:is([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } @media (hover: hover) { .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent-soft-hover); } } .tag--sm { padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * .5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .tag--md { padding-inline: calc(var(--spacing) * 2); padding-block: var(--spacing); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .tag--lg { border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .tag--default { background-color: var(--default); color: var(--default-foreground); } @media (hover: hover) { .tag--default:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--default-hover); } } .tag--surface { background-color: var(--surface); color: var(--surface-foreground); } @media (hover: hover) { .tag--surface:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--surface-hover); } } .tag__remove-button { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: inherit; } .tag__remove-button svg { width: inherit; height: inherit; color: currentColor; flex-shrink: 0; align-self: center; } .color-area { width: 100%; max-width: calc(var(--spacing) * 56); border-radius: calc(var(--radius) * 2); -webkit-tap-highlight-color: transparent; aspect-ratio: 1; background: var(--color-area-background); flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px #0000001a; } .color-area[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-area--show-dots:after { content: ""; pointer-events: none; border-radius: inherit; background-image: radial-gradient(circle, #fff3 1px, #0000 1px); background-size: 8px 8px; position: absolute; inset: 0; } .color-area__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); will-change: width,height; background-color: var(--color-area-thumb-color); transition: width .15s var(--ease-out), height .15s var(--ease-out); border: 3px solid #fff; box-shadow: 0 0 0 1px #0000001a, inset 0 0 0 1px #0000001a; } .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-area__thumb[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-area__thumb[data-dragging="true"] { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .color-area__thumb[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-picker { display: inline-flex; } .color-picker__trigger { align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * .5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-flex; } .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-picker__trigger [data-slot="label"] { cursor: var(--cursor-interactive); } .color-picker__trigger:focus-visible:not(:focus), .color-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-picker__trigger:disabled, .color-picker__trigger[data-disabled="true"], .color-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-picker__popover { min-width: calc(var(--spacing) * 62); transform-origin: var(--trigger-anchor-point); scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; background-color: var(--overlay); padding-inline: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 2); padding-bottom: calc(var(--spacing) * 3); box-shadow: var(--shadow-overlay); border-radius: min(32px, calc(var(--radius) * 2.5)); gap: calc(var(--spacing) * 3); flex-direction: column; display: flex; overflow: hidden auto; } .color-picker__popover:focus-visible:not(:focus), .color-picker__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .color-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .color-picker__popover[data-entering="true"][data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .color-picker__popover[data-entering="true"][data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .color-picker__popover[data-entering="true"][data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .color-picker__popover[data-entering="true"][data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .color-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .color-picker__popover[data-exiting="true"], .color-picker__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .color-slider { gap: var(--spacing); grid-template: "label output" "track track" / 1fr auto; width: 100%; display: grid; } .color-slider:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template: "track" / 1fr; gap: 0; } .color-slider:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-columns: 1fr; grid-template-areas: "label" "track"; } .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-columns: 1fr; grid-template-areas: "output" "track"; } .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) .color-slider__output { justify-self: end; } .color-slider [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .color-slider .color-slider__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .color-slider .color-slider__track { border-radius: calc(var(--radius) * 2); grid-area: track; position: relative; } .color-slider .color-slider__track:before, .color-slider .color-slider__track:after { content: ""; z-index: 0; pointer-events: none; position: absolute; } .color-slider .color-slider__thumb { cursor: grab; border-radius: calc(var(--radius) * 2); -webkit-tap-highlight-color: transparent; border-style: var(--tw-border-style); border-width: 3px; border-color: var(--color-white); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: 1; transition: transform .25s var(--ease-out), box-shadow .15s var(--ease-out); justify-content: center; align-items: center; display: flex; position: absolute; } .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-slider .color-slider__thumb[data-dragging="true"] { cursor: grabbing; } .color-slider .color-slider__thumb[data-focus-visible="true"] { z-index: 10; --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-slider .color-slider__thumb[data-disabled="true"] { cursor: default; background-color: var(--default); } .color-slider:disabled, .color-slider[data-disabled="true"], .color-slider[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.color-slider:disabled, .color-slider[data-disabled="true"], .color-slider[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } .color-slider[data-orientation="horizontal"] { flex-direction: column; } .color-slider[data-orientation="horizontal"] .color-slider__track { height: calc(var(--spacing) * 5); border-radius: 0; justify-self: center; width: calc(100% - 1.25rem); box-shadow: inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__track:before, .color-slider[data-orientation="horizontal"] .color-slider__track:after { width: .625rem; height: 100%; top: 0; } .color-slider[data-orientation="horizontal"] .color-slider__track:before { border-top-left-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; left: -.625rem; box-shadow: inset 1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__track:after { border-top-right-radius: calc(var(--radius) * 2); border-bottom-right-radius: calc(var(--radius) * 2); background-color: var(--track-end-color, transparent); right: -.625rem; box-shadow: inset -1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); top: 50%; } .color-slider[data-orientation="vertical"] { gap: calc(var(--spacing) * 2); flex-direction: row; grid-template: "output" "track" 1fr "label" / 1fr; place-items: center; height: 100%; } .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-rows: 1fr; grid-template-areas: "track"; gap: 0; } .color-slider[data-orientation="vertical"]:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-rows: 1fr auto; grid-template-areas: "track" "label"; } .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-rows: auto 1fr; grid-template-areas: "output" "track"; } .color-slider[data-orientation="vertical"] .color-slider__output, .color-slider[data-orientation="vertical"] [data-slot="label"] { text-align: center; } .color-slider[data-orientation="vertical"] .color-slider__track { width: calc(var(--spacing) * 5); border-radius: 0; justify-self: center; height: calc(100% - 1.25rem); box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__track:before, .color-slider[data-orientation="vertical"] .color-slider__track:after { width: 100%; height: .625rem; left: 0; } .color-slider[data-orientation="vertical"] .color-slider__track:before { background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; border-bottom-right-radius: 999px; border-bottom-left-radius: 999px; bottom: -.625rem; box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-top-left-radius: 999px; border-top-right-radius: 999px; top: -.625rem; box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 1px #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); left: 50%; } .color-swatch { box-sizing: border-box; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); background: linear-gradient(var(--color-swatch-current), var(--color-swatch-current)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px #0000001a; } .color-swatch--circle { border-radius: calc(var(--radius) * 2); } .color-swatch--square { border-radius: calc(var(--radius) * .75); } .color-swatch--xs { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .color-swatch--xs.color-swatch--circle { border-radius: calc(var(--radius) * 1); } .color-swatch--sm { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .color-swatch--sm.color-swatch--circle { border-radius: calc(var(--radius) * 1.5); } .color-swatch--lg { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .color-swatch--lg.color-swatch--circle { border-radius: calc(var(--radius) * 3); } .color-swatch--xl { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .color-swatch--xl.color-swatch--circle { border-radius: calc(var(--radius) * 3); } .color-swatch-picker { align-items: center; gap: calc(var(--spacing) * 2); flex-wrap: wrap; display: flex; } .color-swatch-picker__item { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: border-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); border-width: 2px; border-color: #0000; outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-swatch-picker__item:focus-visible, .color-swatch-picker__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-swatch-picker__item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-swatch-picker__item[data-selected="true"] { border-color: var(--color-swatch-current); box-shadow: var(--field-shadow); } .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { transform: scale(.77); } .color-swatch-picker__swatch { border-radius: inherit; width: 100%; height: 100%; transition: transform .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); display: block; } .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .color-swatch-picker__swatch:hover { transform: scale(1.1); } } .color-swatch-picker__indicator { pointer-events: none; z-index: 10; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0; } .color-swatch-picker__indicator > * { width: 33.3333%; height: 33.3333%; color: var(--color-white); transition: transform .15s var(--ease-out); transform: scale(0) translateZ(0); } .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-swatch-picker__indicator[data-light-color="true"] .color-swatch-picker__indicator > * { color: var(--color-black); } .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__indicator > * { transform: scale(1) translateZ(0); } .color-swatch-picker--stack { flex-direction: column; } .color-swatch-picker--xs .color-swatch-picker__item { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1); border-style: var(--tw-border-style); border-width: 1px; } .color-swatch-picker--sm .color-swatch-picker__item { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(var(--radius) * 1.5); border-style: var(--tw-border-style); border-width: 2px; } .color-swatch-picker--lg .color-swatch-picker__item { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); border-radius: calc(var(--radius) * 3); border-style: var(--tw-border-style); border-width: 3px; } .color-swatch-picker--xl .color-swatch-picker__item { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); border-style: var(--tw-border-style); border-width: 3px; } .color-swatch-picker--square .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); } .color-swatch-picker--square .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item, .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * .75); } .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item, .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * .75); } .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); } .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); } .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-input-group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; align-items: center; display: inline-flex; overflow: hidden; } .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .color-input-group:hover:not(:focus-within), .color-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .color-input-group[data-focus-within="true"], .color-input-group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; } .color-input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .color-input-group[data-invalid="true"]:focus, .color-input-group[data-invalid="true"]:focus-visible, .color-input-group[data-invalid="true"][data-focused="true"], .color-input-group[data-invalid="true"][data-focus-visible="true"], .color-input-group[data-invalid="true"]:focus-within, .color-input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .color-input-group[data-disabled="true"], .color-input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-input-group__input { cursor: text; border-style: var(--tw-border-style); height: 100%; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; align-items: center; display: flex; } @media (min-width: 40rem) { .color-input-group__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .color-input-group__input::placeholder { color: var(--field-placeholder, var(--muted)); } .color-input-group:has([data-slot="color-input-group-prefix"]) .color-input-group__input { padding-left: calc(var(--spacing) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .color-input-group:has([data-slot="color-input-group-suffix"]) .color-input-group__input { padding-right: calc(var(--spacing) * 2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .color-input-group__input:focus, .color-input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .color-input-group__prefix { color: var(--field-placeholder, var(--muted)); margin-right: 0; margin-left: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .color-input-group__suffix { color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .color-input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-input-group-bg); --color-input-group-bg: var(--default); --color-input-group-bg-hover: var(--default-hover); --color-input-group-bg-focus: var(--default); } @media (hover: hover) { .color-input-group--secondary:hover:not(:focus-within), .color-input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--color-input-group-bg-hover); } } .color-input-group--secondary:focus-within, .color-input-group--secondary[data-focus-within="true"] { background-color: var(--color-input-group-bg-focus); } .color-input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .color-input-group--secondary[data-invalid="true"]:focus, .color-input-group--secondary[data-invalid="true"]:focus-visible, .color-input-group--secondary[data-invalid="true"][data-focused="true"], .color-input-group--secondary[data-invalid="true"][data-focus-visible="true"], .color-input-group--secondary[data-invalid="true"]:focus-within, .color-input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group--secondary[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--color-input-group-bg-focus); } .color-input-group--secondary [data-slot="color-input-group-input"] { background-color: #0000; } .color-input-group--full-width { width: 100%; } .color-field { gap: var(--spacing); flex-direction: column; display: flex; } :is(.color-field[data-invalid="true"], .color-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .color-field [data-slot="label"] { width: fit-content; } .color-field--full-width { width: 100%; } .slider { gap: var(--spacing); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .slider [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .slider .slider__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .slider .slider__track { border-radius: calc(var(--radius) * 1.5); background-color: var(--default); grid-area: track; position: relative; } .slider .slider__fill { pointer-events: none; background-color: var(--accent); position: absolute; } .slider .slider__thumb { cursor: grab; border-radius: calc(var(--radius) * 1.5); background-color: var(--accent); -webkit-tap-highlight-color: transparent; transition: background-color .25s var(--ease-smooth), transform .25s var(--ease-out), box-shadow .15s var(--ease-out); justify-content: center; align-items: center; display: flex; position: absolute; } .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .slider .slider__thumb:after { z-index: 10; border-radius: calc(var(--radius) * 1); background-color: var(--accent-foreground); color: var(--color-black); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); content: ""; transform-origin: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); position: relative; } .slider .slider__thumb:after:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb:after:not(:is()) { transition-property: none; } } .slider .slider__thumb[data-dragging="true"] { cursor: grabbing; } .slider .slider__thumb[data-dragging="true"]:after { scale: .9; } .slider .slider__thumb[data-dragging="true"]:after:is() { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb[data-dragging="true"]:after:not(:is()) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .slider .slider__thumb[data-focus-visible="true"] { z-index: 10; --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .slider .slider__thumb[data-disabled="true"] { cursor: default; } .slider:disabled, .slider[data-disabled="true"], .slider[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.slider:disabled, .slider[data-disabled="true"], .slider[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } .slider[data-orientation="horizontal"] { flex-direction: column; } .slider[data-orientation="horizontal"] .slider__track { height: calc(var(--spacing) * 5); border-inline-style: var(--tw-border-style); border-inline-width: .75rem; border-inline-color: #0000; width: 100%; } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"] { border-inline-start-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"] { border-inline-end-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__fill, .slider[data-orientation="horizontal"] .slider__thumb { height: 100%; } .slider[data-orientation="horizontal"] .slider__thumb { width: 1.75rem; top: 50%; } .slider[data-orientation="horizontal"] .slider__thumb:after { width: 1.5rem; height: 1rem; } .slider[data-orientation="vertical"] { gap: calc(var(--spacing) * 2); flex-direction: row; grid-template: "output" "track" 1fr "label" / 1fr; height: 100%; } .slider[data-orientation="vertical"] .slider__output, .slider[data-orientation="vertical"] [data-slot="label"] { text-align: center; } .slider[data-orientation="vertical"] .slider__track { height: 100%; width: calc(var(--spacing) * 5); border-block-style: var(--tw-border-style); border-block-width: .75rem; border-block-color: #0000; justify-self: center; } .slider[data-orientation="vertical"] .slider__track[data-fill-start="true"] { border-bottom-color: var(--accent); } .slider[data-orientation="vertical"] .slider__track[data-fill-end="true"] { border-top-color: var(--accent); } .slider[data-orientation="vertical"] .slider__fill, .slider[data-orientation="vertical"] .slider__thumb { width: 100%; } .slider[data-orientation="vertical"] .slider__thumb { height: 1.75rem; left: 50%; } .slider[data-orientation="vertical"] .slider__thumb:after { width: 1rem; height: 1.5rem; } .switch { align-items: flex-start; gap: var(--spacing); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); --switch-control-bg: var(--default); --switch-control-bg-hover: var(--switch-control-bg); flex-direction: column; display: flex; } @supports (color: color-mix(in lab, red, red)) { .switch { --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%); } } .switch { --switch-control-bg-pressed: var(--switch-control-bg-hover); --switch-control-bg-checked: var(--accent); --switch-control-bg-checked-hover: var(--accent-hover); } .switch[data-disabled="true"], .switch[data-disabled="true"] [data-slot="description"], .switch[data-disabled="true"] [data-slot="field-error"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .switch[data-disabled="true"] .switch__thumb { background-color: var(--default-foreground); } @supports (color: color-mix(in lab, red, red)) { .switch[data-disabled="true"] .switch__thumb { background-color: color-mix(in oklab, var(--default-foreground) 20%, transparent); } } .switch > [data-slot="description"] { width: 100%; min-width: 0; padding-inline-start: 3.25rem; } .switch > [data-slot="field-error"] { width: 100%; min-width: 0; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--muted); padding-inline-start: 3.25rem; } .switch.switch--sm > [data-slot="description"], .switch.switch--sm > [data-slot="field-error"] { padding-inline-start: 2.75rem; } .switch.switch--lg > [data-slot="description"], .switch.switch--lg > [data-slot="field-error"] { padding-inline-start: 3.75rem; } :is(.switch:disabled[aria-checked="true"], .switch:disabled[data-selected="true"], .switch[data-disabled="true"][aria-checked="true"], .switch[data-disabled="true"][data-selected="true"], .switch[aria-disabled="true"][aria-checked="true"], .switch[aria-disabled="true"][data-selected="true"]) .switch__thumb { opacity: .4; } .switch__control { border-radius: calc(var(--radius) * 1.5); background-color: var(--switch-control-bg); width: 2.5rem; height: 1.25rem; transition: background-color .25s var(--ease-smooth), box-shadow .15s var(--ease-out); flex-shrink: 0; align-items: center; display: flex; position: relative; overflow: hidden; } .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .switch:focus-visible .switch__control, .switch:has([data-slot="switch-content"][data-focus-visible="true"]) .switch__control, .switch [data-slot="switch-content"][data-focus-visible="true"] .switch__control { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .switch:hover .switch__control, .switch:has([data-slot="switch-content"][data-hovered="true"]) .switch__control, .switch [data-slot="switch-content"][data-hovered="true"] .switch__control { background-color: var(--switch-control-bg-hover); } .switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control { background-color: var(--switch-control-bg-pressed); } :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transform: none; } @media (prefers-reduced-motion: reduce) { :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transform: none; } } .switch[aria-checked="true"] .switch__control, .switch[data-selected="true"] .switch__control { background-color: var(--switch-control-bg-checked); } .switch[aria-checked="true"]:hover .switch__control, .switch[data-selected="true"]:hover .switch__control, .switch[aria-checked="true"][data-hovered="true"] .switch__control, .switch[data-selected="true"][data-hovered="true"] .switch__control, .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] .switch__control, .switch[aria-checked="true"]:active .switch__control, .switch[data-selected="true"]:active .switch__control, .switch[aria-checked="true"][data-pressed="true"] .switch__control, .switch[data-selected="true"][data-pressed="true"] .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch__content { cursor: inherit; align-items: center; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } .switch--sm .switch__control { border-radius: calc(var(--radius) * 1); width: 2rem; height: 1rem; } .switch--lg .switch__control { width: 3rem; height: 1.5rem; } .switch__thumb { transform-origin: center; border-radius: calc(var(--radius) * 1); background-color: var(--color-white); color: var(--color-black); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); width: 1.375rem; height: 1rem; transition: margin .3s var(--ease-out-fluid), background-color .2s var(--ease-out); margin-inline-start: calc(var(--spacing) * .5); display: flex; } .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .switch[aria-checked="true"] .switch__thumb, .switch[data-selected="true"] .switch__thumb { background-color: var(--accent-foreground); color: var(--accent); margin-inline-start: calc(100% - 1.5rem); box-shadow: 0 0 5px #00000005, 0 2px 10px #0000000f, 0 0 1px #0000004d; } .switch--sm .switch__thumb { border-radius: calc(var(--radius) * .75); width: 1.03125rem; height: .75rem; } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb), .switch[data-selected="true"] :is(.switch--sm .switch__thumb) { margin-inline-start: calc(100% - 1.15625rem); } .switch--lg .switch__thumb { border-radius: calc(var(--radius) * 1.5); width: 1.71875rem; height: 1.25rem; } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb), .switch[data-selected="true"] :is(.switch--lg .switch__thumb) { margin-inline-start: calc(100% - 1.84375rem); } .switch__thumb > * { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; } .switch__label { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .switch [data-slot="label"] { -webkit-user-select: none; user-select: none; } .switch__content [data-slot="label"] { cursor: var(--cursor-interactive); } .switch [data-slot="description"] { cursor: default; -webkit-user-select: none; user-select: none; } .switch-group { gap: calc(var(--spacing) * 6); flex-direction: column; display: flex; } .switch-group__items { gap: calc(var(--spacing) * 4); display: flex; } .switch-group--horizontal .switch-group__items { flex-direction: row; } .switch-group--vertical .switch-group__items { flex-direction: column; } .badge { justify-content: center; align-items: center; gap: calc(var(--spacing) * .5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); min-height: calc(var(--spacing) * 7); min-width: calc(var(--spacing) * 7); border-radius: calc(var(--radius) * 3); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: 1.34; --badge-bg: var(--default); --badge-fg: var(--default-foreground); --badge-border: var(--background); background-color: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-border); flex-shrink: 0; line-height: 1.34; display: inline-flex; } .badge__label { padding-inline: calc(var(--spacing) * .5); } .badge-anchor { flex-shrink: 0; display: inline-flex; position: relative; } .badge--lg { min-height: calc(var(--spacing) * 8); min-width: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; line-height: 1.43; } .badge--sm { min-height: calc(var(--spacing) * 4); min-width: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); --tw-leading: 1.34; font-size: 10px; line-height: 1.34; } .badge--accent { --badge-fg: var(--accent-soft-foreground); } .badge--default { --badge-fg: var(--default-foreground); } .badge--success { --badge-fg: var(--success-soft-foreground); } .badge--warning { --badge-fg: var(--warning-soft-foreground); } .badge--danger { --badge-fg: var(--danger-soft-foreground); } .badge--top-right { position: absolute; top: 0; right: 0; transform: translate(25%, -25%); } .badge--top-left { position: absolute; top: 0; left: 0; transform: translate(-25%, -25%); } .badge--bottom-right { position: absolute; bottom: 0; right: 0; transform: translate(25%, 25%); } .badge--bottom-left { position: absolute; bottom: 0; left: 0; transform: translate(-25%, 25%); } .badge--primary.badge--accent { --badge-bg: var(--accent); --badge-fg: var(--accent-foreground); } .badge--primary.badge--default { --badge-bg: var(--default); --badge-fg: var(--default-foreground); } .badge--primary.badge--success { --badge-bg: var(--success); --badge-fg: var(--success-foreground); } .badge--primary.badge--warning { --badge-bg: var(--warning); --badge-fg: var(--warning-foreground); } .badge--primary.badge--danger { --badge-bg: var(--danger); --badge-fg: var(--danger-foreground); } .badge--soft.badge--accent { --badge-bg: var(--accent-soft); --badge-fg: var(--accent-soft-foreground); } .badge--soft.badge--default { --badge-bg: var(--default-soft); --badge-fg: var(--default-soft-foreground); } .badge--soft.badge--success { --badge-bg: var(--success-soft); --badge-fg: var(--success-soft-foreground); } .badge--soft.badge--warning { --badge-bg: var(--warning-soft); --badge-fg: var(--warning-soft-foreground); } .badge--soft.badge--danger { --badge-bg: var(--danger-soft); --badge-fg: var(--danger-soft-foreground); } .chip { align-items: center; gap: calc(var(--spacing) * .5); border-radius: calc(var(--radius) * 2); width: fit-content; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * .5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --chip-bg: var(--default); --chip-fg: currentColor; background-color: var(--chip-bg); color: var(--chip-fg); flex-shrink: 0; display: inline-flex; } .chip__label { padding-inline: calc(var(--spacing) * .5); } .chip--accent { --chip-fg: var(--accent-soft-foreground); } .chip--danger { --chip-fg: var(--danger-soft-foreground); } .chip--default { --chip-fg: var(--default-foreground); } .chip--success { --chip-fg: var(--success-soft-foreground); } .chip--warning { --chip-fg: var(--warning-soft-foreground); } .chip--tertiary { --chip-bg: transparent; } .chip--sm { padding-inline: var(--spacing); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); padding-block: 0; } .chip--md { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .chip--lg { padding-inline: calc(var(--spacing) * 3); padding-block: var(--spacing); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .chip--primary.chip--accent { --chip-bg: var(--accent); --chip-fg: var(--accent-foreground); } .chip--primary.chip--success { --chip-bg: var(--success); --chip-fg: var(--success-foreground); } .chip--primary.chip--warning { --chip-bg: var(--warning); --chip-fg: var(--warning-foreground); } .chip--primary.chip--danger { --chip-bg: var(--danger); --chip-fg: var(--danger-foreground); } .chip--accent.chip--soft { --chip-bg: var(--accent-soft); --chip-fg: var(--accent-soft-foreground); } .chip--success.chip--soft { --chip-bg: var(--success-soft); --chip-fg: var(--success-soft-foreground); } .chip--warning.chip--soft { --chip-bg: var(--warning-soft); --chip-fg: var(--warning-soft-foreground); } .chip--danger.chip--soft { --chip-bg: var(--danger-soft); --chip-fg: var(--danger-soft-foreground); } .chip--default.chip--soft { --chip-bg: var(--default-soft); --chip-fg: var(--default-soft-foreground); } .table-root { grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; overflow: clip; } .table__scroll-container { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); scrollbar-gutter: auto; overflow-x: auto; } .table-root--primary { background-color: var(--surface-secondary); padding-inline: var(--spacing); padding-bottom: var(--spacing); border-radius: min(32px, calc(var(--radius) * 2.5)); } .table-root--secondary .table__header { border-bottom-style: var(--tw-border-style); background-color: #0000; border-bottom-width: 0; } .table-root--secondary .table__column { background-color: var(--surface-secondary); } .table-root--secondary :is(th.table__column:first-child, [role="row"] > [role="presentation"]:first-of-type > .table__column) { border-start-start-radius: min(32px, var(--radius-2xl)); border-end-start-radius: min(32px, var(--radius-2xl)); } .table-root--secondary :is(th.table__column:last-child, [role="row"] > [role="presentation"]:last-of-type > .table__column) { border-start-end-radius: min(32px, var(--radius-2xl)); border-end-end-radius: min(32px, var(--radius-2xl)); } .table-root--secondary .table__body { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .table-root--secondary .table__body tr:first-child td:first-child, .table-root--secondary .table__body tr:first-child td:last-child, .table-root--secondary .table__body tr:last-child td:first-child, .table-root--secondary .table__body tr:last-child td:last-child { border-radius: 0; } .table-root--secondary .table__body:not(tbody) { border-radius: 0; overflow: visible; } .table-root--secondary .table__row .table__cell { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator-tertiary); } @supports (color: color-mix(in lab, red, red)) { .table-root--secondary .table__row .table__cell { border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent); } } .table-root--secondary .table__row .table__cell { background-color: #0000; } @media (hover: hover) { .table-root--secondary .table__row:hover .table__cell, .table-root--secondary .table__row[data-hovered="true"] .table__cell { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .table-root--secondary .table__row:hover .table__cell, .table-root--secondary .table__row[data-hovered="true"] .table__cell { background-color: color-mix(in oklab, var(--default) 50%, transparent); } } } .table__content { border-collapse: separate; --tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .table-root--primary .table__content { overflow: clip; } .table__header { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); } @supports (color: color-mix(in lab, red, red)) { .table__header { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } } .table__header { background-color: var(--surface-secondary); } .table__column { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); text-align: left; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); position: relative; } .table__column:after { content: ""; pointer-events: none; height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); width: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .5); background-color: var(--separator); inset-inline-end: calc(var(--spacing) * 0); position: absolute; top: 50%; } .table__column:last-child:not(:only-child):after { content: none; } .table__column[data-allows-sorting="true"] { cursor: var(--cursor-interactive); } @media (hover: hover) { .table__column[data-allows-sorting="true"]:hover, .table__column[data-allows-sorting="true"][data-hovered="true"] { color: var(--foreground); } } .table__column:focus-visible, .table__column[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--focus); outline-style: none; } [role="row"] > [role="presentation"]:last-of-type:not(:only-of-type) > .table__column:after { content: none; } .table__sortable-column-header { justify-content: space-between; align-items: center; display: flex; } .table__sortable-column-indicator { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .1s; --tw-ease: var(--ease-out); transition-duration: .1s; transition-timing-function: var(--ease-out); } .table__sortable-column-indicator[data-direction="descending"] { rotate: 180deg; } .table__body tr:first-child td:first-child { border-start-start-radius: min(32px, var(--radius-2xl)); } .table__body tr:first-child td:last-child { border-start-end-radius: min(32px, var(--radius-2xl)); } .table__body tr:last-child td:first-child { border-end-start-radius: min(32px, var(--radius-2xl)); } .table__body tr:last-child td:last-child { border-end-end-radius: min(32px, var(--radius-2xl)); } .table__body:not(tbody) { border-radius: min(32px, var(--radius-2xl)); height: 100%; position: relative; overflow: clip; } .table__row { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); height: 100%; position: relative; } @supports (color: color-mix(in lab, red, red)) { .table__row { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } } .table__row:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } @media (hover: hover) { .table__row:hover .table__cell, .table__row[data-hovered="true"] .table__cell { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .table__row:hover .table__cell, .table__row[data-hovered="true"] .table__cell { background-color: color-mix(in oklab, var(--surface) 40%, transparent); } } } .table__row[data-selected="true"] .table__cell { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .table__row[data-selected="true"] .table__cell { background-color: color-mix(in oklab, var(--surface) 10%, transparent); } } .table__row[aria-disabled="true"], .table__row[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .table__row:focus-visible, .table__row[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .table__row[data-dragging="true"] { opacity: .5; } .table__row[data-drop-target="true"] .table__cell { background-color: var(--accent-soft); } .table__cell { background-color: var(--surface); height: 100%; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); vertical-align: middle; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--foreground); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator-tertiary); } @supports (color: color-mix(in lab, red, red)) { .table__cell { border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent); } } .table__cell:focus-visible, .table__cell[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--focus); outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) :is(.table__cell, .table__column) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):only-child, .table__row:is(:focus-visible, [data-focus-visible="true"]) > :only-child :is(.table__cell, .table__column) { border-radius: calc(var(--radius) * 1); --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):first-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :first-child:not(:only-child) :is(.table__cell, .table__column) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); --tw-shadow: inset 2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):last-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :last-child:not(:only-child) :is(.table__cell, .table__column) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); --tw-shadow: inset -2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):not(:first-child):not(:last-child):not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :not(:first-child):not(:last-child):not(:only-child) :is(.table__cell, .table__column) { --tw-shadow: inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .table__cell[data-tree-column] { padding-inline-start: calc(1rem * var(--table-row-level, 1)); } .table__footer { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); align-items: center; display: flex; } .table__resizable-container { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); scrollbar-gutter: auto; position: relative; overflow: auto; } .table__column-resizer { height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); border-radius: calc(var(--radius) * .5); background-color: var(--separator); box-sizing: content-box; --tw-translate-x: calc(1 / 2 * 100%); width: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); cursor: col-resize; touch-action: none; padding-inline: calc(var(--spacing) * 2); --tw-border-style: none; --tw-outline-style: none; inset-inline-end: calc(var(--spacing) * 0); background-clip: content-box; border-style: none; outline-style: none; position: absolute; top: 50%; } .table__column-resizer[data-hovered="true"], .table__column-resizer:hover, .table__column-resizer[data-resizing="true"] { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--accent); } .table__column-resizer[data-focus-visible="true"], .table__column-resizer:focus-visible { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--focus); } .table__column:has(.table__column-resizer):after { content: none; } .table__load-more td, .table__load-more [role="rowheader"] { padding-block: calc(var(--spacing) * 3); text-align: center; } :is(.table__load-more td, .table__load-more [role="rowheader"]) > * { margin-inline: auto; } .table__load-more-content { justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2); display: flex; } .alert { justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 4); background-color: var(--surface); width: 100%; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: min(32px, var(--radius-3xl)); flex-direction: row; display: flex; } .alert__content { flex-direction: column; flex-grow: 1; align-items: flex-start; height: 100%; display: flex; } .alert__indicator { padding: var(--spacing); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; display: flex; } .alert__indicator [data-slot="alert-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .alert__title { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .alert__description { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); } .alert--default .alert__indicator, .alert--default .alert__title { color: var(--foreground); } .alert--accent .alert__indicator, .alert--accent .alert__title { color: var(--accent-soft-foreground); } .alert--success .alert__indicator, .alert--success .alert__title { color: var(--success-soft-foreground); } .alert--warning .alert__indicator, .alert--warning .alert__title { color: var(--warning-soft-foreground); } .alert--danger .alert__indicator, .alert--danger .alert__title { color: var(--danger-soft-foreground); } .empty-state { padding: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); } .skeleton { pointer-events: none; border-radius: calc(var(--radius) * .5); background-color: var(--surface-tertiary); position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .skeleton { background-color: color-mix(in oklab, var(--surface-tertiary) 70%, transparent); } } .skeleton--shimmer:after { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); --tw-gradient-position: to right; animation: 2s linear infinite skeleton; position: absolute; inset: 0; } @supports (background-image: linear-gradient(in lab, red, red)) { .skeleton--shimmer:after { --tw-gradient-position: to right in oklab; } } .skeleton--shimmer:after { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: transparent; --tw-gradient-via: var(--surface-tertiary); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-to: transparent; --tw-content: ""; content: var(--tw-content); } .skeleton--shimmer:has(.skeleton):after { content: none; } .skeleton--shimmer:has(.skeleton):before { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); --tw-content: ""; content: var(--tw-content); z-index: 10; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(90deg, #0000 0%, #ffffff80 50%, #0000 100%); animation: 2s linear infinite skeleton; position: absolute; inset: 0; } .skeleton--shimmer:has(.skeleton) .skeleton:after { content: none; } .skeleton--pulse { animation: var(--animate-pulse); } .meter { gap: var(--spacing); --meter-fill: var(--accent); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .meter [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .meter .meter__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .meter .meter__track { border-radius: calc(var(--radius) * .5); background-color: var(--default); height: calc(var(--spacing) * 2); grid-area: track; position: relative; overflow: hidden; } .meter .meter__fill { border-radius: calc(var(--radius) * .5); background-color: var(--meter-fill); height: 100%; transition: width .3s var(--ease-out); position: absolute; top: 0; left: 0; } .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .meter:disabled, .meter[data-disabled="true"], .meter[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.meter:disabled, .meter[data-disabled="true"], .meter[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } .meter--sm .meter__track { height: var(--spacing); border-radius: calc(var(--radius) * .25); } .meter--sm .meter__fill { border-radius: calc(var(--radius) * .25); } .meter--lg .meter__track { height: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * .75); } .meter--lg .meter__fill { border-radius: calc(var(--radius) * .75); } .meter--default { --meter-fill: var(--default-foreground); } .meter--accent { --meter-fill: var(--accent); } .meter--success { --meter-fill: var(--success); } .meter--warning { --meter-fill: var(--warning); } .meter--danger { --meter-fill: var(--danger); } .progress-bar { gap: var(--spacing); --progress-bar-fill: var(--accent); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .progress-bar [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .progress-bar .progress-bar__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .progress-bar .progress-bar__track { border-radius: calc(var(--radius) * .5); background-color: var(--default); height: calc(var(--spacing) * 2); grid-area: track; position: relative; overflow: hidden; } .progress-bar .progress-bar__fill { border-radius: calc(var(--radius) * .5); background-color: var(--progress-bar-fill); height: 100%; transition: width .3s var(--ease-out); position: absolute; top: 0; left: 0; } .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .progress-bar:not([aria-valuenow]) .progress-bar__fill { width: 40%; animation: 1.5s cubic-bezier(.65, 0, .35, 1) infinite progress-bar-indeterminate; } .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .progress-bar:disabled, .progress-bar[data-disabled="true"], .progress-bar[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.progress-bar:disabled, .progress-bar[data-disabled="true"], .progress-bar[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } @keyframes progress-bar-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } .progress-bar--sm .progress-bar__track { height: var(--spacing); border-radius: calc(var(--radius) * .25); } .progress-bar--sm .progress-bar__fill { border-radius: calc(var(--radius) * .25); } .progress-bar--lg .progress-bar__track { height: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * .75); } .progress-bar--lg .progress-bar__fill { border-radius: calc(var(--radius) * .75); } .progress-bar--default { --progress-bar-fill: var(--default-foreground); } .progress-bar--accent { --progress-bar-fill: var(--accent); } .progress-bar--success { --progress-bar-fill: var(--success); } .progress-bar--warning { --progress-bar-fill: var(--warning); } .progress-bar--danger { --progress-bar-fill: var(--danger); } .progress-circle { --progress-circle-stroke: var(--accent); --progress-circle-track-stroke: var(--default); justify-content: center; align-items: center; display: inline-flex; } .progress-circle .progress-circle__track { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .progress-circle .progress-circle__track-circle { stroke: var(--progress-circle-track-stroke); } .progress-circle .progress-circle__fill-circle { stroke: var(--progress-circle-stroke); transition: stroke-dashoffset .3s var(--ease-out); } .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .progress-circle:not([aria-valuenow]) .progress-circle__track { animation: 1s linear infinite progress-circle-spin; } .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .progress-circle:disabled, .progress-circle[data-disabled="true"], .progress-circle[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @keyframes progress-circle-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .progress-circle--sm .progress-circle__track { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .progress-circle--lg .progress-circle__track { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .progress-circle--default { --progress-circle-stroke: var(--default-foreground); } .progress-circle--accent { --progress-circle-stroke: var(--accent); } .progress-circle--success { --progress-circle-stroke: var(--success); } .progress-circle--warning { --progress-circle-stroke: var(--warning); } .progress-circle--danger { --progress-circle-stroke: var(--danger); } .spinner { pointer-events: none; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); flex-shrink: 0; animation: .75s linear infinite spin; display: inline-flex; } .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .spinner--sm { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .spinner--lg { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .spinner--xl { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .spinner--current { color: inherit; } .spinner--accent { color: var(--accent); } .spinner--danger { color: var(--danger); } .spinner--success { color: var(--success); } .spinner--warning { color: var(--warning); } .toast-region { pointer-events: none; z-index: 50; --tw-outline-style: none; outline-style: none; width: calc(100vw - 2rem); position: fixed; } @media (min-width: 40rem) { .toast-region { width: auto; min-width: var(--toast-width); } } .toast-region { display: block; } .toast-region--bottom { bottom: calc(var(--spacing) * 4); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .toast-region--bottom-start { bottom: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4); } .toast-region--bottom-end { right: calc(var(--spacing) * 4); bottom: calc(var(--spacing) * 4); } .toast-region--top { top: calc(var(--spacing) * 4); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .toast-region--top-start { top: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4); } .toast-region--top-end { top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); } .toast-region:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; outline-color: var(--focus); } .toast { pointer-events: auto; justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 1.5); background-color: var(--surface); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: min(32px, var(--radius-3xl)); flex-direction: row; display: flex; position: absolute; left: 0; right: 0; } .toast--bottom, .toast--bottom-start, .toast--bottom-end { bottom: 0; } .toast--top, .toast--top-start, .toast--top-end { top: 0; } .toast:not([data-frontmost="true"]) { pointer-events: none; height: var(--front-height); overflow: hidden; } .toast:not([data-frontmost="true"]) .toast__close-button { pointer-events: none; opacity: 0; outline: none; } .toast[data-hidden="true"] { pointer-events: none; opacity: 0; display: flex; } .toast:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; outline-color: var(--focus); } .toast--bottom, .toast--bottom-start, .toast--bottom-end { view-transition-class: toast-bottom; } .toast--top, .toast--top-start, .toast--top-end { view-transition-class: toast-top; } .toast__content { flex-direction: column; flex-grow: 1; align-self: center; align-items: flex-start; height: 100%; display: flex; } .toast__indicator { padding: var(--spacing); color: var(--overlay-foreground); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .toast__indicator [data-slot="toast-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toast__indicator [data-slot="spinner"], .toast__indicator [data-slot="spinner-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toast__title { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--overlay-foreground); } .toast__description { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); } .toast__close-button { pointer-events: none; top: calc(var(--spacing) * -1); right: calc(var(--spacing) * -1); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); border-color: var(--border); background-color: var(--default); opacity: 0; position: absolute; } @media (min-width: 40rem) { .toast__close-button { border-style: var(--tw-border-style); background-color: var(--overlay); border-width: 1px; } } .toast__close-button { transition: opacity .15s var(--ease-smooth); } .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toast__close-button [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } @media (min-width: 40rem) { .toast__close-button [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } @media (hover: hover) { .toast__close-button:hover, .toast__close-button[data-hovered="true"] { background-color: var(--default); } } .toast[data-frontmost="true"]:hover .toast__close-button { pointer-events: auto; opacity: 1; } .toast__action { margin-top: calc(var(--spacing) * 2); } @media (min-width: 40rem) { .toast__action { margin-top: 0; } } .toast--accent .toast__title { color: var(--accent-soft-foreground); } .toast--success .toast__title, .toast--success .toast__indicator { color: var(--success-soft-foreground); } .toast--warning .toast__title, .toast--warning .toast__indicator { color: var(--warning-soft-foreground); } .toast--danger .toast__title, .toast--danger .toast__indicator { color: var(--danger-soft-foreground); } ::view-transition-old(*) { will-change: translate, opacity; } ::view-transition-new(*) { will-change: translate, opacity; } ::view-transition-new(.toast-bottom):only-child { animation: .35s toast-slide-bottom-in; } ::view-transition-old(.toast-bottom):only-child { animation: .35s forwards toast-slide-bottom-out; } ::view-transition-new(.toast-top):only-child { animation: .35s toast-slide-top-in; } ::view-transition-old(.toast-top):only-child { animation: .35s forwards toast-slide-top-out; } @keyframes toast-slide-bottom-in { from { opacity: 0; translate: 0 100%; } } @keyframes toast-slide-bottom-out { to { opacity: 0; translate: 0 100%; } } @keyframes toast-slide-top-in { from { opacity: 0; translate: 0 -100%; } } @keyframes toast-slide-top-out { to { opacity: 0; translate: 0 -100%; } } .checkbox-group { flex-direction: column; display: flex; } .checkbox-group [data-slot="checkbox"] { margin-top: calc(var(--spacing) * 4); } .checkbox { align-items: flex-start; gap: var(--spacing); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-direction: column; display: flex; } .checkbox > [data-slot="description"], .checkbox > [data-slot="field-error"] { cursor: default; width: 100%; min-width: 0; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); -webkit-user-select: none; user-select: none; padding-inline-start: calc(var(--spacing) * 7); } .checkbox [data-slot="label"] { -webkit-user-select: none; user-select: none; } .checkbox .checkbox__content [data-slot="label"] { cursor: var(--cursor-interactive); } .checkbox[data-disabled="true"], .checkbox[data-disabled="true"] [data-slot="description"], .checkbox[data-disabled="true"] [data-slot="field-error"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.checkbox[data-selected="true"], .checkbox[data-indeterminate="true"]) .checkbox__indicator { border-color: var(--accent-foreground); } .checkbox [data-slot="checkbox-default-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); stroke-width: 2.5px; color: var(--accent-foreground); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .2s; transition-duration: .2s; } .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] { transition: stroke-dashoffset .15s linear 15ms; } .checkbox[data-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] { color: var(--danger-foreground); } .checkbox[data-indeterminate="true"] [data-slot="checkbox-default-indicator--indeterminate"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .checkbox[data-indeterminate="true"][data-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"], .checkbox[data-indeterminate="true"][aria-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"] { color: var(--danger-foreground); } .checkbox__control { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * .75); border-style: var(--tw-border-style); border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border, var(--border)); background-color: var(--field-background, var(--default)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; overflow: hidden; } .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox__control { cursor: var(--cursor-interactive); } .checkbox__control:before { pointer-events: none; z-index: 0; transform-origin: center; --tw-scale-x: 70%; --tw-scale-y: 70%; --tw-scale-z: 70%; scale: var(--tw-scale-x) var(--tw-scale-y); border-radius: calc(var(--radius) * .75); background-color: var(--accent); opacity: 0; --tw-content: ""; content: var(--tw-content); transition: scale .1s var(--ease-linear), opacity .2s var(--ease-linear), background-color .2s var(--ease-out); position: absolute; inset: 0; } .checkbox__control:before:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox__control:before:not(:is()) { transition-property: none; } } .checkbox:focus-visible .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-focus-visible="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-focus-visible="true"] .checkbox__control { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .checkbox:hover .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-hovered="true"] .checkbox__control { border-color: var(--field-border-hover); } :is(.checkbox:hover .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-hovered="true"] .checkbox__control):before { background-color: var(--accent-hover); } .checkbox[aria-checked="true"] .checkbox__control, .checkbox[data-selected="true"] .checkbox__control { color: var(--accent-foreground); border-color: #0000; } :is(.checkbox[aria-checked="true"] .checkbox__control, .checkbox[data-selected="true"] .checkbox__control):before { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1; } .checkbox[data-indeterminate="true"] .checkbox__control { background-color: var(--accent); color: var(--accent-foreground); } .checkbox:active[data-indeterminate="true"] .checkbox__control, .checkbox[data-pressed="true"][data-indeterminate="true"] .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"] .checkbox__control { background-color: var(--accent-hover); } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus-visible, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focused="true"], :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focus-visible="true"], :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus-within, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[data-invalid="true"][data-selected="true"] .checkbox__control, .checkbox[aria-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[aria-invalid="true"][data-selected="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: #0000; } :is(.checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[data-invalid="true"][data-selected="true"] .checkbox__control, .checkbox[aria-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[aria-invalid="true"][data-selected="true"] .checkbox__control):before { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); background-color: var(--danger); opacity: 1; } .checkbox[data-indeterminate="true"][aria-invalid="true"] .checkbox__control, .checkbox[data-indeterminate="true"][data-invalid="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); } .checkbox__indicator { z-index: 10; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); justify-content: center; align-items: center; display: flex; position: relative; } .checkbox__indicator svg { width: 100%; height: 100%; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .checkbox--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox--secondary .checkbox__control { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--checkbox-control-bg); --checkbox-control-bg: var(--default); } .checkbox:hover :is(.checkbox--secondary .checkbox__control), .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) :is(.checkbox--secondary .checkbox__control), .checkbox [data-slot="checkbox-content"][data-hovered="true"] :is(.checkbox--secondary .checkbox__control) { border-color: var(--field-border-hover); } .checkbox__content { cursor: inherit; align-items: center; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } .checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control { background-color: var(--checkbox-control-bg); } :is(.checkbox--secondary[aria-checked="true"] .checkbox__control, .checkbox--secondary[data-selected="true"] .checkbox__control):before, .checkbox--secondary[data-indeterminate="true"] .checkbox__control, .checkbox--secondary[data-indeterminate="true"] .checkbox__control:before { background-color: var(--accent); } .fieldset { gap: calc(var(--spacing) * 6); flex-direction: column; flex: 1 1 0; display: flex; } .fieldset__legend { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .fieldset__field_group { width: 100%; } :where(.fieldset__field_group > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } .fieldset__actions { align-items: center; gap: calc(var(--spacing) * 2); padding-top: var(--spacing); display: flex; } .input-otp { align-items: center; gap: calc(var(--spacing) * 2); display: flex; position: relative; } .input-otp[data-disabled="true"] { cursor: not-allowed; opacity: .5; } .input-otp__group { align-items: center; gap: calc(var(--spacing) * 2); display: flex; } .input-otp__slot { height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 9.5); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; flex: 1; justify-content: center; align-items: center; display: flex; position: relative; } .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input-otp__slot:hover, .input-otp__slot[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .input-otp__slot[data-active="true"] { z-index: 10; background-color: var(--field-focus); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; } .input-otp__slot[data-filled="true"] { background-color: var(--field-focus); } .input-otp__slot[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input-otp__slot[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input-otp__slot[data-invalid="true"]:focus, .input-otp__slot[data-invalid="true"]:focus-visible, .input-otp__slot[data-invalid="true"][data-focused="true"], .input-otp__slot[data-invalid="true"][data-focus-visible="true"], .input-otp__slot[data-invalid="true"]:focus-within, .input-otp__slot[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-otp__slot[data-invalid="true"] { background-color: var(--field-focus); } .input-otp__slot-value { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-tracking: -.27px; letter-spacing: -.27px; animation: slot-value-in .25s var(--ease-smooth) both; transform-origin: bottom; } .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .input-otp__caret { height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * .5); background-color: var(--field-placeholder, var(--muted)); width: 2px; animation: 1.2s ease-out infinite caret-blink; position: absolute; } .input-otp__separator { border-radius: calc(var(--radius) * .5); background-color: var(--separator); flex-shrink: 0; width: 6px; height: 2px; } .input-otp--secondary .input-otp__slot { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-otp-slot-bg); --input-otp-slot-bg: var(--default); --input-otp-slot-bg-hover: var(--default-hover); --input-otp-slot-bg-focus: var(--default); } @media (hover: hover) { .input-otp--secondary .input-otp__slot:hover, .input-otp--secondary .input-otp__slot[data-hovered="true"] { background-color: var(--input-otp-slot-bg-hover); } } .input-otp--secondary .input-otp__slot[data-active="true"], .input-otp--secondary .input-otp__slot[data-filled="true"] { background-color: var(--input-otp-slot-bg-focus); } @keyframes slot-value-in { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .input { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; outline-style: none; } .input::placeholder { color: var(--field-placeholder, var(--muted)); } @media (min-width: 40rem) { .input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .input { border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input:hover:not(:focus):not(:focus-visible), .input[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .input:focus, .input[data-focused="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .input[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input[data-invalid="true"]:focus, .input[data-invalid="true"]:focus-visible, .input[data-invalid="true"][data-focused="true"], .input[data-invalid="true"][data-focus-visible="true"], .input[data-invalid="true"]:focus-within, .input[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input[data-invalid="true"] { background-color: var(--field-focus); } .input:disabled, .input[data-disabled="true"], .input[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-bg); --input-bg: var(--default); --input-bg-hover: var(--default-hover); --input-bg-focus: var(--default); } @media (hover: hover) { .input--secondary:hover:not(:focus):not(:focus-visible), .input--secondary[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) { background-color: var(--input-bg-hover); } } .input--secondary:focus, .input--secondary[data-focused="true"] { background-color: var(--input-bg-focus); } .input--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input--secondary[data-invalid="true"]:focus, .input--secondary[data-invalid="true"]:focus-visible, .input--secondary[data-invalid="true"][data-focused="true"], .input--secondary[data-invalid="true"][data-focus-visible="true"], .input--secondary[data-invalid="true"]:focus-within, .input--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input--secondary[data-invalid="true"] { background-color: var(--input-bg-focus); } .input--full-width { width: 100%; } .input-group { min-height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); outline-style: none; align-items: center; display: inline-flex; } .input-group:has([data-slot="input-group-textarea"]) { align-items: flex-start; height: auto; } .input-group { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input-group:hover:not(:focus-within), .input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .input-group:has([data-slot="input-group-input"]:focus), .input-group:has([data-slot="input-group-textarea"]:focus) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input-group[data-invalid="true"]:focus, .input-group[data-invalid="true"]:focus-visible, .input-group[data-invalid="true"][data-focused="true"], .input-group[data-invalid="true"][data-focus-visible="true"], .input-group[data-invalid="true"]:focus-within, .input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .input-group[data-disabled="true"], .input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :-webkit-any(.input-group:has([data-slot="input-group-input"]:-webkit-autofill), .input-group:has([data-slot="input-group-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } :is(.input-group:has([data-slot="input-group-input"]:autofill), .input-group:has([data-slot="input-group-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } .input-group__input { border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; } .input-group__input::placeholder { color: var(--field-placeholder, var(--muted)); } @media (min-width: 40rem) { .input-group__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .input-group:has([data-slot="input-group-prefix"]) .input-group__input { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0; } .input-group:has([data-slot="input-group-suffix"]) .input-group__input { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 0; } .input-group__input:focus, .input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .input-group__input:-webkit-autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:-webkit-autofill:hover { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:-webkit-autofill:active { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input[data-slot="input-group-textarea"] { resize: vertical; min-height: 38px; } .input-group__prefix { border-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); height: 100%; padding-inline: calc(var(--spacing) * 3); color: var(--field-placeholder, var(--muted)); border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; border-right-color: var(--field-border); background-color: #0000; border-top: none; border-bottom: none; border-left: none; border-top-right-radius: 0; border-bottom-right-radius: 0; justify-content: center; align-items: center; display: flex; } .input-group:has([data-slot="input-group-textarea"]) .input-group__prefix { align-items: flex-start; padding-top: .5rem; } .input-group__prefix { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); } .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .input-group__suffix { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); height: 100%; padding-inline: calc(var(--spacing) * 3); color: var(--field-placeholder, var(--muted)); border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; border-left-color: var(--field-border); background-color: #0000; border-top: none; border-bottom: none; border-right: none; justify-content: center; align-items: center; display: flex; } .input-group:has([data-slot="input-group-textarea"]) .input-group__suffix { align-items: flex-start; padding-top: .5rem; } .input-group__suffix { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); } .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-group-bg); --input-group-bg: var(--default); --input-group-bg-hover: var(--default-hover); --input-group-bg-focus: var(--default); } @media (hover: hover) { .input-group--secondary:hover:not(:focus-within), .input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--input-group-bg-hover); } } .input-group--secondary:has([data-slot="input-group-input"]:focus), .input-group--secondary:has([data-slot="input-group-textarea"]:focus) { background-color: var(--input-group-bg-focus); } .input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input-group--secondary[data-invalid="true"]:focus, .input-group--secondary[data-invalid="true"]:focus-visible, .input-group--secondary[data-invalid="true"][data-focused="true"], .input-group--secondary[data-invalid="true"][data-focus-visible="true"], .input-group--secondary[data-invalid="true"]:focus-within, .input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group--secondary[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--input-group-bg-focus); } .input-group--secondary [data-slot="input-group-input"], .input-group--secondary [data-slot="input-group-textarea"] { background-color: #0000; } .input-group--full-width { width: 100%; } .number-field { gap: var(--spacing); flex-direction: column; display: flex; } :is(.number-field[data-invalid="true"], .number-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .number-field [data-slot="label"] { width: fit-content; } .number-field__group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; grid-template-columns: 40px 1fr 40px; align-items: center; display: grid; overflow: hidden; } .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .number-field__group:hover:not(:focus-within), .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .number-field__group[data-focus-within="true"], .number-field__group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .number-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .number-field__group[data-invalid="true"]:focus, .number-field__group[data-invalid="true"]:focus-visible, .number-field__group[data-invalid="true"][data-focused="true"], .number-field__group[data-invalid="true"][data-focus-visible="true"], .number-field__group[data-invalid="true"]:focus-within, .number-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field__group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .number-field__group[data-disabled="true"], .number-field__group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :-webkit-any(.number-field__group:has([data-slot="number-field-input"]:-webkit-autofill), .number-field__group:has([data-slot="number-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } :is(.number-field__group:has([data-slot="number-field-input"]:autofill), .number-field__group:has([data-slot="number-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } .number-field__input { border-style: var(--tw-border-style); min-width: 0; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; } @media (min-width: 40rem) { .number-field__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .number-field__group:has([slot="decrement"]) .number-field__input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .number-field__group:has([slot="increment"]) .number-field__input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .number-field__input:focus, .number-field__input:focus-visible { --tw-outline-style: none; outline-style: none; } .number-field__input:-webkit-autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:-webkit-autofill:hover { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:-webkit-autofill:active { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__increment-button, .number-field__decrement-button { height: 100%; width: calc(var(--spacing) * 10); color: var(--field-foreground, var(--foreground)); --tw-outline-style: none; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); background-color: #0000; border-style: solid; border-radius: 0; outline-style: none; justify-content: center; align-items: center; display: flex; } :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .number-field__increment-button, .number-field__decrement-button { cursor: var(--cursor-interactive); } :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] { background-color: var(--field-foreground, var(--foreground)); } @supports (color: color-mix(in lab, red, red)) { :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] { background-color: color-mix(in oklab, var(--field-foreground, var(--foreground)) 10%, transparent); } } :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] { transform: scale(.97); } :is(.number-field__increment-button, .number-field__decrement-button):disabled, :is(.number-field__increment-button, .number-field__decrement-button)[data-disabled="true"], :is(.number-field__increment-button, .number-field__decrement-button)[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.number-field__increment-button, .number-field__decrement-button) [data-slot="number-field-increment-button-icon"], :is(.number-field__increment-button, .number-field__decrement-button) [data-slot="number-field-decrement-button-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .number-field__increment-button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--field-placeholder, var(--muted)); } @supports (color: color-mix(in lab, red, red)) { .number-field__increment-button { border-color: color-mix(in oklab, var(--field-placeholder, var(--muted)) 15%, transparent); } } .number-field__decrement-button { border-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-right-style: var(--tw-border-style); border-right-width: 1px; border-color: var(--field-placeholder, var(--muted)); border-top-right-radius: 0; border-bottom-right-radius: 0; } @supports (color: color-mix(in lab, red, red)) { .number-field__decrement-button { border-color: color-mix(in oklab, var(--field-placeholder, var(--muted)) 15%, transparent); } } .number-field--secondary .number-field__group { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--number-field-group-bg); --number-field-group-bg: var(--default); --number-field-group-bg-hover: var(--default-hover); --number-field-group-bg-focus: var(--default); } @media (hover: hover) { .number-field--secondary .number-field__group:hover:not(:focus-within), .number-field--secondary .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--number-field-group-bg-hover); } } .number-field--secondary .number-field__group:focus-within, .number-field--secondary .number-field__group[data-focus-within="true"] { background-color: var(--number-field-group-bg-focus); } .number-field--secondary .number-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .number-field--secondary .number-field__group[data-invalid="true"]:focus, .number-field--secondary .number-field__group[data-invalid="true"]:focus-visible, .number-field--secondary .number-field__group[data-invalid="true"][data-focused="true"], .number-field--secondary .number-field__group[data-invalid="true"][data-focus-visible="true"], .number-field--secondary .number-field__group[data-invalid="true"]:focus-within, .number-field--secondary .number-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field--secondary .number-field__group[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--number-field-group-bg-focus); } .number-field--secondary .number-field__group [data-slot="number-field-input"] { background-color: #0000; } .number-field--full-width, .number-field__group--full-width { width: 100%; } .radio-group { flex-direction: column; display: flex; } .radio-group[data-orientation="vertical"] [data-slot="radio"] { margin-top: calc(var(--spacing) * 4); } .radio-group[data-orientation="horizontal"] { gap: calc(var(--spacing) * 4); flex-flow: wrap; } .radio-group--secondary .radio__control { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--radio-control-bg); --radio-control-bg: var(--default); --radio-control-bg-hover: var(--default-hover); } .radio:has([data-slot="radio-content"][data-hovered="true"]) :is(.radio-group--secondary .radio__control), .radio [data-slot="radio-content"][data-hovered="true"] :is(.radio-group--secondary .radio__control) { border-color: var(--field-border-hover); } .radio:not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before { background-color: var(--radio-control-bg); } .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before { background-color: var(--radio-control-bg-hover); } .radio { align-items: flex-start; gap: var(--spacing); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-direction: column; display: flex; } .radio [data-slot="label"] { -webkit-user-select: none; user-select: none; } .radio .radio__content [data-slot="label"] { cursor: var(--cursor-interactive); } .radio > [data-slot="description"], .radio > [data-slot="field-error"] { cursor: default; width: 100%; min-width: 0; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); -webkit-user-select: none; user-select: none; padding-inline-start: calc(var(--spacing) * 7); } .radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"], :is(.radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"]) [data-slot="description"], :is(.radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"]) [data-slot="field-error"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .radio__content { cursor: inherit; align-items: center; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } .radio__control { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1); border-style: var(--tw-border-style); border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border, var(--border)); background-color: var(--field-background, var(--default)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; } .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .radio__control { cursor: var(--cursor-interactive); } .radio:has([data-slot="radio-content"][data-focus-visible="true"]) .radio__control, .radio [data-slot="radio-content"][data-focus-visible="true"] .radio__control { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .radio:has([data-slot="radio-content"][data-hovered="true"]) .radio__control, .radio [data-slot="radio-content"][data-hovered="true"] .radio__control { border-color: var(--field-border-hover); } .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(:has(input:checked)) .radio__control .radio__indicator:empty:before { background-color: var(--field-hover); } .radio:has([data-slot="radio-content"][data-pressed="true"]) .radio__control, .radio [data-slot="radio-content"][data-pressed="true"] .radio__control { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .radio[data-selected] .radio__control, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__control, .radio:has(input:checked) .radio__control { background-color: var(--accent); border-color: #0000; } .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__control, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__control, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__control { background-color: var(--accent-hover); } .radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus-visible, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focused="true"], :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focus-visible="true"], :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus-within, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus-visible, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focused="true"], :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focus-visible="true"], :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus-within, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio__indicator { pointer-events: none; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0; } .radio__indicator:empty:before { content: ""; border-radius: calc(var(--radius) * 1); background-color: var(--field-background, var(--default)); width: 100%; height: 100%; transition: scale .2s var(--ease-out), background-color .2s var(--ease-out); scale: 1; } .radio__indicator:empty:before:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .radio__indicator:empty:before:not(:is()) { transition-property: none; } } .radio[data-selected] .radio__indicator:empty:before, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty:before, .radio:has(input:checked) .radio__indicator:empty:before { background-color: var(--accent-foreground); scale: .4286; } .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty:before, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__indicator:empty:before, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty:before { scale: .5714; } .radio--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textfield { gap: var(--spacing); flex-direction: column; display: flex; } :is(.textfield[data-invalid="true"], .textfield[aria-invalid="true"]) [data-slot="description"] { display: none; } .textfield--full-width, .textfield--full-width [data-slot="input"], .textfield--full-width [data-slot="textarea"] { width: 100%; } .search-field { gap: var(--spacing); flex-direction: column; display: flex; } :is(.search-field[data-invalid="true"], .search-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .search-field [data-slot="label"] { width: fit-content; } .search-field[data-empty="true"] [data-slot="search-field-clear-button"] { pointer-events: none; opacity: 0; } .search-field__group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; align-items: center; display: inline-flex; position: relative; overflow: hidden; } .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .search-field__group:hover:not(:focus-within), .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .search-field__group[data-focus-within="true"], .search-field__group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; } .search-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .search-field__group[data-invalid="true"]:focus, .search-field__group[data-invalid="true"]:focus-visible, .search-field__group[data-invalid="true"][data-focused="true"], .search-field__group[data-invalid="true"][data-focus-visible="true"], .search-field__group[data-invalid="true"]:focus-within, .search-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field__group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .search-field__group[data-disabled="true"], .search-field__group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :-webkit-any(.search-field__group:has([data-slot="search-field-input"]:-webkit-autofill), .search-field__group:has([data-slot="search-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } :is(.search-field__group:has([data-slot="search-field-input"]:autofill), .search-field__group:has([data-slot="search-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } .search-field__input { border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; } @media (min-width: 40rem) { .search-field__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .search-field__input::-webkit-search-cancel-button { appearance: none; } .search-field__input::-webkit-search-decoration { appearance: none; } .search-field__group:has([data-slot="search-field-search-icon"]) .search-field__input { padding-left: calc(var(--spacing) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .search-field__group:has([slot="clear"]) .search-field__input { padding-right: calc(var(--spacing) * 2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .search-field__input:focus, .search-field__input:focus-visible { --tw-outline-style: none; outline-style: none; } .search-field__input:-webkit-autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:-webkit-autofill:hover { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:-webkit-autofill:active { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__search-icon { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: 0; margin-left: calc(var(--spacing) * 3); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; } .search-field__clear-button { margin-right: calc(var(--spacing) * 2); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; } .search-field__clear-button [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .search-field--secondary .search-field__group { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--search-field-group-bg); --search-field-group-bg: var(--default); --search-field-group-bg-hover: var(--default-hover); --search-field-group-bg-focus: var(--default); } @media (hover: hover) { .search-field--secondary .search-field__group:hover:not(:focus-within), .search-field--secondary .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--search-field-group-bg-hover); } } .search-field--secondary .search-field__group:focus-within, .search-field--secondary .search-field__group[data-focus-within="true"] { background-color: var(--search-field-group-bg-focus); } .search-field--secondary .search-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .search-field--secondary .search-field__group[data-invalid="true"]:focus, .search-field--secondary .search-field__group[data-invalid="true"]:focus-visible, .search-field--secondary .search-field__group[data-invalid="true"][data-focused="true"], .search-field--secondary .search-field__group[data-invalid="true"][data-focus-visible="true"], .search-field--secondary .search-field__group[data-invalid="true"]:focus-within, .search-field--secondary .search-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field--secondary .search-field__group[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--search-field-group-bg-focus); } .search-field--secondary .search-field__group [data-slot="search-field-input"] { background-color: #0000; } .search-field--full-width, .search-field__group--full-width { width: 100%; } .textarea { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; outline-style: none; } .textarea::placeholder { color: var(--field-placeholder, var(--muted)); } @media (min-width: 40rem) { .textarea { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .textarea { border-width: var(--border-width-field); border-color: var(--field-border); min-height: 38px; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .textarea:hover:not(:focus):not(:focus-visible), .textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .textarea:focus, .textarea[data-focused="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .textarea[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .textarea[data-invalid="true"]:focus, .textarea[data-invalid="true"]:focus-visible, .textarea[data-invalid="true"][data-focused="true"], .textarea[data-invalid="true"][data-focus-visible="true"], .textarea[data-invalid="true"]:focus-within, .textarea[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea[data-invalid="true"] { background-color: var(--field-focus); } .textarea:disabled, .textarea[data-disabled="true"], .textarea[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textarea--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--textarea-bg); --textarea-bg: var(--default); --textarea-bg-hover: var(--default-hover); --textarea-bg-focus: var(--default); } @media (hover: hover) { .textarea--secondary:hover:not(:focus):not(:focus-visible), .textarea--secondary[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--textarea-bg-hover); } } .textarea--secondary:focus, .textarea--secondary[data-focused="true"] { background-color: var(--textarea-bg-focus); } .textarea--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .textarea--secondary[data-invalid="true"]:focus, .textarea--secondary[data-invalid="true"]:focus-visible, .textarea--secondary[data-invalid="true"][data-focused="true"], .textarea--secondary[data-invalid="true"][data-focus-visible="true"], .textarea--secondary[data-invalid="true"]:focus-within, .textarea--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea--secondary[data-invalid="true"] { background-color: var(--textarea-bg-focus); } .textarea--full-width { width: 100%; } .calendar { width: calc(var(--spacing) * 63); max-width: calc(var(--spacing) * 63); container-type: inline-size; } .calendar--week-view .calendar__cell, .calendar--day-view .calendar__cell { aspect-ratio: 1; place-self: center; width: 100%; height: auto; } .calendar--day-view .calendar__grid { flex-direction: column; display: flex; } .calendar--day-view .calendar__grid-header { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar--day-view .calendar__grid-header > tr { display: contents; } .calendar--day-view .calendar__grid-body { margin-top: var(--spacing); grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar--day-view .calendar__grid-body > tr { display: contents; } .calendar--day-view .calendar__grid-body > tr:first-child > td { margin-top: 0; } .calendar__header { padding-inline: calc(var(--spacing) * .5); padding-bottom: calc(var(--spacing) * 4); justify-content: space-between; align-items: center; display: flex; } .calendar__header:has(.calendar-year-picker__trigger[data-open="true"]) .calendar__nav-button { pointer-events: none; opacity: 0; } .calendar__heading { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); flex: 1; } .calendar__nav-button { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(var(--radius) * 2); color: var(--accent-soft-foreground); will-change: scale; transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); justify-content: center; align-items: center; display: flex; } .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar__nav-button { cursor: var(--cursor-interactive); } @media (hover: hover) { .calendar__nav-button:hover, .calendar__nav-button[data-hovered="true"] { background-color: var(--default); color: var(--accent-soft-foreground); } } .calendar__nav-button:active, .calendar__nav-button[data-pressed="true"] { transform: scale(.95); } .calendar__nav-button:focus-visible, .calendar__nav-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .calendar__nav-button:disabled, .calendar__nav-button[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .calendar__nav-button-icon { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .calendar__grid { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar__grid[aria-readonly="true"] .calendar__cell { pointer-events: none; } .calendar__grid-header, .calendar__grid-header > tr, .calendar__grid-body, .calendar__grid-body > tr { display: contents; } .calendar__grid-body > tr:first-child > td { margin-top: var(--spacing); } .calendar__grid-row { display: contents; } .calendar__header-cell { padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); justify-content: center; align-items: center; display: flex; } .calendar__cell { aspect-ratio: 1; border-radius: calc(var(--radius) * 3); text-align: center; width: 100%; height: 100%; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; will-change: scale; transition: transform .25s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar__cell { cursor: var(--cursor-interactive); } .calendar__cell:focus-visible:not(:focus), .calendar__cell[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .calendar__cell[data-today="true"] { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } @media (hover: hover) { .calendar__cell[data-today="true"]:hover:not([data-selected="true"]), .calendar__cell[data-today="true"][data-hovered="true"]:not([data-selected="true"]) { background-color: var(--accent-soft-hover); } } .calendar__cell[data-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } .calendar__cell:active, .calendar__cell[data-pressed="true"] { background-color: var(--default); transform: scale(.95); } :is(.calendar__cell:active, .calendar__cell[data-pressed="true"])[data-selected="true"] { background-color: var(--accent-hover); } @media (hover: hover) { .calendar__cell:hover:not([data-selected="true"]), .calendar__cell[data-hovered="true"]:not([data-selected="true"]) { background-color: var(--default); } } .calendar__cell[data-outside-month="true"] { color: var(--muted); opacity: .5; } .calendar__cell[data-selected="true"][data-outside-month="true"] { background-color: var(--default); } .calendar__cell[data-unavailable="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .calendar__cell:disabled:not([data-outside-month="true"]), .calendar__cell[data-disabled="true"]:not([data-outside-month="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } .calendar__cell-indicator { bottom: var(--spacing); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); width: 3px; height: 3px; translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .25); background-color: var(--muted); position: absolute; left: 50%; } [data-selected="true"] > .calendar__cell-indicator { background-color: var(--accent-foreground); } .range-calendar { width: calc(var(--spacing) * 63); max-width: calc(var(--spacing) * 63); container-type: inline-size; } .range-calendar--week-view .range-calendar__cell, .range-calendar--day-view .range-calendar__cell { aspect-ratio: 1; place-self: center; width: 100%; height: auto; } .range-calendar--day-view .range-calendar__grid { flex-direction: column; display: flex; } .range-calendar--day-view .range-calendar__grid-header { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .range-calendar--day-view .range-calendar__grid-header > tr { display: contents; } .range-calendar--day-view .range-calendar__grid-body { margin-top: var(--spacing); grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .range-calendar--day-view .range-calendar__grid-body > tr { display: contents; } .range-calendar--day-view .range-calendar__grid-body > tr:first-child > td { margin-top: 0; } .range-calendar__header { padding-inline: calc(var(--spacing) * .5); padding-bottom: calc(var(--spacing) * 4); justify-content: space-between; align-items: center; display: flex; } .range-calendar__header:has(.calendar-year-picker__trigger[data-open="true"]) .range-calendar__nav-button { pointer-events: none; opacity: 0; } .range-calendar__heading { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); flex: 1; } .range-calendar__nav-button { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(var(--radius) * 1.5); color: var(--accent-soft-foreground); will-change: scale; transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); justify-content: center; align-items: center; display: flex; } .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .range-calendar__nav-button { cursor: var(--cursor-interactive); } @media (hover: hover) { .range-calendar__nav-button:hover, .range-calendar__nav-button[data-hovered="true"] { background-color: var(--default); color: var(--accent-soft-foreground); } } .range-calendar__nav-button:active, .range-calendar__nav-button[data-pressed="true"] { transform: scale(.95); } .range-calendar__nav-button:focus-visible, .range-calendar__nav-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .range-calendar__nav-button:disabled, .range-calendar__nav-button[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .range-calendar__nav-button-icon { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .range-calendar__grid { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .range-calendar__grid[aria-readonly="true"] .range-calendar__cell { pointer-events: none; } .range-calendar__grid-header, .range-calendar__grid-header > tr, .range-calendar__grid-body, .range-calendar__grid-body > tr { display: contents; } .range-calendar__grid-body > tr:first-child > td { margin-top: var(--spacing); } .range-calendar__grid-row { display: contents; } .range-calendar__header-cell { padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); justify-content: center; align-items: center; display: flex; } .range-calendar__cell { z-index: 1; border-radius: calc(var(--radius) * 3); --tw-outline-style: none; cursor: var(--cursor-interactive); will-change: background-color, border-color; transition: box-shadow .1s var(--ease-out), border-color .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; margin-block: 2px; margin-inline: 0; padding: 0; position: relative; } .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .range-calendar__cell .range-calendar__cell-button { aspect-ratio: 1; border-radius: calc(var(--radius) * 3); width: 100%; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); -webkit-tap-highlight-color: transparent; will-change: scale; transition: scale .2s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); justify-content: center; align-items: center; display: flex; } .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .range-calendar__cell:focus-visible:not(:focus), .range-calendar__cell[data-focus-visible="true"] { z-index: 2; } :is(.range-calendar__cell:focus-visible:not(:focus), .range-calendar__cell[data-focus-visible="true"]) .range-calendar__cell-button { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .range-calendar__cell[data-today="true"] .range-calendar__cell-button { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } @media (hover: hover) { :is(.range-calendar__cell[data-today="true"]:hover:not([data-selected="true"]), .range-calendar__cell[data-today="true"][data-hovered="true"]:not([data-selected="true"])) .range-calendar__cell-button { background-color: var(--accent-soft-hover); } } .range-calendar__cell[data-selected="true"]:not([data-outside-month="true"]) { background-color: var(--accent-soft); border-radius: 0; } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) { border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"] { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *) { border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"] { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]), .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) { z-index: 2; } :is(.range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]), .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"])) .range-calendar__cell-button { background-color: var(--accent); color: var(--accent-foreground); } .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } :is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"]) .range-calendar__cell-button { scale: .9; } :is(:is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"])[data-selection-start="true"], :is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"])[data-selection-end="true"]) .range-calendar__cell-button { background-color: var(--accent-hover); } @media (hover: hover) { :is(.range-calendar__cell:hover:not([data-selected="true"]), .range-calendar__cell[data-hovered="true"]:not([data-selected="true"])) .range-calendar__cell-button { background-color: var(--default); } } .range-calendar__cell[data-outside-month="true"] { color: var(--muted); opacity: .5; } .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not([data-selection-start="true"], [data-selection-end="true"]) { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not([data-selection-start="true"], [data-selection-end="true"]) { background-color: color-mix(in oklab, var(--default) 20%, transparent); } } .range-calendar__cell[data-unavailable="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .range-calendar__cell:disabled:not([data-outside-month="true"]), .range-calendar__cell[data-disabled="true"]:not([data-outside-month="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"] { border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"], .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"] { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"] { border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); } .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"][data-outside-month="true"], .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"][data-selection-end="true"] { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .range-calendar__cell-indicator { bottom: var(--spacing); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); width: 3px; height: 3px; translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .25); background-color: var(--muted); position: absolute; left: 50%; } [data-selected="true"] > .range-calendar__cell-indicator { background-color: var(--accent-foreground); } .calendar:has(.calendar-year-picker__year-grid), .range-calendar:has(.calendar-year-picker__year-grid) { position: relative; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] { will-change: opacity; transition: opacity .15s var(--ease-out), visibility 0s linear; } :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"] { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s var(--ease-out), visibility 0s linear .15s; } :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__trigger { justify-content: flex-start; align-items: center; gap: var(--spacing); border-radius: calc(var(--radius) * 1); --tw-outline-style: none; cursor: var(--cursor-interactive); touch-action: manipulation; outline-style: none; flex: 1; display: flex; } .calendar-year-picker__trigger:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .calendar-year-picker__trigger-heading { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition: color .15s var(--ease-out); } .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__trigger-indicator { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--accent-soft-foreground); transition: transform .15s var(--ease-out); } .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator { transform: rotate(90deg); } .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading { color: var(--accent-soft-foreground); } .calendar-year-picker__year-grid { pointer-events: none; scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); align-content: flex-start; gap: var(--spacing); padding: var(--spacing); opacity: 0; will-change: opacity; grid-template-columns: repeat(3, 1fr); display: grid; position: absolute; left: 0; right: 0; overflow-y: auto; } .calendar-year-picker__year-grid[data-open="true"] { pointer-events: auto; opacity: 1; transition: opacity .2s var(--ease-out) 50ms; } .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__year-cell { height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 3); padding-inline: calc(var(--spacing) * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out); transform-origin: center; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; justify-content: center; align-items: center; display: inline-flex; position: relative; } .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__year-cell { cursor: var(--cursor-interactive); } @media (hover: hover) and (pointer: fine) { .calendar-year-picker__year-cell:is(:hover, [data-hovered="true"]):not([data-selected="true"]) { background-color: var(--default); color: var(--default-foreground); } } .calendar-year-picker__year-cell[data-selected="true"], .calendar-year-picker__year-cell[aria-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } @media (hover: hover) and (pointer: fine) { :is(.calendar-year-picker__year-cell[data-selected="true"], .calendar-year-picker__year-cell[aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent-hover); } } .calendar-year-picker__year-cell:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .date-field { gap: var(--spacing); flex-direction: column; display: flex; } :is(.date-field[data-invalid="true"], .date-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .date-field [data-slot="label"] { width: fit-content; } .date-field--full-width { width: 100%; } .time-field { gap: var(--spacing); flex-direction: column; display: flex; } :is(.time-field[data-invalid="true"], .time-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .time-field [data-slot="label"] { width: fit-content; } .time-field--full-width { width: 100%; } .date-input-group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; align-items: center; display: inline-flex; overflow: hidden; } .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .date-input-group:hover:not(:focus-within), .date-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .date-input-group[data-focus-within="true"]:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])), .date-input-group:focus-within:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; } .date-input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .date-input-group[data-invalid="true"]:focus, .date-input-group[data-invalid="true"]:focus-visible, .date-input-group[data-invalid="true"][data-focused="true"], .date-input-group[data-invalid="true"][data-focus-visible="true"], .date-input-group[data-invalid="true"]:focus-within, .date-input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .date-input-group[data-disabled="true"], .date-input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-input-group__input { cursor: text; border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; align-items: center; gap: 1px; display: flex; } @media (min-width: 40rem) { .date-input-group__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .date-input-group:has([data-slot="date-input-group-prefix"]) .date-input-group__input { padding-left: calc(var(--spacing) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .date-input-group:has([data-slot="date-input-group-suffix"]) .date-input-group__input { padding-right: calc(var(--spacing) * 2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="start"] { flex: none; padding-right: 0; } .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="end"] { padding-left: 0; } .date-input-group__input:focus, .date-input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .date-input-group__input-container { scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; flex: 1; align-items: center; width: fit-content; display: flex; overflow: auto clip; } .date-input-group__segment { border-radius: calc(var(--radius) * .75); padding-inline: calc(var(--spacing) * .5); text-align: end; text-wrap: nowrap; --tw-outline-style: none; outline-style: none; display: inline-block; } .date-input-group__segment[data-type="literal"] { color: var(--muted); padding: 0; } .date-input-group__segment[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .date-input-group__segment:focus, .date-input-group__segment[data-focused="true"] { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } .date-input-group__segment[data-disabled="true"] { opacity: .5; } .date-input-group__segment[data-invalid="true"] { color: var(--danger); } .date-input-group__segment[data-invalid="true"]:focus, .date-input-group__segment[data-invalid="true"][data-focused="true"] { background-color: var(--danger-soft); color: var(--danger-soft-foreground); } .date-input-group__prefix { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: 0; margin-left: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .date-input-group__suffix { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .date-input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--date-input-group-bg); --date-input-group-bg: var(--default); --date-input-group-bg-hover: var(--default-hover); --date-input-group-bg-focus: var(--default); } @media (hover: hover) { .date-input-group--secondary:hover:not(:focus-within), .date-input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--date-input-group-bg-hover); } } .date-input-group--secondary:focus-within, .date-input-group--secondary[data-focus-within="true"] { background-color: var(--date-input-group-bg-focus); } .date-input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .date-input-group--secondary[data-invalid="true"]:focus, .date-input-group--secondary[data-invalid="true"]:focus-visible, .date-input-group--secondary[data-invalid="true"][data-focused="true"], .date-input-group--secondary[data-invalid="true"][data-focus-visible="true"], .date-input-group--secondary[data-invalid="true"]:focus-within, .date-input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group--secondary[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--date-input-group-bg-focus); } .date-input-group--secondary [data-slot="date-input-group-input"] { background-color: #0000; } .date-input-group--full-width { width: 100%; } .date-picker { gap: var(--spacing); flex-direction: column; display: inline-flex; } .date-picker .date-input-group__suffix, .date-picker .date-input-group__prefix { pointer-events: auto; } .date-picker__trigger { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); width: 100%; padding: var(--spacing); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: box-shadow .15s var(--ease-out); align-items: center; display: inline-flex; } .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-picker__trigger:focus-visible:not(:focus), .date-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .date-picker__trigger:disabled, .date-picker__trigger[data-disabled="true"], .date-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-picker__trigger-indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--field-placeholder, var(--muted)); justify-content: center; align-items: center; display: inline-flex; } .date-picker__popover { width: fit-content; transform-origin: var(--trigger-anchor-point); scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); overflow-y: auto; } .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-picker__popover { box-shadow: var(--shadow-overlay); border-radius: min(32px, calc(var(--radius) * 2.5)); } .date-picker__popover:focus-visible:not(:focus), .date-picker__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .date-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .date-picker__popover[data-entering="true"][data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .date-picker__popover[data-entering="true"][data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .date-picker__popover[data-entering="true"][data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .date-picker__popover[data-entering="true"][data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .date-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .date-picker__popover[data-exiting="true"], .date-picker__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .date-range-picker { gap: var(--spacing); flex-direction: column; display: inline-flex; } .date-range-picker .date-input-group__suffix, .date-range-picker .date-input-group__prefix { pointer-events: auto; } .date-range-picker__trigger { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); width: 100%; padding: var(--spacing); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: box-shadow .15s var(--ease-out); align-items: center; display: inline-flex; } .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-range-picker__trigger:focus-visible:not(:focus), .date-range-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .date-range-picker__trigger:disabled, .date-range-picker__trigger[data-disabled="true"], .date-range-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-range-picker__trigger-indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--field-placeholder, var(--muted)); justify-content: center; align-items: center; display: inline-flex; } .date-range-picker__range-separator { padding-inline: var(--spacing); color: var(--field-placeholder, var(--muted)); -webkit-user-select: none; user-select: none; } .date-range-picker__popover { width: fit-content; transform-origin: var(--trigger-anchor-point); scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); overflow-y: auto; } .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-range-picker__popover { box-shadow: var(--shadow-overlay); border-radius: min(32px, calc(var(--radius) * 2.5)); } .date-range-picker__popover:focus-visible:not(:focus), .date-range-picker__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .date-range-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .date-range-picker__popover[data-entering="true"][data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .date-range-picker__popover[data-entering="true"][data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .date-range-picker__popover[data-entering="true"][data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .date-range-picker__popover[data-entering="true"][data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .date-range-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .date-range-picker__popover[data-exiting="true"], .date-range-picker__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .card { gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 4); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: min(32px, var(--radius-3xl)); flex-direction: column; display: flex; position: relative; overflow: visible; } .card__header { flex-direction: column; display: flex; } .card__title { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .card__description { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); color: var(--muted); } .card__content { gap: var(--spacing); flex-direction: column; flex: 1; display: flex; } .card__footer { flex-direction: row; align-items: center; display: flex; } .card--transparent { --tw-border-style: none; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; border-style: none; } .card--default { background-color: var(--surface); } .card--secondary { background-color: var(--surface-secondary); } .card--tertiary { background-color: var(--surface-tertiary); } .header { width: 100%; padding-inline: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1.5); padding-bottom: var(--spacing); text-align: left; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); } .separator { border-radius: calc(var(--radius) * .5); border-top-style: var(--tw-border-style); border-top-width: 0; border-bottom-style: var(--tw-border-style); background-color: var(--separator); border-bottom-width: 0; flex-shrink: 0; width: 100%; height: 1px; } .separator--horizontal { width: 100%; height: 1px; } .separator--vertical { height: auto; min-height: calc(var(--spacing) * 2); align-self: stretch; width: 1px; } .separator--default { background-color: var(--separator); } .separator--secondary { background-color: var(--separator-secondary); } .separator--tertiary { background-color: var(--separator-tertiary); } .separator__container { align-items: center; gap: calc(var(--spacing) * 3); display: flex; } .separator__container--horizontal { flex-direction: row; width: 100%; } .separator__container--vertical { flex-direction: column; justify-content: center; height: 100%; } .separator__line { flex-grow: 1; flex-shrink: 0; } .separator__content { text-align: center; white-space: nowrap; color: var(--muted); justify-content: center; align-items: center; display: inline-flex; } .separator__content--horizontal, .separator__content--vertical { text-align: center; } .surface { color: var(--foreground); position: relative; } .surface--transparent { background-color: #0000; } .surface--default { background-color: var(--surface); color: var(--surface-foreground); } .surface--secondary { background-color: var(--surface-secondary); color: var(--surface-secondary-foreground); } .surface--tertiary { background-color: var(--surface-tertiary); color: var(--surface-tertiary-foreground); } .avatar { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); background-color: var(--default); flex-shrink: 0; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; } .avatar__fallback { background-color: var(--default); width: 100%; height: 100%; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); justify-content: center; align-items: center; display: flex; } .avatar__image { aspect-ratio: 1; width: 100%; height: 100%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; transition-duration: .25s; position: absolute; inset: 0; } .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .avatar--sm { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 2); } .avatar--lg { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); border-radius: calc(var(--radius) * 3); } .avatar--lg .avatar__fallback { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .avatar__fallback--accent { color: var(--accent-soft-foreground); } .avatar__fallback--default { color: var(--default-soft-foreground); } .avatar__fallback--success { color: var(--success-soft-foreground); } .avatar__fallback--warning { color: var(--warning-soft-foreground); } .avatar__fallback--danger { color: var(--danger-soft-foreground); } .avatar--soft { background-color: #0000; } .avatar--soft .avatar__fallback--accent { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } .avatar--soft .avatar__fallback--success { background-color: var(--success-soft); color: var(--success-soft-foreground); } .avatar--soft .avatar__fallback--warning { background-color: var(--warning-soft); color: var(--warning-soft-foreground); } .avatar--soft .avatar__fallback--default { background-color: var(--default-soft); color: var(--default-soft-foreground); } .avatar--soft .avatar__fallback--danger { background-color: var(--danger-soft); color: var(--danger-soft-foreground); } .alert-dialog__trigger { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .alert-dialog__trigger:focus-visible:not(:focus), .alert-dialog__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .alert-dialog__trigger:disabled, .alert-dialog__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .alert-dialog__trigger:active, .alert-dialog__trigger[data-pressed="true"] { transform: scale(.97); } .alert-dialog__backdrop { z-index: 50; height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; display: flex; position: fixed; inset: 0; } .alert-dialog__backdrop[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out); transition-duration: .15s; transition-timing-function: var(--ease-out); --tw-enter-opacity: 0; } .alert-dialog__backdrop[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out); transition-duration: .1s; transition-timing-function: var(--ease-out); --tw-exit-opacity: 0; } .alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"] { will-change: opacity; } :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__backdrop--transparent { background-color: #0000; } .alert-dialog__backdrop--opaque { background-color: var(--backdrop); } .alert-dialog__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .alert-dialog__container { height: var(--visual-viewport-height); width: 100%; min-width: 0; padding: calc(var(--spacing) * 4); flex-direction: column; flex: 1; align-items: center; display: flex; } @media (min-width: 40rem) { .alert-dialog__container { width: fit-content; padding: calc(var(--spacing) * 10); } } .alert-dialog__container { pointer-events: none; } .alert-dialog__container[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .25s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-enter-opacity: 0; --tw-enter-scale: calc(105*1%); transition-duration: .25s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .alert-dialog__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(1*var(--spacing)); } @media (min-width: 40rem) { .alert-dialog__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(0*100%); } } .alert-dialog__container[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .alert-dialog__container[data-entering="true"][data-placement="center"] { --tw-enter-translate-y: calc(0*-100%); } .alert-dialog__container[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .alert-dialog__container[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-opacity: 0; --tw-exit-scale: .95; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"] { will-change: opacity,transform; } :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__dialog { background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); width: 100%; min-height: 0; max-height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-radius: min(32px, var(--radius-3xl)); padding: calc(var(--spacing) * 6); pointer-events: auto; outline-style: none; flex-direction: column; display: flex; position: relative; overflow: clip; } .alert-dialog__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .alert-dialog__dialog[data-placement="auto"] { margin-block: auto; } } .alert-dialog__dialog[data-placement="center"] { margin-block: auto; } .alert-dialog__dialog[data-placement="bottom"] { margin-top: auto; } .alert-dialog__dialog[data-placement="top"] { margin-top: 0; } .alert-dialog__dialog--xs { max-width: var(--container-xs); } .alert-dialog__dialog--sm { max-width: var(--container-sm); } .alert-dialog__dialog--md { max-width: var(--container-md); } .alert-dialog__dialog--lg { max-width: var(--container-lg); } .alert-dialog__dialog--cover { width: 100%; height: 100%; min-height: 100%; } .alert-dialog__header { gap: calc(var(--spacing) * 3); flex-direction: column; margin-bottom: 0; display: flex; } .alert-dialog__header > .modal__icon { margin-bottom: 0; } .alert-dialog__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .alert-dialog__icon { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .alert-dialog__icon [data-slot="alert-dialog-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .alert-dialog__icon--default { background-color: var(--default); color: var(--foreground); } .alert-dialog__icon--accent { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } .alert-dialog__icon--success { background-color: var(--success-soft); color: var(--success-soft-foreground); } .alert-dialog__icon--warning { background-color: var(--warning-soft); color: var(--warning-soft-foreground); } .alert-dialog__icon--danger { background-color: var(--danger-soft); color: var(--danger-soft-foreground); } .alert-dialog__body { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); min-height: 0; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; color: var(--muted); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: -3px; flex: 1; margin-block: 0; padding: 3px; line-height: 1.43; overflow-y: auto; } .alert-dialog__footer { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); flex-direction: row; margin-top: 0; display: flex; } .alert-dialog__close-trigger { top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); position: absolute; } .alert-dialog__header + .alert-dialog__body { margin-top: calc(var(--spacing) * 2); } .alert-dialog__header + .alert-dialog__footer, .alert-dialog__body + .alert-dialog__footer { margin-top: calc(var(--spacing) * 5); } .drawer__trigger { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .drawer__trigger:focus-visible:not(:focus), .drawer__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .drawer__trigger:disabled, .drawer__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .drawer__trigger:active, .drawer__trigger[data-pressed="true"] { transform: scale(.97); } .drawer__backdrop { z-index: 50; height: var(--visual-viewport-height); opacity: 1; width: 100%; transition: opacity .25s cubic-bezier(.32, .72, 0, 1); position: fixed; inset: 0; } .drawer__backdrop[data-entering="true"] { opacity: 0; } .drawer__backdrop[data-exiting="true"] { opacity: 0; transition-duration: .2s; transition-timing-function: cubic-bezier(.32, .72, 0, 1); } .drawer__backdrop[data-exiting="true"], .drawer__backdrop[data-entering="true"] { will-change: opacity; } @media (prefers-reduced-motion: reduce) { .drawer__backdrop { transition: none; } } .drawer__backdrop--transparent { background-color: #0000; } .drawer__backdrop--opaque { background-color: var(--backdrop); } .drawer__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .drawer__content { pointer-events: none; z-index: 50; height: var(--visual-viewport-height); width: 100%; min-width: 0; display: flex; position: fixed; inset: 0; } .drawer__content--bottom { align-items: flex-end; } .drawer__content--top { align-items: flex-start; } .drawer__content--left { justify-content: flex-start; } .drawer__content--right { justify-content: flex-end; } .drawer__dialog { background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; padding: calc(var(--spacing) * 6); pointer-events: auto; --drawer-enter-duration: .25s; --drawer-exit-duration: .2s; --drawer-enter-ease: cubic-bezier(.32, .72, 0, 1); --drawer-exit-ease: cubic-bezier(.32, .72, 0, 1); will-change: translate; transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease); outline-style: none; flex-direction: column; display: flex; position: relative; } @media (prefers-reduced-motion: reduce) { .drawer__dialog { transition: none; } } .drawer__dialog[data-placement="bottom"] { border-top-left-radius: min(32px, var(--radius-2xl)); border-top-right-radius: min(32px, var(--radius-2xl)); width: 100%; max-height: 85vh; } .drawer__dialog[data-placement="top"] { border-bottom-left-radius: min(32px, var(--radius-2xl)); border-bottom-right-radius: min(32px, var(--radius-2xl)); width: 100%; max-height: 85vh; } .drawer__dialog[data-placement="left"] { height: 100%; width: calc(var(--spacing) * 80); border-radius: 0; max-width: 85vw; } @media (min-width: 40rem) { .drawer__dialog[data-placement="left"] { width: calc(var(--spacing) * 96); } } .drawer__dialog[data-placement="right"] { height: 100%; width: calc(var(--spacing) * 80); border-radius: 0; max-width: 85vw; } @media (min-width: 40rem) { .drawer__dialog[data-placement="right"] { width: calc(var(--spacing) * 96); } } [data-exiting="true"] .drawer__dialog { transition-duration: var(--drawer-exit-duration); transition-timing-function: var(--drawer-exit-ease); } .drawer__content--left .drawer__dialog, .drawer__content--right .drawer__dialog, .drawer__content--top .drawer__dialog, .drawer__content--bottom .drawer__dialog { translate: 0; } .drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog { translate: -100%; } .drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog { translate: 100%; } .drawer__content--top[data-entering="true"] .drawer__dialog, .drawer__content--top[data-exiting="true"] .drawer__dialog { translate: 0 -100%; } .drawer__content--bottom[data-entering="true"] .drawer__dialog, .drawer__content--bottom[data-exiting="true"] .drawer__dialog { translate: 0 100%; } .drawer__dialog--top { padding-bottom: calc(var(--spacing) * 2); } .drawer__dialog--top .drawer__handle { padding-bottom: 0; } .drawer__header { gap: calc(var(--spacing) * 3); flex-direction: column; margin-bottom: 0; display: flex; } .drawer__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .drawer__body { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); min-height: 0; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; color: var(--muted); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: -3px; flex: 1; margin-block: 0; padding: 3px; line-height: 1.43; overflow-y: auto; } .drawer__footer { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); flex-direction: row; margin-top: 0; display: flex; } .drawer__handle { padding-bottom: calc(var(--spacing) * 2); justify-content: center; align-items: center; display: flex; } .drawer__handle > [data-slot="drawer-handle-bar"] { height: var(--spacing); width: calc(var(--spacing) * 9); border-radius: calc(var(--radius) * .25); background-color: var(--separator); } .drawer__close-trigger { top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); position: absolute; } .drawer__header + .drawer__body { margin-top: calc(var(--spacing) * 2); } .drawer__header + .drawer__footer, .drawer__body + .drawer__footer { margin-top: calc(var(--spacing) * 5); } .drawer__handle + .drawer__header, .drawer__handle + .drawer__body { margin-top: 0; } .modal__trigger { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .modal__trigger:focus-visible:not(:focus), .modal__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .modal__trigger:disabled, .modal__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .modal__trigger:active, .modal__trigger[data-pressed="true"] { transform: scale(.97); } .modal__backdrop { z-index: 50; height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; display: flex; position: fixed; inset: 0; } .modal__backdrop[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out); transition-duration: .15s; transition-timing-function: var(--ease-out); --tw-enter-opacity: 0; } .modal__backdrop[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out); transition-duration: .1s; transition-timing-function: var(--ease-out); --tw-exit-opacity: 0; } .modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"] { will-change: opacity; } :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__backdrop--transparent { background-color: #0000; } .modal__backdrop--opaque { background-color: var(--backdrop); } .modal__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .modal__container { height: var(--visual-viewport-height); width: 100%; min-width: 0; padding: calc(var(--spacing) * 4); flex-direction: column; flex: 1; align-items: center; display: flex; } @media (min-width: 40rem) { .modal__container { width: fit-content; padding: calc(var(--spacing) * 10); } } .modal__container { pointer-events: none; } .modal__container[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .25s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-enter-opacity: 0; --tw-enter-scale: calc(105*1%); transition-duration: .25s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .modal__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(1*var(--spacing)); } @media (min-width: 40rem) { .modal__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(0*100%); } } .modal__container[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .modal__container[data-entering="true"][data-placement="center"] { --tw-enter-translate-y: calc(0*-100%); } .modal__container[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .modal__container[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-opacity: 0; --tw-exit-scale: .95; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .modal__container[data-exiting="true"], .modal__container[data-entering="true"] { will-change: opacity,transform; } :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__container--scroll-outside { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); pointer-events: auto; -webkit-overflow-scrolling: touch; overflow-y: auto; } .modal__container--full { padding: 0; } @media (min-width: 40rem) { .modal__container--full { padding: 0; } } .modal__container--full[data-entering="true"] { --tw-enter-translate-y: calc(0*100%); --tw-enter-scale: 1; } @media (min-width: 40rem) { .modal__container--full[data-entering="true"] { --tw-enter-translate-y: calc(0*100%); } } .modal__container--full[data-exiting="true"] { --tw-exit-scale: 1; } .modal__dialog { background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); width: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-radius: min(32px, var(--radius-3xl)); padding: calc(var(--spacing) * 6); pointer-events: auto; outline-style: none; flex-direction: column; display: flex; position: relative; } .modal__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .modal__dialog[data-placement="auto"] { margin-block: auto; } } .modal__dialog[data-placement="center"] { margin-block: auto; } .modal__dialog[data-placement="bottom"] { margin-top: auto; } .modal__dialog[data-placement="top"] { margin-top: 0; } .modal__dialog--scroll-inside { min-height: 0; max-height: 100%; overflow: clip; } .modal__dialog--scroll-outside { flex-shrink: 0; height: auto; min-height: 0; } .modal__dialog--xs { max-width: var(--container-xs); } .modal__dialog--sm { max-width: var(--container-sm); } .modal__dialog--md { max-width: var(--container-md); } .modal__dialog--lg { max-width: var(--container-lg); } .modal__dialog--cover { width: 100%; height: 100%; min-height: 100%; } .modal__dialog--full { --tw-shadow: 0 0 #0000; width: 100%; height: 100%; min-height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: 0; } .modal__header { gap: calc(var(--spacing) * 3); flex-direction: column; margin-bottom: 0; display: flex; } .modal__header > .modal__icon { margin-bottom: 0; } .modal__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .modal__icon { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .modal__body { min-height: 0; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; color: var(--muted); margin: -3px; flex: 1; margin-block: 0; padding: 3px; line-height: 1.43; overflow: visible; } .modal__body--scroll-inside { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-y: auto; } .modal__body--scroll-outside { overflow-y: visible; } .modal__footer { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); flex-direction: row; margin-top: 0; display: flex; } .modal__close-trigger { top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); position: absolute; } .modal__header + .modal__body { margin-top: calc(var(--spacing) * 2); } .modal__header + .modal__footer, .modal__body + .modal__footer { margin-top: calc(var(--spacing) * 5); } .popover { transform-origin: var(--trigger-anchor-point); background-color: var(--overlay); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); padding: 0; } .popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .popover[data-exiting="true"], .popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .popover__dialog { padding: calc(var(--spacing) * 4); --tw-outline-style: none; outline-style: none; } .popover__heading { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .popover__trigger { transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .popover__trigger { cursor: var(--cursor-interactive); } .popover__trigger:focus-visible:not(:focus), .popover__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .popover__trigger:disabled, .popover__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tooltip { max-width: var(--container-xs); transform-origin: var(--trigger-anchor-point); background-color: var(--overlay); padding: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); word-break: break-all; border-radius: min(32px, var(--radius-xl)); box-shadow: var(--shadow-overlay); } .tooltip[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .tooltip[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .tooltip[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .tooltip[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .tooltip[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .tooltip[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .tooltip[data-exiting="true"], .tooltip[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .tooltip [data-slot="overlay-arrow"] { stroke: var(--border); } @supports (color: color-mix(in lab, red, red)) { .tooltip [data-slot="overlay-arrow"] { stroke: color-mix(in oklab, var(--border) 40%, transparent); } } .tooltip [data-slot="overlay-arrow"] { fill: var(--overlay); } .tooltip[data-placement="bottom"] [data-slot="overlay-arrow"] { rotate: 180deg; } .tooltip[data-placement="left"] [data-slot="overlay-arrow"] { rotate: -90deg; } .tooltip[data-placement="right"] [data-slot="overlay-arrow"] { rotate: 90deg; } .tooltip__trigger { transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tooltip__trigger:focus-visible:not(:focus), .tooltip__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .combo-box { gap: var(--spacing); flex-direction: column; display: flex; } :is(.combo-box[data-invalid="true"], .combo-box[aria-invalid="true"]) [data-slot="description"] { display: none; } .combo-box [data-slot="label"] { width: fit-content; } .combo-box [data-slot="input"] { flex: 1; min-width: 0; } .combo-box [data-slot="input"]:has( + .combo-box__trigger) { padding-inline-end: calc(var(--spacing) * 7); } .combo-box [data-slot="input"]:focus, .combo-box [data-slot="input"][data-focus] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .combo-box [data-slot="input"]:disabled, .combo-box [data-slot="input"][data-disabled], .combo-box [data-slot="input"][aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .combo-box__input-group { isolation: isolate; align-items: center; display: inline-flex; position: relative; } .combo-box__trigger { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); height: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); cursor: pointer; color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; -webkit-tap-highlight-color: transparent; --tw-border-style: none; --tw-outline-style: none; inset-inline-end: calc(var(--spacing) * 0); background-color: #0000; border-style: none; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; padding-inline-end: calc(var(--spacing) * 2); transition-duration: .15s; display: flex; position: absolute; top: 50%; } @media (hover: hover) { .combo-box__trigger:hover, .combo-box__trigger[data-hovered="true"] { color: var(--field-foreground, var(--foreground)); } } .combo-box__trigger:focus-visible:not(:focus), .combo-box__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-radius: .25rem; outline-style: none; } .combo-box__trigger[data-pressed="true"] { opacity: .7; } .combo-box__trigger:disabled, .combo-box__trigger[data-disabled], .combo-box__trigger[aria-disabled="true"] { cursor: not-allowed; opacity: .5; } .combo-box__trigger [data-slot="combo-box-trigger-default-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; transition-duration: .15s; } .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .combo-box__trigger[data-open="true"] [data-slot="combo-box-trigger-default-icon"] { rotate: 180deg; } .combo-box__popover { min-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: var(--spacing); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; background-color: var(--overlay); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); padding: 0; overflow-y: auto; } .combo-box__popover:focus-visible:not(:focus), .combo-box__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .combo-box__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .combo-box__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .combo-box__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .combo-box__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .combo-box__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .combo-box__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .combo-box__popover[data-exiting="true"], .combo-box__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .combo-box__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .combo-box__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .combo-box__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .combo-box__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .combo-box__popover [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .combo-box__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .combo-box__popover [data-slot="list-box-item"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } .combo-box--full-width, .combo-box__input-group--full-width { width: 100%; } .select { gap: var(--spacing); flex-direction: column; display: flex; } :is(.select[data-invalid="true"], .select[aria-invalid="true"]) [data-slot="description"] { display: none; } .select [data-slot="label"] { width: fit-content; } .select__trigger { isolation: isolate; min-height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: inline-flex; position: relative; } .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .select__trigger { cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--field-border); } .select__trigger:has(.select__indicator) { padding-inline-end: calc(var(--spacing) * 7); } @media (hover: hover) { .select__trigger:hover, .select__trigger[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .select__trigger:focus-visible:not(:focus), .select__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus-visible, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focused="true"], :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focus-visible="true"], :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus-within, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger { background-color: var(--field-focus); } .select__trigger:disabled, .select__trigger[data-disabled="true"], .select__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .select--secondary .select__trigger { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--select-trigger-bg); --select-trigger-bg: var(--default); --select-trigger-bg-hover: var(--default-hover); --select-trigger-bg-focus: var(--default); } @media (hover: hover) { .select--secondary .select__trigger:hover, .select--secondary .select__trigger[data-hovered="true"] { background-color: var(--select-trigger-bg-hover); } } .select--secondary .select__trigger:focus-visible:not(:focus), .select--secondary .select__trigger[data-focus-visible="true"], .select[data-invalid="true"] :is(.select--secondary .select__trigger), .select[aria-invalid="true"] :is(.select--secondary .select__trigger) { background-color: var(--select-trigger-bg-focus); } .select__value { text-align: start; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); overflow-wrap: break-word; color: currentColor; flex: 1; } @media (min-width: 40rem) { .select__value { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .select__value[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .select__value [data-slot="list-box-item-indicator"] { display: none; } .select__indicator { color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; flex-shrink: 0; justify-content: center; align-items: center; margin-block: auto; transition-duration: .15s; display: flex; position: absolute; inset-block: 0; inset-inline-end: calc(var(--spacing) * 2); } .select__indicator[data-open="true"] { rotate: 180deg; } .select__indicator[data-slot="select-default-indicator"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .select__popover { min-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: var(--spacing); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; background-color: var(--overlay); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); padding: 0; overflow-y: auto; } .select__popover:focus-visible:not(:focus), .select__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .select__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .select__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .select__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .select__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .select__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .select__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .select__popover[data-exiting="true"], .select__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .select__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .select__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .select__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .select__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .select__popover [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .select__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .select__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], .select__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } .select--full-width, .select__trigger--full-width { width: 100%; } .autocomplete { gap: var(--spacing); flex-direction: column; display: flex; } .autocomplete__trigger { isolation: isolate; min-height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: inline-flex; position: relative; } .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .autocomplete__trigger { cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--field-border); } .autocomplete__trigger:has(.autocomplete__indicator) { padding-inline-end: calc(var(--spacing) * 7); } @media (hover: hover) { .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)), .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .autocomplete__trigger:focus-visible:not(:focus), .autocomplete__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus-visible, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focused="true"], :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focus-visible="true"], :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus-within, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger { background-color: var(--field-focus); } .autocomplete__trigger:disabled, .autocomplete__trigger[data-disabled="true"], .autocomplete__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .autocomplete--secondary .autocomplete__trigger { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--autocomplete-trigger-bg); --autocomplete-trigger-bg: var(--default); --autocomplete-trigger-bg-hover: var(--default-hover); --autocomplete-trigger-bg-focus: var(--default); } @media (hover: hover) { .autocomplete--secondary .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)), .autocomplete--secondary .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--autocomplete-trigger-bg-hover); } } .autocomplete--secondary .autocomplete__trigger:focus-visible:not(:focus), .autocomplete--secondary .autocomplete__trigger[data-focus-visible="true"], .autocomplete[data-invalid="true"] :is(.autocomplete--secondary .autocomplete__trigger), .autocomplete[aria-invalid="true"] :is(.autocomplete--secondary .autocomplete__trigger) { background-color: var(--autocomplete-trigger-bg-focus); } .autocomplete__value { text-align: start; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); overflow-wrap: break-word; color: currentColor; flex: 1; } @media (min-width: 40rem) { .autocomplete__value { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .autocomplete__value[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .autocomplete__value [data-slot="list-box-item-indicator"] { display: none; } .autocomplete__indicator { color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; cursor: var(--cursor-interactive); flex-shrink: 0; justify-content: center; align-items: center; margin-block: auto; transition-duration: .15s; display: flex; position: absolute; inset-block: 0; inset-inline-end: calc(var(--spacing) * 2); } .autocomplete__indicator[data-open="true"] { rotate: 180deg; } .autocomplete__indicator[data-slot="autocomplete-default-indicator"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .autocomplete__popover { width: var(--trigger-width); max-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: var(--spacing); overscroll-behavior: contain; background-color: var(--overlay); padding: 0; padding-top: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); overflow: hidden; } .autocomplete__popover:focus-visible:not(:focus), .autocomplete__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .autocomplete__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .25s; --tw-ease: cubic-bezier(.32, .72, 0, 1); --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .25s; transition-timing-function: cubic-bezier(.32, .72, 0, 1); } .autocomplete__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .autocomplete__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .autocomplete__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .autocomplete__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .autocomplete__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .autocomplete__popover[data-exiting="true"], .autocomplete__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .autocomplete__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .autocomplete__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .autocomplete__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .autocomplete__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .autocomplete__popover [data-slot="list-box"] { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); max-height: 320px; padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; overflow-y: auto; } .autocomplete__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .autocomplete__popover [role="presentation"] > [data-slot="list-box-item"] { width: calc(100% - var(--spacing) * 3); } .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } .autocomplete__popover [data-slot="search-field"] { padding-inline: calc(var(--spacing) * 3); padding-block: var(--spacing); --tw-outline-style: none; outline-style: none; } .autocomplete__popover [data-slot="empty-state"] { text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--overlay-foreground); } @supports (color: color-mix(in lab, red, red)) { .autocomplete__popover [data-slot="empty-state"] { color: color-mix(in oklab, var(--overlay-foreground) 60%, transparent); } } .autocomplete__popover-dialog, .autocomplete__popover-dialog:focus, .autocomplete__popover-dialog:focus-visible, .autocomplete__popover-dialog[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .autocomplete--full-width, .autocomplete__trigger--full-width { width: 100%; } .autocomplete__clear-button { isolation: isolate; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); transform-origin: center; border-radius: calc(var(--radius) * 1.5); padding: var(--spacing); color: var(--muted); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); cursor: var(--cursor-interactive); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); background-color: #0000; flex-shrink: 0; justify-content: center; align-self: center; align-items: center; margin-inline-end: 0; display: inline-flex; position: relative; } .autocomplete__clear-button:not([data-empty="true"]) { transition: opacity .15s var(--ease-smooth); } .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .autocomplete__clear-button[data-empty="true"] { pointer-events: none; opacity: 0; } .autocomplete__clear-button [data-slot="autocomplete-clear-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } @media (hover: hover) { .autocomplete__clear-button:hover, .autocomplete__clear-button[data-hovered="true"] { background-color: var(--default-hover); } } .autocomplete__clear-button:active, .autocomplete__clear-button[data-pressed="true"] { transform: scale(.93); } .kbd { height: calc(var(--spacing) * 6); align-items: center; display: inline-flex; } :where(.kbd > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } .kbd { border-radius: calc(var(--radius) * 1); background-color: var(--default); padding-inline: calc(var(--spacing) * 2); text-align: center; font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--muted); } :where(.kbd:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) { --tw-space-x-reverse: 1; } .kbd { word-spacing: -.25rem; } .kbd__abbr { justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none; display: flex; } .kbd__content { justify-content: center; align-items: center; display: flex; } .kbd--light { background-color: #0000; } .typography, .typography-prose { color: var(--foreground); } .typography-prose h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h4 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h5 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h6 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose p { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .typography-prose code { border-radius: calc(var(--radius) * .75); background-color: var(--default); padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * .5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--foreground); } .typography-prose a { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--link); text-underline-offset: 4px; text-decoration-line: underline; } .typography-prose blockquote { margin-top: calc(var(--spacing) * 4); border-left-style: var(--tw-border-style); border-left-width: 4px; border-color: var(--border); padding-left: calc(var(--spacing) * 4); color: var(--muted); font-style: italic; } .typography-prose ul { margin-block: calc(var(--spacing) * 4); list-style-type: disc; } :where(.typography-prose ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } .typography-prose ul { padding-left: calc(var(--spacing) * 6); } .typography-prose ol { margin-block: calc(var(--spacing) * 4); list-style-type: decimal; } :where(.typography-prose ol > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } .typography-prose ol { padding-left: calc(var(--spacing) * 6); } .typography-prose li { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .typography-prose hr { margin-block: calc(var(--spacing) * 8); border-color: var(--separator); } .typography-prose pre { margin-block: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); background-color: var(--default); padding: calc(var(--spacing) * 4); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); overflow-x: auto; } .typography-prose strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--foreground); } .typography-prose em { font-style: italic; } .typography-prose img { margin-block: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); } .typography--h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h4 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h5 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h6 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--body { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .typography--body-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .typography--body-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .typography--code { border-radius: calc(var(--radius) * .75); background-color: var(--default); padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * .5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--foreground); } .typography--align-start { text-align: left; } .typography--align-start:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } .typography--align-center { text-align: center; } .typography--align-end { text-align: right; } .typography--align-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: left; } .typography--align-justify { text-align: justify; } .typography--color-default { color: var(--foreground); } .typography--color-muted { color: var(--muted); } .typography--truncate { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; } .typography--weight-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .typography--weight-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .typography--weight-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .typography--weight-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .scroll-shadow { --scroll-shadow-size: 40px; --scroll-shadow-scrollbar-size: 10px; position: relative; } .scroll-shadow--vertical { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overflow-y: auto; } .scroll-shadow--horizontal { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overflow-x: auto; } .scroll-shadow--fade.scroll-shadow--vertical:where([data-top-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"]) { -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; } .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] { --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] { --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll="true"] { --scroll-linear-gradient: #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal:where([data-left-scroll="true"], [data-right-scroll="true"], [data-left-right-scroll="true"]) { -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 0 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); } .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] { --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] { --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll="true"] { --scroll-linear-gradient: to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--hide-scrollbar { scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; --scroll-shadow-scrollbar-size: 0px; } } @layer utilities { .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .isolate { isolation: isolate; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .block { display: block; } .hidden { display: none; } .inline { display: inline; } .table { display: table; } .resize { resize: both; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur { --tw-blur: blur(8px); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } @property --tw-animation-duration { syntax: "*"; inherits: false } @property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } @property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } :root { --font-sans: "Inter Tight Variable", "Inter Tight", Inter, Arial, sans-serif; --canvas: #f8f7f6; --surface: #fdfcfa; --surface-muted: #f2efec; --surface-hover: #ecebe7; --surface-active: #e4e1de; --border: #dfdddb; --border-strong: #c9c5c5; --text: #252329; --text-secondary: #514d52; --text-muted: #69656a; --accent: #7c647c; --accent-hover: #695369; --accent-soft: #eee7ed; --link: #654f68; --focus: #806c82; --pearl-gradient: linear-gradient(112deg, #ebdac7 0%, #d8c6c1 34%, #c9ced1 67%, #dee6e4 100%); --shadow-soft: 0 12px 40px #2d242e14; --shadow-float: 0 18px 60px #2d242e21; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; --ease-out: cubic-bezier(.22, 1, .36, 1); --motion-fast: .16s; --motion-base: .22s; --motion-shell: .26s; --page-max: 1200px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); color-scheme: light; font-synthesis: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; } :root[data-theme="dark"] { --canvas: #151319; --surface: #24212a; --surface-muted: #1c1921; --surface-hover: #2b2631; --surface-active: #352f3b; --border: #403a46; --border-strong: #56505d; --text: #f6f4ef; --text-secondary: #d8d1d5; --text-muted: #b8b1b8; --accent: #ebdac7; --accent-hover: #f1e4d6; --accent-soft: #332b34; --link: #f1dcc9; --focus: #ead8c5; --shadow-soft: 0 14px 44px #00000038; --shadow-float: 0 20px 68px #00000052; color-scheme: dark; } *, :before, :after { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--canvas); scroll-padding-top: 112px; } body { background: var(--canvas); min-width: 320px; min-height: 100svh; color: var(--text); margin: 0; } input, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:not([data-slot="button"]) { color: inherit; } a { color: inherit; text-decoration: none; } img, svg { display: block; } ::selection { color: var(--text); background: var(--accent); } @supports (color: color-mix(in lab, red, red)) { ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); } } .landing-page { --scene-a: #d5c3dc; --scene-b: #b7c6d0; --scene-c: #e7d2c6; --scene-d: #c4d4ca; --scene-ink: #493d51; --scene-soft: #eee9f0; background: var(--canvas); min-height: 100svh; color: var(--text); } .landing-page[data-landing="trust"] { --scene-a: #ddc4c6; --scene-b: #c8b8cc; --scene-c: #ead8c9; --scene-d: #c9d5cf; --scene-ink: #553f49; --scene-soft: #f1e8e8; } .landing-page[data-landing="transition"] { --scene-a: #c4ced8; --scene-b: #b6c8c8; --scene-c: #ddd1c6; --scene-d: #d8c7d7; --scene-ink: #3f4c58; --scene-soft: #e8edef; } .landing-page[data-landing="calm"] { --scene-a: #becfc8; --scene-b: #b9c8d3; --scene-c: #d9d0c1; --scene-d: #cad8d1; --scene-ink: #3d514c; --scene-soft: #e5ece8; } .landing-page[data-landing="energy"] { --scene-a: #d8c9ae; --scene-b: #c3c9c2; --scene-c: #d7bfae; --scene-d: #c2cfce; --scene-ink: #51493c; --scene-soft: #eeeae1; } :root[data-theme="dark"] .landing-page { --scene-soft: var(--scene-ink); } @supports (color: color-mix(in lab, red, red)) { :root[data-theme="dark"] .landing-page { --scene-soft: color-mix(in srgb, var(--scene-ink) 38%, var(--surface)); } } :root[data-theme="dark"] .landing-page { background: var(--canvas); } .page-shell { width: min(calc(100% - 48px), var(--page-max)); min-width: 0; margin-inline: auto; } .page-section { padding-block: clamp(88px, 10vw, 152px); scroll-margin-top: 112px; } .skip-link { z-index: 1000; border-radius: var(--radius-md); color: var(--surface); background: var(--text); transition: transform var(--motion-fast) var(--ease-out); padding: 12px 16px; position: fixed; top: 8px; left: 8px; transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } .header-sentinel { pointer-events: none; width: 1px; height: 1px; position: absolute; top: 44px; left: 0; } .landing-header { z-index: 100; top: max(16px, env(safe-area-inset-top)); width: calc(100% - 32px); max-width: 1440px; transition: top var(--motion-shell) var(--ease-out), width var(--motion-shell) var(--ease-out), max-width var(--motion-shell) var(--ease-out); position: fixed; left: 50%; transform: translateX(-50%); } .landing-header[data-compact="true"] { top: max(12px, env(safe-area-inset-top)); max-width: 900px; } .landing-header__inner { border: 1px solid var(--border); grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; min-width: 0; height: 72px; padding: 10px 12px 10px 22px; display: grid; } @supports (color: color-mix(in lab, red, red)) { .landing-header__inner { border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); } } .landing-header__inner { background: var(--surface); box-shadow: var(--shadow-soft); transition: height var(--motion-shell) var(--ease-out), padding var(--motion-shell) var(--ease-out), border-radius var(--motion-shell) var(--ease-out), box-shadow var(--motion-shell) var(--ease-out); border-radius: 24px; } .landing-header[data-compact="true"] .landing-header__inner { height: 60px; box-shadow: var(--shadow-float); border-radius: 20px; padding: 7px 8px 7px 18px; } .landing-brand { border-radius: var(--radius-md); outline: none; justify-self: start; align-items: center; min-width: 0; height: 44px; display: inline-flex; } .landing-brand img { width: 126px; height: auto; } .landing-brand:focus-visible, .landing-header__nav button:focus-visible, .landing-segment button:focus-visible, .orientation-option:focus-visible, .landing-footer__themes a:focus-visible, .faq-list summary:focus-visible { outline: 3px solid var(--focus); } @supports (color: color-mix(in lab, red, red)) { .landing-brand:focus-visible, .landing-header__nav button:focus-visible, .landing-segment button:focus-visible, .orientation-option:focus-visible, .landing-footer__themes a:focus-visible, .faq-list summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 72%, transparent); } } .landing-brand:focus-visible, .landing-header__nav button:focus-visible, .landing-segment button:focus-visible, .orientation-option:focus-visible, .landing-footer__themes a:focus-visible, .faq-list summary:focus-visible { outline-offset: 3px; } .landing-header__nav { justify-content: center; align-items: center; gap: 4px; min-width: 0; display: flex; } .landing-header__nav button { border-radius: var(--radius-md); min-height: 44px; color: var(--text-secondary); cursor: pointer; transition: color var(--motion-fast) ease, background var(--motion-fast) ease; background: none; border: 0; padding: 0 14px; } .landing-header__nav button:hover { color: var(--text); background: var(--surface-hover); } .landing-header__actions { justify-self: end; align-items: center; gap: 8px; min-width: 0; display: flex; } .landing-segment { flex: none; } .landing-segment__expanded { border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); grid-template-columns: repeat(2, 1fr); width: 94px; height: 44px; padding: 3px; display: grid; } .landing-segment__expanded button, .landing-segment__compact { border-radius: var(--radius-pill); min-width: 0; min-height: 0; color: var(--text-muted); cursor: pointer; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease; background: none; border: 0; place-items: center; padding: 0; display: grid; } .landing-segment__expanded button[data-active="true"] { color: var(--text); background: var(--surface); box-shadow: 0 2px 10px #261f2814; } .landing-segment__expanded button svg, .landing-segment__compact svg { stroke-width: 1.8px; width: 17px; height: 17px; } .landing-segment--language .landing-segment__expanded button { letter-spacing: .06em; font-size: 12px; font-weight: 650; } .landing-segment__compact { border: 1px solid var(--border); width: 44px; height: 44px; color: var(--text); background: var(--surface-muted); letter-spacing: .04em; font-size: 12px; font-weight: 650; display: none; } .landing-header[data-compact="true"] .landing-segment__expanded { display: none; } .landing-header[data-compact="true"] .landing-segment__compact { display: grid; } .landing-header__cta, .landing-primary-button { border-radius: var(--radius-lg); color: #2d2930; background: var(--pearl-gradient); min-height: 48px; transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), filter var(--motion-base) ease; border: 0; padding-inline: 20px; font-weight: 650; box-shadow: 0 9px 24px #5b4b5b21; } .landing-header__cta { border-radius: var(--radius-lg); white-space: nowrap; min-height: 44px; padding-inline: 18px; } .landing-header__cta:hover, .landing-primary-button:hover { filter: saturate(1.08) brightness(1.02); transform: translateY(-1px); box-shadow: 0 12px 30px #5b4b5b2e; } .landing-header__cta svg, .landing-primary-button svg, .landing-secondary-button svg { flex: none; width: 18px; height: 18px; } .landing-header__cta-short { display: none; } .landing-secondary-button { border-color: var(--border-strong); border-radius: var(--radius-lg); min-height: 48px; color: var(--text); transition: color var(--motion-base) ease, background var(--motion-base) ease, border-color var(--motion-base) ease, transform var(--motion-base) var(--ease-out); background: none; padding-inline: 20px; font-weight: 600; } .landing-secondary-button:hover { color: var(--text); border-color: var(--text-muted); background: var(--surface-hover); transform: translateY(-1px); } .landing-hero { text-align: center; place-items: center; min-height: 82svh; padding: clamp(160px, 18vh, 220px) 24px clamp(72px, 8vh, 112px); display: grid; } .landing-hero__copy { width: min(100%, 1120px); min-width: 0; } .landing-hero__eyebrow, .section-kicker { color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 22px; font-size: 12px; font-weight: 680; line-height: 1.3; } .landing-hero h1 { max-width: 1100px; color: var(--text); letter-spacing: -.058em; text-wrap: balance; margin: 0 auto; font-size: clamp(52px, 6.3vw, 92px); font-weight: 590; line-height: .96; } .landing-hero h1 span { color: #0000; background: var(--pearl-gradient); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] .landing-hero h1 span { filter: saturate(1.25) contrast(1.25) brightness(.77); } .landing-hero__lead { max-width: 720px; color: var(--text-secondary); text-wrap: pretty; margin: 28px auto 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; } .landing-hero__actions { flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 34px; display: flex; } .landing-hero__privacy { color: var(--text-muted); justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; display: flex; } .landing-hero__privacy svg { stroke-width: 1.8px; width: 16px; height: 16px; } .media-marquee { width: 100%; padding-bottom: clamp(72px, 9vw, 132px); } .media-marquee__viewport { width: 100%; display: flex; overflow: hidden; } .media-marquee__track { will-change: transform; flex: none; align-items: center; gap: 20px; min-width: max-content; padding-right: 20px; animation: 64s linear infinite media-marquee; display: flex; } .media-marquee__viewport[data-running="false"] .media-marquee__track { animation-play-state: paused; } @keyframes media-marquee { to { transform: translateX(-100%); } } .shape-tile { border: 1px solid var(--border); flex: none; width: clamp(230px, 20vw, 312px); height: clamp(318px, 30vw, 452px); position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .shape-tile { border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } } .shape-tile { border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--scene-a), var(--scene-b)); } @supports (color: color-mix(in lab, red, red)) { .shape-tile { background: linear-gradient(145deg, color-mix(in srgb, var(--scene-a) 86%, white), var(--scene-b)); } } .shape-tile { isolation: isolate; } .shape-tile:nth-child(2n) { transform: translateY(18px); } .shape-tile:nth-child(3n) { transform: translateY(-14px); } .shape-tile__light, .shape-tile__figure, .shape-tile__detail { pointer-events: none; display: block; position: absolute; } .shape-tile__light { z-index: -1; aspect-ratio: 1; background: #fff; border-radius: 50%; width: 82%; top: -14%; right: -18%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile__light { background: color-mix(in srgb, white 72%, var(--scene-c)); } } .shape-tile__light { opacity: .68; box-shadow: 0 0 70px #ffffff73; } @supports (color: color-mix(in lab, red, red)) { .shape-tile__figure { background: radial-gradient(circle at 50% 14%, var(--scene-ink) 0 10%, transparent 10.5%), linear-gradient(165deg, color-mix(in srgb, var(--scene-ink) 92%, black), color-mix(in srgb, var(--scene-a) 52%, var(--scene-ink))); } } .shape-tile__detail { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid #ffffff52; width: 38%; height: 22%; bottom: 10%; right: 12%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile__detail { background: color-mix(in srgb, var(--surface) 58%, transparent); } } .shape-tile--2 { background: linear-gradient(180deg, var(--scene-b), var(--scene-d)); width: clamp(270px, 23vw, 354px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--2 { background: linear-gradient(180deg, color-mix(in srgb, var(--scene-b) 64%, #dbe8ed), color-mix(in srgb, var(--scene-d) 82%, #6f8587)); } } .shape-tile--2 .shape-tile__figure { background: repeating-linear-gradient(172deg, transparent 0 28px, #ffffff29 29px 31px), var(--scene-ink); border-radius: 56% 0 0; width: 86%; height: 58%; left: auto; right: -8%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile--2 .shape-tile__figure { background: repeating-linear-gradient(172deg, transparent 0 28px, #ffffff29 29px 31px), color-mix(in srgb, var(--scene-ink) 68%, var(--scene-d)); } } .shape-tile--2 .shape-tile__figure { transform: rotate(0); } .shape-tile--2 .shape-tile__detail { width: 46%; height: 16%; top: 14%; bottom: auto; left: 11%; } .shape-tile--3 { background: radial-gradient(circle at 52% 44%, var(--scene-c) 0 17%, transparent 17.5%), conic-gradient(from 18deg at 52% 44%, var(--scene-a), var(--scene-c), var(--scene-d), var(--scene-a)); width: clamp(214px, 18vw, 280px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--3 { background: radial-gradient(circle at 52% 44%, color-mix(in srgb, var(--scene-c) 60%, white) 0 17%, transparent 17.5%), conic-gradient(from 18deg at 52% 44%, var(--scene-a), var(--scene-c), var(--scene-d), var(--scene-a)); } } .shape-tile--3 .shape-tile__figure { background: none; border: 1px solid #ffffff61; border-radius: 50% 50% 16px 16px; width: auto; height: 58%; inset: 17% 13% auto; transform: rotate(5deg); } .shape-tile--3 .shape-tile__detail { background: var(--scene-ink); width: 72%; height: 13%; bottom: 9%; left: 14%; right: auto; } @supports (color: color-mix(in lab, red, red)) { .shape-tile--3 .shape-tile__detail { background: color-mix(in srgb, var(--scene-ink) 78%, transparent); } } .shape-tile--4 { background: linear-gradient(90deg, transparent 49%, #ffffff52 49.5% 50.5%, transparent 51%), linear-gradient(180deg, var(--scene-c), var(--scene-a)); width: clamp(290px, 24vw, 372px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--4 { background: linear-gradient(90deg, transparent 49%, #ffffff52 49.5% 50.5%, transparent 51%), linear-gradient(180deg, color-mix(in srgb, var(--scene-c) 78%, white), color-mix(in srgb, var(--scene-a) 60%, var(--scene-ink))); } } .shape-tile--4 .shape-tile__figure { border-radius: 50% 50% var(--radius-md) var(--radius-md); background: var(--scene-ink); width: 76%; height: 38%; bottom: 8%; left: 12%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile--4 .shape-tile__figure { background: color-mix(in srgb, var(--scene-ink) 82%, transparent); } } .shape-tile--4 .shape-tile__figure { transform: none; } .shape-tile--4 .shape-tile__detail { background: #fff; border-radius: 50%; width: 30%; height: 28%; top: 12%; bottom: auto; right: 12%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile--4 .shape-tile__detail { background: color-mix(in srgb, white 54%, var(--scene-d)); } } .shape-tile--5 { background: linear-gradient(155deg, var(--scene-d), var(--scene-b)); width: clamp(220px, 19vw, 292px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--5 { background: linear-gradient(155deg, color-mix(in srgb, var(--scene-d) 74%, white), color-mix(in srgb, var(--scene-b) 70%, var(--scene-ink))); } } .shape-tile--5 .shape-tile__figure { background: repeating-linear-gradient(90deg, transparent 0 40px, #ffffff21 41px 43px), var(--scene-ink); border-radius: 0 62% 0 0; width: 92%; height: 82%; bottom: -3%; left: -12%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile--5 .shape-tile__figure { background: repeating-linear-gradient(90deg, transparent 0 40px, #ffffff21 41px 43px), color-mix(in srgb, var(--scene-ink) 48%, var(--scene-a)); } } .shape-tile--5 .shape-tile__figure { transform: none; } .shape-tile--5 .shape-tile__detail { width: 32%; height: 9%; top: 14%; bottom: auto; right: 10%; } .shape-tile--6 { background: radial-gradient(circle at 16% 18%, #ffffff7a 0 3%, transparent 3.5%), radial-gradient(circle at 78% 26%, #ffffff57 0 4%, transparent 4.5%), linear-gradient(180deg, var(--scene-b), var(--scene-d)); width: clamp(278px, 23vw, 360px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--6 { background: radial-gradient(circle at 16% 18%, #ffffff7a 0 3%, transparent 3.5%), radial-gradient(circle at 78% 26%, #ffffff57 0 4%, transparent 4.5%), linear-gradient(180deg, color-mix(in srgb, var(--scene-b) 74%, #d9e3ec), color-mix(in srgb, var(--scene-d) 76%, #647269)); } } .shape-tile--6 .shape-tile__figure { width: 44%; height: 64%; bottom: -4%; left: 28%; transform: rotate(4deg); } .shape-tile--6 .shape-tile__detail { width: 48%; height: 18%; bottom: 7%; right: 8%; } .shape-tile--7 { background: repeating-linear-gradient(0deg, transparent 0 42px, #ffffff2e 43px 45px), linear-gradient(140deg, var(--scene-c), var(--scene-a)); width: clamp(234px, 20vw, 310px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--7 { background: repeating-linear-gradient(0deg, transparent 0 42px, #ffffff2e 43px 45px), linear-gradient(140deg, color-mix(in srgb, var(--scene-c) 86%, white), color-mix(in srgb, var(--scene-a) 75%, var(--scene-ink))); } } .shape-tile--7 .shape-tile__figure { border-radius: 64% 0 0; width: 94%; height: 76%; bottom: -12%; left: auto; right: -10%; transform: none; } .shape-tile--7 .shape-tile__detail { width: 58%; height: 11%; inset: 14% auto auto 10%; } .shape-tile--8 { background: linear-gradient(120deg, transparent 0 42%, #ffffff47 42.5% 43.5%, transparent 44%), linear-gradient(160deg, var(--scene-d), var(--scene-c)); width: clamp(304px, 25vw, 390px); } @supports (color: color-mix(in lab, red, red)) { .shape-tile--8 { background: linear-gradient(120deg, transparent 0 42%, #ffffff47 42.5% 43.5%, transparent 44%), linear-gradient(160deg, color-mix(in srgb, var(--scene-d) 82%, white), color-mix(in srgb, var(--scene-c) 68%, var(--scene-ink))); } } .shape-tile--8 .shape-tile__figure { width: 42%; height: 72%; bottom: -8%; left: 33%; transform: rotate(-2deg); } .shape-tile--8 .shape-tile__detail { border-radius: 50% 50% var(--radius-md) var(--radius-md); width: 25%; height: 35%; top: 10%; bottom: auto; right: 8%; } .intro-section { border-top: 1px solid var(--border); } .intro-layout { grid-template-columns: 96px minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(28px, 5vw, 80px); display: grid; } .intro-layout__index { color: var(--text-muted); letter-spacing: .12em; margin: 9px 0 0; font-size: 13px; } .intro-layout h2, .section-heading h2, .mechanism-layout h2, .care-mosaic__copy h2, .expert-copy h2, .lead-form-copy h2 { color: var(--text); margin: 0; } .intro-layout > p:last-child { max-width: 650px; color: var(--text-secondary); margin: 2px 0 0; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; } .section-heading { min-width: 0; max-width: 780px; } .section-heading[data-align="center"] { text-align: center; margin-inline: auto; } .section-heading > p:last-child { max-width: 650px; color: var(--text-secondary); margin: 24px 0 0; font-size: 18px; line-height: 1.55; } .section-heading[data-align="center"] > p:last-child { margin-inline: auto; } .recognition-section { background: var(--surface-muted); } .recognition-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(174px, auto); gap: 14px; margin-top: 54px; display: grid; } .recognition-card { border: 1px solid var(--border); flex-direction: column; justify-content: space-between; min-width: 0; min-height: 174px; padding: 24px; display: flex; position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .recognition-card { border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); } } .recognition-card { border-radius: var(--radius-xl); background: var(--surface); } .recognition-card > span { color: var(--text-muted); letter-spacing: .1em; font-size: 12px; font-weight: 650; } .recognition-card p { max-width: 34ch; color: var(--text); text-wrap: pretty; margin: 30px 0 0; font-size: 18px; line-height: 1.42; } .recognition-card > svg { width: 32px; height: 32px; color: var(--scene-ink); opacity: .65; position: absolute; bottom: 24px; right: 24px; } .recognition-card--1 { background: radial-gradient(circle at 90% 5%, var(--scene-c), transparent 45%), var(--scene-soft); grid-area: span 2 / span 6; padding: 30px; } @supports (color: color-mix(in lab, red, red)) { .recognition-card--1 { background: radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--scene-c) 75%, white), transparent 45%), var(--scene-soft); } } .recognition-card--1 p { letter-spacing: -.025em; max-width: 28ch; padding-right: 30px; font-size: clamp(23px, 2.3vw, 32px); line-height: 1.22; } .recognition-card--2, .recognition-card--3 { grid-column: span 3; } .recognition-card--4, .recognition-card--5, .recognition-card--6 { grid-column: span 4; } .orientation-section { background: var(--canvas); } .orientation-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(48px, 8vw, 112px); display: grid; } .orientation-panel { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); min-width: 0; box-shadow: var(--shadow-soft); margin: 0; padding: clamp(24px, 3vw, 36px); } .orientation-panel legend { width: 100%; color: var(--text); letter-spacing: -.025em; margin-bottom: 24px; padding: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 590; line-height: 1.25; } .orientation-options { gap: 8px; display: grid; } .orientation-option { border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; min-height: 60px; color: var(--text); text-align: left; cursor: pointer; transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); background: none; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 16px 8px 8px; display: grid; } @supports (color: color-mix(in lab, red, red)) { .orientation-option[data-selected="true"] { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); } } .orientation-option__indicator { border-radius: var(--radius-md); width: 44px; height: 44px; color: var(--text-muted); background: var(--surface-muted); letter-spacing: .08em; place-items: center; font-size: 11px; font-weight: 680; display: grid; } .orientation-option[data-selected="true"] .orientation-option__indicator { color: var(--surface); background: var(--text); } .orientation-option__indicator svg { width: 18px; height: 18px; } .orientation-result { border-top: 1px solid var(--border); min-height: 68px; margin-top: 20px; padding-top: 20px; } .orientation-result p { color: var(--text-secondary); margin: 0; font-size: 15px; line-height: 1.55; } .orientation-result__empty { color: var(--text-muted) !important; } .orientation-result__choice { color: var(--text) !important; margin-bottom: 9px !important; } .orientation-result .landing-secondary-button { margin-top: 18px; } .mechanism-section { background: var(--scene-ink); color: #f8f4f0; } .mechanism-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: start; gap: clamp(48px, 9vw, 128px); display: grid; } .mechanism-layout .section-kicker { color: #ffffff8f; } .mechanism-layout h2 { color: #f8f4f0; } .mechanism-layout__copy { padding-top: 35px; } .mechanism-layout__copy p { color: #ffffffc2; margin: 0; font-size: 19px; line-height: 1.62; } .mechanism-layout__copy p + p { margin-top: 28px; } .care-mosaic-section { background: var(--canvas); padding: clamp(92px, 10vw, 152px) 24px; } .care-mosaic { grid-template-rows: repeat(6, minmax(88px, 118px)); grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; width: min(100%, 1440px); margin-inline: auto; display: grid; } .care-shape { border: 1px solid var(--border); position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .care-shape { border: 1px solid color-mix(in srgb, var(--border) 52%, transparent); } } .care-shape { border-radius: var(--radius-xl); background: radial-gradient(circle at 72% 22%, #ffffff80 0 11%, transparent 11.5%), linear-gradient(150deg, var(--scene-a), var(--scene-b)); } .care-shape:before, .care-shape:after { content: ""; display: block; position: absolute; } .care-shape:before { aspect-ratio: 1; background: var(--scene-ink); border-radius: 50% 50% 10% 10%; width: 76%; bottom: -16%; right: -12%; } @supports (color: color-mix(in lab, red, red)) { .care-shape:before { background: color-mix(in srgb, var(--scene-ink) 72%, transparent); } } .care-shape:after { border-radius: var(--radius-md); background: #ffffff26; border: 1px solid #ffffff59; width: 34%; height: 10%; top: 12%; left: 10%; } .care-shape--1 { grid-area: 1 / 1 / span 3 / span 2; } .care-shape--2 { background: linear-gradient(170deg, var(--scene-d), var(--scene-c)); grid-area: 1 / 3 / span 2 / span 2; } .care-shape--3 { background: linear-gradient(140deg, var(--scene-b), var(--scene-ink)); grid-area: 1 / 5 / span 3 / span 2; } .care-shape--4 { background: linear-gradient(145deg, var(--scene-c), var(--scene-a)); grid-area: 1 / 7 / span 2 / span 2; } .care-mosaic__copy { z-index: 2; text-align: center; grid-area: 4 / 4 / span 3 / span 6; align-self: center; padding: 40px 48px; } .care-mosaic__copy > p:last-child { max-width: 650px; color: var(--text-secondary); margin: 22px auto 0; font-size: 18px; line-height: 1.52; } .care-shape--5 { background: linear-gradient(145deg, var(--scene-d), var(--scene-b)); grid-area: 1 / 9 / span 3 / span 2; } .care-shape--6 { background: linear-gradient(160deg, var(--scene-a), var(--scene-c)); grid-area: 1 / 11 / span 2 / span 2; } .care-shape--7 { background: linear-gradient(155deg, var(--scene-c), var(--scene-ink)); grid-area: 4 / 1 / span 2 / span 2; } .care-shape--8 { background: linear-gradient(160deg, var(--scene-b), var(--scene-d)); grid-area: 4 / 11 / span 3 / span 2; } .help-section { background: var(--surface-muted); } .help-list { border-top: 1px solid var(--border-strong); margin-top: 64px; } .help-item { border-bottom: 1px solid var(--border); grid-template-columns: 80px minmax(180px, .72fr) minmax(0, 1fr) 36px; align-items: center; gap: 28px; min-width: 0; padding: 30px 0; display: grid; } .help-item > span { color: var(--text-muted); letter-spacing: .1em; font-size: 12px; } .help-item h3 { color: var(--text); letter-spacing: -.025em; margin: 0; font-size: 24px; font-weight: 590; } .help-item p { max-width: 570px; color: var(--text-secondary); margin: 0; font-size: 16px; line-height: 1.5; } .help-item > svg { width: 24px; height: 24px; color: var(--text-muted); } .process-section { background: var(--canvas); } .process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 56px 0 0; padding: 0; list-style: none; display: grid; } .process-list li { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); min-width: 0; min-height: 280px; padding: 26px; } .process-list li > span { width: 44px; height: 44px; color: var(--surface); background: var(--text); border-radius: 50%; place-items: center; font-size: 13px; font-weight: 680; display: grid; } .process-list:not(.process-route) h3 { letter-spacing: -.03em; margin: 76px 0 0; font-size: 26px; font-weight: 590; } .process-list p { color: var(--text-secondary); margin: 14px 0 0; font-size: 16px; line-height: 1.55; } .expert-section { background: var(--surface-muted); } .expert-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(46px, 8vw, 112px); display: grid; } .expert-visual { border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 20%, var(--scene-c), transparent 34%), linear-gradient(150deg, var(--scene-a), var(--scene-b)); justify-content: center; align-items: flex-end; min-height: 620px; display: flex; position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .expert-visual { background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--scene-c) 88%, white), transparent 34%), linear-gradient(150deg, var(--scene-a), var(--scene-b)); } } .expert-visual__halo { aspect-ratio: 1; border: 1px solid #ffffff70; border-radius: 50%; width: 54%; position: absolute; top: 13%; } .expert-visual__figure { background: radial-gradient(circle at 50% 12%, var(--scene-ink) 0 11%, transparent 11.5%), linear-gradient(160deg, var(--scene-ink), var(--scene-a)); border-radius: 48% 48% 18% 18% / 30% 30% 10% 10%; width: 52%; height: 76%; position: absolute; bottom: -6%; } @supports (color: color-mix(in lab, red, red)) { .expert-visual__figure { background: radial-gradient(circle at 50% 12%, var(--scene-ink) 0 11%, transparent 11.5%), linear-gradient(160deg, color-mix(in srgb, var(--scene-ink) 88%, black), color-mix(in srgb, var(--scene-a) 48%, var(--scene-ink))); } } .expert-visual__caption { z-index: 2; border-radius: var(--radius-md); color: #ffffffd1; background: var(--scene-ink); border: 1px solid #ffffff40; margin-bottom: 20px; padding: 10px 13px; } @supports (color: color-mix(in lab, red, red)) { .expert-visual__caption { background: color-mix(in srgb, var(--scene-ink) 82%, transparent); } } .expert-visual__caption { font-size: 12px; } .expert-copy__lead { max-width: 660px; color: var(--text-secondary); margin: 28px 0 0; font-size: 18px; line-height: 1.62; } .expert-copy ul { gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; display: grid; } .expert-copy li { color: var(--text-secondary); grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; font-size: 16px; line-height: 1.5; display: grid; } .expert-copy li svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; } .conditions-section { background: var(--canvas); } .conditions-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(48px, 9vw, 130px); display: grid; } .conditions-layout dl { border-top: 1px solid var(--border-strong); margin: 0; } .conditions-layout dl div { border-bottom: 1px solid var(--border); grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 24px; padding: 24px 0; display: grid; } .conditions-layout dt { color: var(--text-muted); font-size: 14px; } .conditions-layout dd { color: var(--text); margin: 0; font-size: 17px; font-weight: 560; } .safety-note-section { background: var(--canvas); padding-bottom: clamp(88px, 10vw, 152px); } .safety-note { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 20px; padding: 24px; display: grid; } .safety-note svg { width: 32px; height: 32px; color: var(--accent); stroke-width: 1.5px; } .safety-note p { color: var(--text-secondary); margin: 0; font-size: 15px; line-height: 1.55; } .faq-section { background: var(--surface-muted); } .faq-layout { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(48px, 8vw, 112px); display: grid; } .faq-list { border-top: 1px solid var(--border-strong); min-width: 0; } .faq-list details { border-bottom: 1px solid var(--border); } .faq-list summary { min-height: 76px; color: var(--text); cursor: pointer; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 20px; padding: 18px 0; font-size: 18px; font-weight: 570; line-height: 1.35; list-style: none; display: grid; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary svg { width: 20px; height: 20px; color: var(--text-muted); transition: transform var(--motion-base) var(--ease-out); } .faq-list details[open] summary svg { transform: rotate(180deg); } .faq-list details p { max-width: 650px; color: var(--text-secondary); margin: -4px 0 24px; padding-right: 46px; font-size: 16px; line-height: 1.58; } .lead-form-section { padding-bottom: max(clamp(88px, 10vw, 152px), env(safe-area-inset-bottom)); background: radial-gradient(circle at 14% 20%, var(--scene-a), transparent 32%), var(--scene-soft); } @supports (color: color-mix(in lab, red, red)) { .lead-form-section { background: radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--scene-a) 26%, transparent), transparent 32%), var(--scene-soft); } } .lead-form-layout { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: start; gap: clamp(48px, 9vw, 130px); display: grid; } .lead-form-copy { position: sticky; top: 112px; } .lead-form-copy > p:not(.section-kicker) { max-width: 620px; color: var(--text-secondary); margin: 26px 0 0; font-size: 18px; line-height: 1.58; } .lead-form-trust { color: var(--text-muted); align-items: flex-start; gap: 10px; margin-top: 30px; font-size: 14px; line-height: 1.45; display: flex; } .lead-form-trust svg { flex: none; width: 18px; height: 18px; margin-top: 1px; } .lead-form, .lead-form-success { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); min-width: 0; box-shadow: var(--shadow-soft); padding: clamp(24px, 3.5vw, 40px); } .lead-form { gap: 22px; display: grid; } .lead-field label { color: var(--text-secondary); font-size: 14px; font-weight: 560; } .lead-field > div { border-color: var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); width: 100%; min-height: 54px; } .lead-field input, .lead-field textarea { width: 100%; color: var(--text); background: none; } .lead-field input { min-height: 52px; } .lead-field textarea { resize: vertical; min-height: 118px; padding-block: 14px; } .lead-field input::placeholder, .lead-field textarea::placeholder { color: var(--text-muted); opacity: .82; } .lead-consent { color: var(--text-muted); cursor: pointer; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; font-size: 13px; line-height: 1.48; display: grid; position: relative; } .lead-consent input { opacity: 0; width: 1px; height: 1px; position: absolute; } .lead-consent__box { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: #0000; background: var(--surface); width: 22px; height: 22px; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease; place-items: center; display: grid; } .lead-consent__box svg { stroke-width: 2.4px; width: 14px; height: 14px; } .lead-consent input:checked + .lead-consent__box { border-color: var(--text); color: var(--surface); background: var(--text); } .lead-consent input:focus-visible + .lead-consent__box { outline: 3px solid var(--focus); } @supports (color: color-mix(in lab, red, red)) { .lead-consent input:focus-visible + .lead-consent__box { outline: 3px solid color-mix(in srgb, var(--focus) 72%, transparent); } } .lead-consent input:focus-visible + .lead-consent__box { outline-offset: 3px; } .lead-form__submit { margin-top: 2px; } .lead-form-success { flex-direction: column; justify-content: center; align-items: flex-start; min-height: 420px; display: flex; } .lead-form-success > svg { width: 42px; height: 42px; color: var(--accent); stroke-width: 1.6px; } .lead-form-success h3 { color: var(--text); letter-spacing: -.035em; margin: 28px 0 0; font-size: clamp(26px, 3vw, 38px); font-weight: 590; line-height: 1.15; } .lead-form-success p { max-width: 520px; color: var(--text-secondary); margin: 16px 0 0; font-size: 16px; line-height: 1.55; } .lead-form-success .landing-secondary-button { margin-top: 28px; } .landing-footer { padding: 64px 0 max(28px, env(safe-area-inset-bottom)); background: var(--surface); } .landing-footer__top { border-bottom: 1px solid var(--border); justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 30px; display: flex; } .landing-footer__top img { width: 120px; height: auto; } .landing-footer__top p { color: var(--text-muted); margin: 0; font-size: 13px; } .landing-footer__themes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 20px; display: grid; } .landing-footer__themes a { border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; min-height: 58px; color: var(--text-secondary); transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.2; display: flex; } .landing-footer__themes a:hover, .landing-footer__themes a[data-active="true"] { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); } .landing-footer__themes a svg { flex: none; width: 16px; height: 16px; } .landing-footer__bottom { color: var(--text-muted); justify-content: space-between; gap: 24px; margin-top: 32px; font-size: 12px; display: flex; } @media (max-width: 1180px) { .landing-header__nav { display: none; } .landing-header__inner { grid-template-columns: 1fr auto; } .landing-header__actions { grid-column: 2; } .landing-footer__themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { .orientation-layout, .mechanism-layout, .expert-layout, .conditions-layout, .faq-layout, .lead-form-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; } .mechanism-layout__copy { max-width: 760px; padding-top: 0; } .expert-visual { min-height: 560px; } .lead-form-copy { position: static; } .recognition-card--1 { grid-column: span 7; } .recognition-card--2, .recognition-card--3 { grid-column: span 5; } .recognition-card--4, .recognition-card--5, .recognition-card--6 { grid-column: span 6; } .care-mosaic { grid-template-rows: repeat(6, minmax(78px, 102px)); } .care-mosaic__copy { grid-column: 3 / span 8; padding-inline: 24px; } } @media (max-width: 760px) { html { scroll-padding-top: 88px; } .page-shell { width: min(calc(100% - 32px), var(--page-max)); } .page-section { padding-block: 84px; scroll-margin-top: 88px; } .landing-header, .landing-header[data-compact="true"] { top: max(8px, env(safe-area-inset-top)); width: calc(100% - 16px); } .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner { border-radius: 18px; height: 60px; padding: 7px 8px 7px 14px; } .landing-header[data-compact="true"] .landing-header__inner { border-radius: 16px; height: 56px; } .landing-brand img { width: 92px; } .landing-header__actions { gap: 6px; } .landing-segment__expanded { display: none; } .landing-segment__compact { display: grid; } .landing-header__cta { min-height: 44px; padding-inline: 14px; } .landing-header__cta-full { display: none; } .landing-header__cta-short { display: inline; } .landing-hero { min-height: 76svh; padding: 136px 16px 64px; } .landing-hero h1 { letter-spacing: -.05em; font-size: clamp(42px, 11vw, 62px); line-height: .98; } .landing-hero__lead { margin-top: 24px; font-size: 18px; line-height: 1.5; } .landing-hero__actions { grid-template-columns: minmax(0, 1fr); width: min(100%, 420px); margin-inline: auto; display: grid; } .landing-hero__actions > button { width: 100%; } .landing-hero__privacy { align-items: flex-start; max-width: 320px; margin-inline: auto; line-height: 1.4; } .media-marquee { padding-bottom: 84px; } .shape-tile { border-radius: var(--radius-lg); width: 224px; height: 318px; } .shape-tile--2, .shape-tile--4, .shape-tile--6, .shape-tile--8 { width: 260px; } .intro-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .intro-layout__index { margin: 0; } .recognition-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; margin-top: 40px; } .recognition-card, .recognition-card--1, .recognition-card--2, .recognition-card--3, .recognition-card--4, .recognition-card--5, .recognition-card--6 { grid-area: auto; min-height: 160px; } .recognition-card--1 { min-height: 230px; } .recognition-card--1 p { font-size: 24px; } .orientation-panel { padding: 20px; } .orientation-option:hover { transform: none; } .care-mosaic-section { padding: 84px 16px; } .care-mosaic { grid-template-rows: repeat(8, 78px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .care-shape { border-radius: var(--radius-lg); } .care-shape--1 { grid-area: 1 / 1 / span 3 / span 1; } .care-shape--2 { grid-area: 1 / 2 / span 2 / span 1; } .care-shape--3 { grid-area: 1 / 3 / span 3 / span 1; } .care-shape--4 { grid-area: 1 / 4 / span 2 / span 1; } .care-shape--5 { grid-area: 3 / 2 / span 2 / span 1; } .care-shape--6 { grid-area: 3 / 4 / span 3 / span 1; } .care-shape--7 { grid-area: 4 / 1 / span 2 / span 1; } .care-shape--8 { grid-area: 4 / 3 / span 2 / span 1; } .care-mosaic__copy { grid-area: 6 / 1 / span 3 / span 4; padding: 24px 4px 0; } .care-mosaic__copy > p:last-child { font-size: 16px; } .help-list { margin-top: 44px; } .help-item { grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 14px; padding: 24px 0; } .help-item h3 { font-size: 21px; } .help-item p { grid-column: 2 / -1; } .help-item > svg { width: 20px; height: 20px; } .process-list { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .process-list li { min-height: 230px; } .process-list:not(.process-route) h3 { margin-top: 52px; } .expert-visual { min-height: 470px; } .conditions-layout dl div { grid-template-columns: minmax(110px, .65fr) minmax(0, 1.35fr); } .safety-note-section { padding-bottom: 84px; } .faq-list summary { min-height: 70px; font-size: 17px; } .lead-form, .lead-form-success { padding: 22px; } .landing-footer__themes { grid-template-columns: minmax(0, 1fr); } .landing-footer__bottom { flex-direction: column; gap: 8px; } } @media (max-width: 430px) { .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner { padding-left: 10px; } .landing-brand img { width: 78px; } .landing-segment__compact { width: 44px; height: 44px; } .landing-header__cta { min-width: 76px; padding-inline: 10px; } .landing-header__cta svg { display: none; } .landing-hero { padding-top: 124px; } .landing-hero__eyebrow { margin-bottom: 18px; } .orientation-option { grid-template-columns: 40px minmax(0, 1fr); padding-left: 6px; } .orientation-option__indicator { width: 40px; height: 40px; } .conditions-layout dl div { grid-template-columns: minmax(0, 1fr); gap: 8px; } .safety-note { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 350px) { .landing-brand img { width: 68px; } .landing-header__actions { gap: 4px; } .landing-header__cta { min-width: 68px; padding-inline: 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, :before, :after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .media-marquee__viewport { scroll-snap-type: x proximity; scrollbar-width: thin; width: 100%; padding: 0 16px 18px; overflow-x: auto; } .media-marquee__track { animation: none; } .media-marquee__track:nth-child(2) { display: none; } .shape-tile { scroll-snap-align: start; } .shape-tile:nth-child(2n), .shape-tile:nth-child(3n) { transform: none; } } :root, :root[data-theme="light"] { --app-font-family-base: var(--font-sans); --app-brand-gradient: var(--pearl-gradient); --app-brand-gradient-foreground: #211e24; --accent-foreground: #fff; --accent-soft-hover: #e6dce5; --accent-soft-foreground: #624d62; --default: var(--surface-hover); --default-hover: var(--surface-active); --default-foreground: var(--text); --default-soft: #f1efec; --default-soft-hover: #e8e5e1; --default-soft-foreground: var(--text-secondary); --background: var(--canvas); --background-secondary: var(--surface-muted); --background-tertiary: var(--surface-hover); --background-inverse: var(--text); --foreground: var(--text); --muted: var(--text-muted); --surface-foreground: var(--text); --surface-secondary: var(--surface-muted); --surface-secondary-foreground: var(--text); --surface-tertiary: var(--surface-hover); --surface-tertiary-foreground: var(--text); --overlay: var(--surface); --overlay-foreground: var(--text); --backdrop: #25232970; --border-secondary: var(--border-strong); --border-tertiary: var(--border-strong); } @supports (color: color-mix(in lab, red, red)) { :root, :root[data-theme="light"] { --border-tertiary: color-mix(in srgb, var(--border-strong) 78%, var(--text)); } } :root, :root[data-theme="light"] { --separator: var(--border); --field-background: var(--surface-muted); --field-foreground: var(--text); --field-placeholder: var(--text-muted); --field-border: var(--border-strong); --field-hover: #f7f4f1; --field-focus: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, :root[data-theme="light"] { --field-focus: color-mix(in srgb, var(--surface) 94%, var(--focus) 6%); } } :root, :root[data-theme="light"] { --field-border-hover: var(--border-strong); } @supports (color: color-mix(in lab, red, red)) { :root, :root[data-theme="light"] { --field-border-hover: color-mix(in srgb, var(--border-strong) 80%, var(--text)); } } :root, :root[data-theme="light"] { --field-border-focus: var(--focus); --field-shadow: 0 0 #0000; --segment: var(--surface); --segment-foreground: var(--text); --color-background: var(--background); --color-foreground: var(--foreground); --color-foreground-muted: var(--muted); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-foreground: var(--accent-foreground); --color-accent-soft: var(--accent-soft); --color-accent-soft-hover: var(--accent-soft-hover); --color-accent-soft-foreground: var(--accent-soft-foreground); --color-default: var(--default); --color-default-hover: var(--default-hover); --color-default-foreground: var(--default-foreground); --color-default-soft: var(--default-soft); --color-default-soft-hover: var(--default-soft-hover); --color-default-soft-foreground: var(--default-soft-foreground); --color-surface: var(--surface); --color-surface-secondary: var(--surface-secondary); --color-surface-tertiary: var(--surface-tertiary); --color-overlay: var(--overlay); --color-backdrop: var(--backdrop); --color-border: var(--border); --color-border-secondary: var(--border-secondary); --color-border-tertiary: var(--border-tertiary); --color-separator: var(--separator); --color-focus: var(--focus); --color-link: var(--link); --color-field-background: var(--field-background); --color-field-foreground: var(--field-foreground); --color-field-placeholder: var(--field-placeholder); --color-field-border: var(--field-border); --ease-shell: cubic-bezier(.2, .8, .2, 1); --motion-header: .42s; } :root[data-theme="dark"] { --accent-foreground: #211e24; --accent-soft-hover: #3c323d; --accent-soft-foreground: var(--accent); --default: var(--surface-hover); --default-hover: var(--surface-active); --default-foreground: var(--text); --default-soft: #d8d1d514; --default-soft-hover: #d8d1d51f; --default-soft-foreground: var(--text-secondary); --background: var(--canvas); --background-secondary: var(--surface-muted); --background-tertiary: var(--surface); --background-inverse: var(--text); --foreground: var(--text); --muted: var(--text-muted); --surface-foreground: var(--text); --surface-secondary: var(--surface-hover); --surface-secondary-foreground: var(--text); --surface-tertiary: var(--surface-active); --surface-tertiary-foreground: var(--text); --overlay: var(--surface); --overlay-foreground: var(--text); --backdrop: #0c0a0fad; --border-secondary: var(--border-strong); --border-tertiary: var(--border-strong); } @supports (color: color-mix(in lab, red, red)) { :root[data-theme="dark"] { --border-tertiary: color-mix(in srgb, var(--border-strong) 78%, var(--text)); } } :root[data-theme="dark"] { --separator: var(--border); --field-background: var(--surface); --field-foreground: var(--text); --field-placeholder: var(--text-muted); --field-border: var(--border-strong); --field-hover: var(--surface-hover); --field-focus: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root[data-theme="dark"] { --field-focus: color-mix(in srgb, var(--surface) 94%, var(--focus) 6%); } } :root[data-theme="dark"] { --field-border-hover: var(--border-strong); } @supports (color: color-mix(in lab, red, red)) { :root[data-theme="dark"] { --field-border-hover: color-mix(in srgb, var(--border-strong) 80%, var(--text)); } } :root[data-theme="dark"] { --field-border-focus: var(--focus); } .landing-hero__eyebrow, .section-kicker { letter-spacing: -.005em; text-transform: none; margin-bottom: 18px; font-size: 15px; font-weight: 560; line-height: 1.35; } .landing-header { transition: top var(--motion-header) var(--ease-shell), width var(--motion-header) var(--ease-shell), max-width var(--motion-header) var(--ease-shell), transform var(--motion-header) var(--ease-shell); } .landing-segment { width: 94px; height: 44px; transition: width var(--motion-header) var(--ease-shell); position: relative; } .landing-header[data-compact="true"] .landing-segment { width: 44px; } .landing-segment__expanded, .landing-segment__compact { transition: opacity .26s var(--ease-shell), transform var(--motion-header) var(--ease-shell), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; position: absolute; inset: 0; } .landing-segment__expanded { opacity: 1; transform-origin: center; display: grid; transform: scale(1); } .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__expanded { opacity: 0; pointer-events: none; display: grid; transform: scale(.86); } .landing-header__cta, .landing-primary-button { background-image: var(--app-brand-gradient); color: var(--app-brand-gradient-foreground); } .landing-hero h1 { letter-spacing: -.052em; font-size: clamp(52px, 6.1vw, 88px); line-height: .98; } .intro-layout { grid-template-columns: 64px minmax(320px, .95fr) minmax(360px, 1.05fr); } .orientation-panel { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); min-width: 0; box-shadow: var(--shadow-soft); gap: 0; margin: 0; padding: clamp(24px, 3vw, 36px); display: grid; } .orientation-question { width: 100%; min-width: 0; color: var(--text); letter-spacing: -.025em; text-wrap: balance; margin: 0 0 24px; font-size: clamp(22px, 2.1vw, 30px); font-weight: 590; line-height: 1.25; display: block; } .orientation-option { border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; min-width: 0; min-height: 0; color: var(--text); cursor: pointer; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); background: none; padding: 0; display: block; } .orientation-option[data-selected="true"] { border-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .orientation-option[data-selected="true"] { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); } } .orientation-option[data-selected="true"] { background: var(--accent-soft); } .orientation-option__content { grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 14px 16px; display: grid; } .orientation-option__control { border: 1px solid var(--border-strong); background: var(--surface); width: 22px; height: 22px; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; border-radius: 50%; place-items: center; display: grid; } .orientation-option__indicator { color: #0000; width: 8px; height: 8px; transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); background: currentColor; border-radius: 50%; transform: scale(0); } .orientation-option[data-selected="true"] .orientation-option__control { border-color: var(--text); background: var(--text); } .orientation-option[data-selected="true"] .orientation-option__indicator { color: var(--surface); transform: scale(1); } .orientation-option__text { overflow-wrap: break-word; min-width: 0; font-size: 16px; line-height: 1.42; } .orientation-result { min-width: 0; } .shape-tile, .care-shape, .expert-visual { transform: translateZ(0); } .shape-tile__figure { border: 1px solid #ffffff2e; overflow: hidden; box-shadow: inset 0 1px #ffffff2e; } .shape-tile__figure:before { content: ""; background: #ffffff3d; border-radius: 999px; height: 18%; position: absolute; inset: 10% 16% auto; } .shape-tile__detail, .care-shape:after { box-shadow: inset 0 1px #ffffff2e; } .faq-list, .faq-list__root { border-top: 1px solid var(--border-strong); min-width: 0; } .faq-list__item { border-bottom: 1px solid var(--border); } .faq-list__trigger { width: 100%; min-height: 76px; color: var(--text); text-align: left; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 20px; padding: 18px 0; font-size: 18px; font-weight: 570; line-height: 1.35; display: grid; } .faq-list__question { min-width: 0; } .faq-list__icon { width: 32px; height: 32px; color: var(--text-muted); place-items: center; display: grid; } .faq-list__panel { overflow: hidden; } .faq-list__body { padding: 0; } .faq-list__answer p { max-width: 650px; color: var(--text-secondary); margin: -4px 0 24px; padding-right: 46px; font-size: 16px; line-height: 1.58; } .lead-field__label, .lead-field label { color: var(--text-secondary); font-size: 14px; font-weight: 560; line-height: 1.35; } .lead-field .input-group { border-color: var(--field-border); border-radius: var(--radius-lg); background: var(--field-background); width: 100%; min-height: 54px; } .lead-field .input-group:focus-within { border-color: var(--field-border-focus); background: var(--field-focus); box-shadow: 0 0 #0000; } .lead-field input, .lead-field textarea { color: var(--field-foreground); } .lead-consent { color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1.48; display: block; position: relative; } .lead-consent__content { grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; display: grid; } .lead-consent__control { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); width: 22px; height: 22px; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; place-items: center; display: grid; } .lead-consent__indicator { color: #0000; width: 14px; height: 14px; transition: color var(--motion-fast) ease; } .lead-consent[data-selected="true"] .lead-consent__control { border-color: var(--text); background: var(--text); } .lead-consent[data-selected="true"] .lead-consent__indicator { color: var(--surface); } @media (max-width: 760px) { .landing-segment { width: 44px; } .landing-segment__expanded, .landing-header[data-compact="true"] .landing-segment__expanded { display: none !important; } .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact { opacity: 1; pointer-events: auto; position: static; transform: none; } .landing-hero h1 { letter-spacing: -.045em; font-size: clamp(38px, 10.2vw, 58px); line-height: 1; } .intro-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .section-heading > p:last-child, .intro-layout > p:last-child, .lead-form-copy > p:not(.section-kicker), .expert-copy__lead { font-size: 16px; line-height: 1.55; } .recognition-card--1 p { padding-right: 0; font-size: 22px; line-height: 1.28; } .orientation-question { text-wrap: pretty; font-size: 22px; line-height: 1.28; } .orientation-option:hover { transform: none; } .orientation-option__content { min-height: 58px; padding: 12px 14px; } .faq-list__trigger { min-height: 70px; font-size: 17px; } .faq-list__answer p { padding-right: 0; } } @media (max-width: 430px) { .landing-hero__eyebrow, .section-kicker { font-size: 14px; } .orientation-option__content { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-inline: 12px; } .orientation-option__control { width: 20px; height: 20px; } } :root { --motion-shell: .42s; --motion-slow: .56s; --ease-shell: cubic-bezier(.16, 1, .3, 1); --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; } .landing-header { will-change: top, width, max-width, transform; transition: top var(--motion-shell) var(--ease-shell), width var(--motion-shell) var(--ease-shell), max-width var(--motion-shell) var(--ease-shell), transform var(--motion-shell) var(--ease-shell); } .landing-header__inner { transition: height var(--motion-shell) var(--ease-shell), padding var(--motion-shell) var(--ease-shell), border-radius var(--motion-shell) var(--ease-shell), box-shadow var(--motion-shell) var(--ease-shell), background-color var(--motion-shell) ease; } .landing-segment { block-size: 44px; inline-size: 94px; transition: inline-size var(--motion-shell) var(--ease-shell); position: relative; } .landing-segment__expanded, .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__expanded, .landing-header[data-compact="true"] .landing-segment__compact { display: grid !important; } .landing-segment__expanded, .landing-segment__compact { transform-origin: center; transition: opacity .28s ease, transform var(--motion-shell) var(--ease-shell), border-color var(--motion-base) ease, background-color var(--motion-base) ease, box-shadow var(--motion-base) ease; position: absolute; inset: 0; } .landing-segment__expanded { opacity: 1; pointer-events: auto; transform: scale(1); } .landing-segment__compact { opacity: 0; pointer-events: none; block-size: 44px; inline-size: 44px; transform: scale(.84); } .landing-header[data-compact="true"] .landing-segment { inline-size: 44px; } .landing-header[data-compact="true"] .landing-segment__expanded { opacity: 0; pointer-events: none; transform: scale(.86); } .landing-header[data-compact="true"] .landing-segment__compact { opacity: 1; pointer-events: auto; transform: scale(1); } .landing-hero__eyebrow, .section-kicker { color: var(--text-muted); letter-spacing: 0; text-transform: none; text-wrap: balance; font-size: 14px; font-weight: 560; line-height: 1.45; } .landing-hero h1 { text-wrap: balance; } .section-heading > p:last-child, .intro-layout > p:last-child, .mechanism-layout__copy p, .expert-copy__lead, .lead-form-copy > p:not(.section-kicker), .care-mosaic__copy > p:last-child { text-wrap: pretty; } .recognition-card p, .help-item p, .process-list p, .conditions-layout dd, .safety-note p, .landing-footer__themes a { overflow-wrap: break-word; text-wrap: pretty; min-width: 0; } .orientation-panel { gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); min-width: 0; box-shadow: var(--shadow-soft); margin: 0; padding: clamp(24px, 3vw, 36px); display: grid; } .orientation-question { max-width: 100%; color: var(--text); letter-spacing: -.025em; overflow-wrap: break-word; text-wrap: balance; margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 590; line-height: 1.24; display: block; } .orientation-options { gap: var(--space-2); min-width: 0; display: grid; } .orientation-option { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); width: 100%; min-width: 0; color: var(--text-secondary); transition: border-color var(--motion-base) ease, background-color var(--motion-base) ease, color var(--motion-base) ease, transform var(--motion-base) var(--ease-shell); padding: 0; display: block; } .orientation-option:hover { border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-1px); } .orientation-option[data-selected="true"], .orientation-option[aria-checked="true"] { border-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .orientation-option[data-selected="true"], .orientation-option[aria-checked="true"] { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); } } .orientation-option[data-selected="true"], .orientation-option[aria-checked="true"] { background: var(--accent-soft); color: var(--text); } .orientation-option__content { gap: var(--space-3); grid-template-columns: 24px minmax(0, 1fr); align-items: center; min-height: 64px; padding: 12px 16px; display: grid; } .orientation-option__control { place-items: center; block-size: 22px; inline-size: 22px; margin: 0; display: grid; } .orientation-option__text { min-width: 0; color: inherit; overflow-wrap: break-word; text-wrap: pretty; font-size: 16px; font-weight: 520; line-height: 1.38; } .orientation-result { min-height: auto; padding-top: var(--space-5); border-top: 1px solid var(--border); margin-top: 0; } .orientation-result p { overflow-wrap: break-word; text-wrap: pretty; max-width: 100%; } .lead-form { gap: var(--space-5); } .lead-field { gap: var(--space-2); min-width: 0; display: grid; } .lead-field > div { min-height: auto; } .lead-field label, .lead-field__label { color: var(--text-secondary); font-size: 14px; font-weight: 560; line-height: 1.35; } .lead-field input, .lead-field textarea { font-size: max(16px, 1rem); } .lead-field textarea { resize: vertical; min-height: 118px; } .lead-consent { min-width: 0; color: var(--text-muted); } .lead-consent__content { gap: var(--space-3); grid-template-columns: 24px minmax(0, 1fr); align-items: start; font-size: 13px; line-height: 1.48; display: grid; } .lead-consent__content span:last-child { overflow-wrap: break-word; min-width: 0; } .shape-tile, .care-shape, .expert-visual { box-shadow: inset 0 1px #ffffff2e; } .shape-tile__figure { background: radial-gradient(circle at 50% 13%, var(--scene-ink) 0 9%, transparent 9.5%), linear-gradient(160deg, var(--scene-ink), var(--scene-a)); border-radius: 999px 999px 22px 22px; width: 56%; height: 70%; bottom: -8%; left: 50%; } @supports (color: color-mix(in lab, red, red)) { .shape-tile__figure { background: radial-gradient(circle at 50% 13%, color-mix(in srgb, var(--scene-ink) 96%, black) 0 9%, transparent 9.5%), linear-gradient(160deg, color-mix(in srgb, var(--scene-ink) 86%, black), color-mix(in srgb, var(--scene-a) 48%, var(--scene-ink))); } } .shape-tile__figure { opacity: .86; transform: translateX(-50%) rotate(-2deg); } .shape-tile__detail { border-radius: var(--radius-pill); background: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .shape-tile__detail { background: color-mix(in srgb, var(--surface) 62%, transparent); } } .shape-tile--2 .shape-tile__figure, .shape-tile--5 .shape-tile__figure, .shape-tile--7 .shape-tile__figure { opacity: .72; left: auto; transform: none; } .shape-tile--3 .shape-tile__figure { background: radial-gradient(circle at 50% 50%, #ffffff5c 0 20%, transparent 20.5%), var(--scene-ink); border-radius: 999px; width: auto; height: 56%; inset: 18% 14% auto; } @supports (color: color-mix(in lab, red, red)) { .shape-tile--3 .shape-tile__figure { background: radial-gradient(circle at 50% 50%, #ffffff5c 0 20%, transparent 20.5%), color-mix(in srgb, var(--scene-ink) 46%, transparent); } } .shape-tile--3 .shape-tile__figure { transform: rotate(4deg); } .care-shape:before { opacity: .72; border-radius: 999px 999px 18px 18px; width: 68%; } .care-shape:after { border-radius: var(--radius-pill); width: 42%; height: 12%; } @media (max-width: 760px) { .landing-segment { inline-size: 44px; } .landing-segment__expanded { opacity: 0; pointer-events: none; transform: scale(.86); } .landing-segment__compact { opacity: 1; pointer-events: auto; transform: scale(1); } .landing-hero__eyebrow, .section-kicker { font-size: 13px; line-height: 1.42; } .landing-hero h1 { letter-spacing: -.052em; max-width: 100%; margin-inline: auto; font-size: clamp(42px, 11.5vw, 56px); line-height: .98; } .landing-hero__lead, .landing-hero__privacy { max-width: 34ch; margin-inline: auto; } .orientation-panel { gap: var(--space-4); padding: var(--space-5); } .orientation-question { font-size: clamp(22px, 6vw, 28px); line-height: 1.18; } .orientation-option:hover { transform: none; } .orientation-option__content { grid-template-columns: 24px minmax(0, 1fr); min-height: 60px; padding: 12px 14px; } .shape-tile:nth-child(2n), .shape-tile:nth-child(3n) { transform: none; } .lead-consent__content { line-height: 1.5; } } @media (max-width: 430px) { .landing-hero h1 { letter-spacing: -.048em; max-width: 100%; font-size: clamp(38px, 10.8vw, 44px); line-height: 1; } .orientation-panel { padding: 18px; } .orientation-option__content { padding-inline: 12px; } .orientation-option__text { font-size: 15px; line-height: 1.38; } } @media (prefers-reduced-motion: reduce) { .landing-header, .landing-header__inner, .landing-segment, .landing-segment__expanded, .landing-segment__compact { transition-duration: .01ms !important; } } .page-section.editorial-conditions { background-color: var(--canvas); padding-bottom: clamp(44px, 5vw, 72px); } .editorial-conditions__layout, .editorial-faq__layout { min-width: 0; } .editorial-conditions__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "intro details" "intro note" "safety safety"; gap: clamp(20px, 2vw, 32px) clamp(40px, 7vw, 96px); display: grid; } .editorial-conditions__intro { grid-area: intro; grid-template-rows: auto minmax(0, 1fr); gap: clamp(24px, 2vw, 32px); min-width: 0; display: grid; } .editorial-conditions__intro > .section-heading { align-self: start; } .editorial-conditions__media { border-radius: var(--radius-lg); background: var(--surface-muted); min-height: clamp(260px, 25vw, 388px); overflow: hidden; } .editorial-conditions__media img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block; } .editorial-conditions__details { grid-area: details; } .editorial-conditions__details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); margin: 0; display: grid; } .editorial-conditions__details dl > div { background-color: var(--surface-muted); border-radius: var(--radius-lg); min-width: 0; padding: clamp(22px, 3vw, 32px); } .editorial-conditions__details dt { color: var(--text-muted); margin-bottom: .7rem; font-size: .875rem; line-height: 1.35; } .editorial-conditions__details dd { color: var(--text); margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.35; } .editorial-conditions__note { background-color: var(--scene-soft); border-radius: var(--radius-lg); grid-area: note; padding: clamp(20px, 2.4vw, 28px); } .editorial-conditions__note p { max-width: 54rem; margin: 0; } .editorial-conditions__safety { grid-area: safety; } .editorial-faq__layout { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(48px, 8vw, 112px); display: grid; } .editorial-faq__aside { gap: 24px; min-width: 0; display: grid; } .editorial-faq__aside > .section-heading { margin: 0; } .editorial-faq__aside > p { max-width: 31rem; margin: 0; } .editorial-faq__aside > button { justify-self: start; } .editorial-faq__accordion { min-width: 0; } @media (max-width: 960px) { .editorial-conditions__layout, .editorial-faq__layout { grid-template-columns: 1fr; } .editorial-conditions__layout { grid-template-areas: "intro" "details" "note" "safety"; } .editorial-conditions__note { grid-column: auto; } .editorial-conditions__media { aspect-ratio: 16 / 10; min-height: 0; } } @media (min-width: 961px) { .editorial-faq__aside { position: sticky; top: 120px; } } @media (max-width: 720px) { .editorial-conditions__details dl { grid-template-columns: 1fr; } } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false } @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .5; } } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } @keyframes skeleton { 100% { transform: translateX(200%); } } /* * Theraphea landing polish. * The values below mirror the canonical HeroUI / project UI Kit scale: * Inter Tight, a 4px spacing grid, fixed type roles, 6/8/12/18 radii, * and the project motion curves. */ :root { --app-type-caption-size: 0.75rem; --app-type-meta-size: 0.8125rem; --app-type-body-sm-size: 0.875rem; --app-type-body-size: 1rem; --app-type-lead-size: 1.125rem; --app-type-heading-4-size: 1.25rem; --app-type-heading-3-size: 1.5rem; --app-type-heading-2-size: 1.875rem; --app-type-heading-1-size: 2.25rem; --app-type-display-size: 3rem; --app-type-caption-line-height: 1.333; --app-type-meta-line-height: 1.385; --app-type-body-sm-line-height: 1.5; --app-type-body-line-height: 1.55; --app-type-lead-line-height: 1.5; --app-type-heading-line-height: 1.111; --app-type-weight-normal: 400; --app-type-weight-medium: 500; --app-type-weight-semibold: 600; --app-type-weight-bold: 700; --app-space-1: 4px; --app-space-2: 8px; --app-space-3: 12px; --app-space-4: 16px; --app-space-5: 20px; --app-space-6: 24px; --app-space-7: 28px; --app-space-8: 32px; --app-space-10: 40px; --app-space-12: 48px; --app-space-16: 64px; --app-radius-xs: 6px; --app-radius-sm: 8px; --app-radius-md: 12px; --app-radius-lg: 18px; --app-radius-full: 999px; --app-icon-size-sm: 1rem; --app-icon-size-md: 1.25rem; --app-icon-size-lg: 1.5rem; --app-icon-stroke: 1.8; --app-ease-standard: cubic-bezier(0.2, 0, 0, 1); --app-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --app-duration-hover: 160ms; --app-duration-enter: 220ms; --app-duration-highlight: 260ms; --app-duration-panel: 280ms; --landing-section-y: calc(var(--app-space-16) + var(--app-space-8)); } .landing-page { font-family: var(--app-font-family-base); } .landing-page, .landing-page * { min-width: 0; } .landing-page svg { flex: 0 0 auto; stroke-width: var(--app-icon-stroke); } .page-shell { width: min(100% - 48px, 1200px); } .page-section { padding-block: var(--landing-section-y); } .section-kicker, .landing-hero__eyebrow { margin: 0 0 var(--app-space-4); text-transform: none !important; letter-spacing: -0.01em !important; } .section-heading { max-width: 720px; } .section-heading > div[data-align="center"] { margin-inline: auto; text-align: center; } .section-heading > div[data-align="center"] > p:last-child { margin-inline: auto; } .section-heading > div > p:last-child, .orientation-layout > div:first-child > p:last-child, .mechanism-layout__copy p, .care-mosaic__copy > p:last-child, .expert-copy__lead, .lead-form-copy > p { max-width: 62ch; margin: var(--app-space-5) 0 0; font-size: var(--app-type-body-size) !important; line-height: var(--app-type-body-line-height) !important; } /* Header: the full controls smoothly cross-fade into the compact circles. */ .landing-header { top: max(var(--app-space-4), env(safe-area-inset-top)); max-width: 1440px; transition: top 520ms var(--app-ease-emphasized), max-width 520ms var(--app-ease-emphasized), width 520ms var(--app-ease-emphasized); will-change: max-width, top; } .landing-header[data-compact="true"] { top: max(var(--app-space-3), env(safe-area-inset-top)); max-width: 900px; } .landing-header__inner { height: 72px; padding: var(--app-space-2) var(--app-space-3) var(--app-space-2) var(--app-space-6); border-radius: 24px; transition: height 520ms var(--app-ease-emphasized), padding 520ms var(--app-ease-emphasized), border-radius 520ms var(--app-ease-emphasized), box-shadow 520ms var(--app-ease-emphasized); } .landing-header[data-compact="true"] .landing-header__inner { height: 60px; padding: var(--app-space-2) var(--app-space-2) var(--app-space-2) var(--app-space-5); border-radius: var(--app-radius-lg); } .landing-header__nav { transition: opacity 300ms var(--app-ease-standard), transform 420ms var(--app-ease-emphasized); } .landing-header[data-compact="true"] .landing-header__nav { opacity: 0; pointer-events: none; transform: translateY(-4px); } .landing-segment { display: grid; flex: none; } .landing-segment__expanded, .landing-segment__compact { grid-area: 1 / 1; transition: opacity 260ms var(--app-ease-standard), transform 420ms var(--app-ease-emphasized), visibility 0s linear 260ms; } .landing-segment__expanded { display: grid !important; opacity: 1; visibility: visible; transform: scale(1); } .landing-segment__compact { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.82); } .landing-header[data-compact="true"] .landing-segment__expanded { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.86); } .landing-header[data-compact="true"] .landing-segment__compact { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition-delay: 80ms, 0ms, 0ms; } .landing-header__cta, .landing-primary-button, .landing-secondary-button { transition: transform var(--app-duration-hover) var(--app-ease-standard), box-shadow var(--app-duration-hover) var(--app-ease-standard), background-color var(--app-duration-hover) var(--app-ease-standard), border-color var(--app-duration-hover) var(--app-ease-standard); } /* HeroUI typography roles replace the former viewport-driven type scale. */ .landing-hero { min-height: min(860px, 100svh); padding: calc(var(--app-space-16) + var(--app-space-12)) var(--app-space-6) var(--app-space-16); } .landing-hero__copy { width: min(100%, 860px); } .landing-hero__copy h1 { max-width: 17ch; margin: 0; font-size: var(--app-type-display-size) !important; font-weight: var(--app-type-weight-semibold) !important; line-height: 1.04 !important; letter-spacing: -0.05em !important; text-wrap: balance; } .landing-hero__lead { max-width: 58ch; margin-top: var(--app-space-6); font-size: var(--app-type-lead-size) !important; line-height: var(--app-type-lead-line-height) !important; } .landing-hero__actions { gap: var(--app-space-3); margin-top: var(--app-space-8); } .landing-hero__privacy { gap: var(--app-space-2); margin-top: var(--app-space-4); font-size: var(--app-type-body-sm-size) !important; line-height: var(--app-type-body-sm-line-height) !important; } .landing-hero__privacy svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); } /* Visual placeholders keep stable photo ratios without custom SVG drawings. */ .media-marquee { padding-block: var(--app-space-8) var(--app-space-16); } .media-marquee__viewport { padding-block: var(--app-space-5); margin-block: calc(var(--app-space-5) * -1); } .media-marquee__track { gap: var(--app-space-4); padding-right: var(--app-space-4); } .shape-tile { width: 260px; height: 396px; border-radius: var(--app-radius-lg); } .shape-tile:nth-child(3n + 2) { width: 312px; } .shape-tile:nth-child(4n) { width: 224px; } .expert-visual__portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .intro-layout { grid-template-columns: 48px minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--app-space-8); } .intro-layout > p { max-width: 58ch; font-size: var(--app-type-body-size) !important; line-height: var(--app-type-body-line-height) !important; } .intro-layout__index { font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } /* Recognition bento: calmer type and a strict 4px rhythm. */ .recognition-grid { gap: var(--app-space-3); margin-top: var(--app-space-12); } .recognition-card { gap: var(--app-space-8); min-height: 208px; padding: var(--app-space-6); border-radius: var(--app-radius-lg); } .recognition-card__number { font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .recognition-card p { max-width: 32ch; font-size: var(--app-type-body-size) !important; line-height: var(--app-type-body-line-height) !important; } /* First question: canonical HeroUI RadioGroup/Radio, no fieldset overflow. */ .orientation-layout { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--app-space-16); } .orientation-layout > div:first-child { min-width: 0; } .orientation-panel { width: 100%; min-width: 0; overflow: hidden; padding: var(--app-space-6); border: 1px solid var(--border); border-radius: var(--app-radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); } .orientation-panel [data-slot="radio-group"] { width: 100%; min-width: 0; } .orientation-panel__question { display: block; max-width: 28ch; margin: 0 0 var(--app-space-6); color: var(--text); font-size: var(--app-type-heading-3-size); font-weight: var(--app-type-weight-semibold); line-height: var(--app-type-heading-line-height); letter-spacing: -0.025em; text-wrap: balance; } .orientation-options { display: grid; gap: var(--app-space-2); width: 100%; } .orientation-option { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: var(--app-radius-md); background: transparent; transform: none; } .orientation-option__content { display: flex; gap: var(--app-space-3); align-items: center; width: 100%; min-height: 56px; padding: var(--app-space-3) var(--app-space-4); border: 1px solid var(--border); border-radius: var(--app-radius-md); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--app-type-body-size); line-height: var(--app-type-body-line-height); text-align: left; transition: border-color var(--app-duration-hover) var(--app-ease-standard), background-color var(--app-duration-hover) var(--app-ease-standard), transform var(--app-duration-hover) var(--app-ease-standard); } .orientation-option__content:hover { border-color: var(--border-strong); background: var(--surface-hover); } .orientation-option[data-selected] .orientation-option__content { border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); background: var(--accent-soft); color: var(--text); } .orientation-option__control { flex: 0 0 auto; } .orientation-result { min-height: 0; margin-top: var(--app-space-5); padding-top: var(--app-space-5); } .orientation-result p { max-width: 56ch; font-size: var(--app-type-body-sm-size) !important; line-height: var(--app-type-body-sm-line-height) !important; } .orientation-result__empty { display: flex; gap: var(--app-space-2); align-items: flex-start; } .orientation-result__empty svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); margin-top: 2px; } /* Content sections. */ .mechanism-layout, .expert-layout, .lead-form-layout, .conditions-layout, .faq-layout { gap: var(--app-space-16); } .mechanism-layout__copy { gap: var(--app-space-5); } .care-mosaic { min-height: 760px; } .care-mosaic__copy { width: min(100%, 720px); padding-inline: var(--app-space-6); } .care-shape { overflow: hidden; border-radius: var(--app-radius-lg); } .help-list { gap: 0; margin-top: var(--app-space-12); } .help-item { grid-template-columns: 48px minmax(180px, 0.72fr) minmax(0, 1.28fr) 24px; gap: var(--app-space-6); padding-block: var(--app-space-6); padding-inline: var(--app-space-4); } .help-item h3, .process-list:not(.process-route) h3 { font-size: var(--app-type-heading-3-size) !important; font-weight: var(--app-type-weight-semibold) !important; line-height: var(--app-type-heading-line-height) !important; letter-spacing: -0.025em !important; } .help-item p, .process-list:not(.process-route) p { font-size: var(--app-type-body-size) !important; line-height: var(--app-type-body-line-height) !important; } .help-item > svg { width: var(--app-icon-size-md); height: var(--app-icon-size-md); } .process-list { gap: var(--app-space-3); margin-top: var(--app-space-12); } .process-list li { padding: var(--app-space-6); border-radius: var(--app-radius-lg); } .expert-copy ul { gap: var(--app-space-3); margin-top: var(--app-space-8); } .expert-copy li { gap: var(--app-space-3); padding-block: var(--app-space-3); font-size: var(--app-type-body-size); line-height: var(--app-type-body-line-height); } .expert-copy li svg { width: var(--app-icon-size-md); height: var(--app-icon-size-md); } .testimonials-section { overflow: hidden; background: var(--surface-muted); } .testimonials-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--app-space-8); align-items: end; } .testimonials-heading-row .section-heading { max-width: 760px; } .testimonials-motion-control { align-self: end; margin-bottom: var(--app-space-1); } .testimonials-motion-control svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); } .testimonial-archive { margin-top: var(--app-space-10); } .testimonial-archive__summary { display: flex; justify-content: space-between; align-items: center; gap: var(--app-space-5); margin-bottom: var(--app-space-5); } .testimonial-archive__summary p { margin: 0; } .testimonial-archive__stepper { display: inline-flex; gap: var(--app-space-2); } .testimonial-archive__step svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); } .testimonial-archive__stage { display: grid; grid-template-columns: minmax(0, 0.76fr) minmax(420px, 1fr) minmax(0, 0.76fr); gap: var(--app-space-4); align-items: stretch; } .testimonial-archive__rail { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--app-space-4); min-width: 0; } .testimonial-archive__rail .testimonial-card:nth-child(n + 3) { display: none; } .testimonial-marquee { width: 100%; margin-top: var(--app-space-8); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .testimonial-marquee__viewport { display: flex; width: 100%; padding-block: var(--app-space-2) var(--app-space-5); overflow: hidden; outline: none; } .testimonial-marquee__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); } .testimonial-marquee__track { display: flex; flex: none; align-items: stretch; gap: var(--app-space-3); min-width: max-content; padding-inline-end: var(--app-space-3); transform: translate3d(-100%, 0, 0); animation: testimonial-marquee-right 110s linear infinite; will-change: transform; } .testimonial-marquee__viewport[data-running='false'] .testimonial-marquee__track, .testimonial-marquee__viewport:hover .testimonial-marquee__track, .testimonial-marquee__viewport:focus-within .testimonial-marquee__track { animation-play-state: paused; } .testimonial-card { display: flex; flex-direction: column; min-width: 0; gap: var(--app-space-5); padding: var(--app-space-5); overflow: hidden; border: 1px solid var(--border); border-radius: var(--app-radius-lg); color: var(--text); background: var(--surface); box-shadow: none; transition: border-color var(--app-duration-highlight) var(--app-ease-standard), background-color var(--app-duration-highlight) var(--app-ease-standard), transform 420ms var(--app-ease-emphasized); } .testimonial-card[data-variant='center'] { min-height: 520px; padding: var(--app-space-7); } .testimonial-card[data-variant='rail'] { min-height: 228px; } .testimonial-card[data-variant='marquee'] { flex: none; width: 320px; min-height: 250px; } .testimonial-card[data-variant='marquee'][data-length='short'] { width: 280px; } .testimonial-card[data-variant='marquee'][data-length='long'] { width: 380px; } .testimonial-card[data-active='true'] { border-color: transparent; color: #f8f4f0; background: var(--scene-ink); } .testimonial-card__topline, .testimonial-card__footer { display: flex; align-items: center; } .testimonial-card__topline { justify-content: flex-start; gap: var(--app-space-3); } .testimonial-card__label { margin: 0; text-transform: none; letter-spacing: 0; } .testimonial-card blockquote { display: flex; flex: 1; align-items: center; margin: 0; } .testimonial-card h3 { margin: 0; overflow-wrap: break-word; font-size: var(--app-type-body-size) !important; font-weight: var(--app-type-weight-medium) !important; line-height: 1.38 !important; letter-spacing: 0 !important; } .testimonial-card__quote { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 12; color: inherit; font-size: 1.35rem !important; font-weight: var(--app-type-weight-medium) !important; line-height: 1.34 !important; letter-spacing: 0 !important; } .testimonial-card__footer { gap: var(--app-space-3); margin-top: auto; padding-top: var(--app-space-4); border-top: 1px solid var(--border); } .testimonial-card__avatar { display: inline-grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: var(--text-secondary); background: var(--surface-muted); } .testimonial-card__avatar svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); } .testimonial-card__byline { display: grid; min-width: 0; gap: 2px; } .testimonial-card__actions { display: inline-flex; flex: none; gap: var(--app-space-2); margin-left: auto; } .testimonial-card[data-variant='marquee'] .testimonial-card__actions { display: none; } .testimonial-card__meta, .testimonial-card__context { margin: 0; } .testimonial-card[data-active='true'] blockquote .typography, .testimonial-card[data-active='true'] .testimonial-card__meta { color: inherit !important; } .testimonial-card[data-active='true'] .testimonial-card__label, .testimonial-card[data-active='true'] .testimonial-card__context { color: rgb(248 244 240 / 68%) !important; } .testimonial-card[data-active='true'] .testimonial-card__footer { border-color: rgb(248 244 240 / 18%); } .testimonial-card[data-active='true'] .testimonial-card__avatar { color: #f8f4f0; background: rgb(248 244 240 / 12%); } .testimonial-photo-card { min-height: 228px; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--app-radius-lg); background: var(--surface); } .testimonial-photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; } .testimonial-detail-dialog { border: 1px solid var(--border-strong); background: var(--surface); } .testimonial-detail-dialog__close { position: absolute; top: var(--app-space-4); right: var(--app-space-4); } .testimonial-detail-dialog__header, .testimonial-detail-dialog__body { padding-inline: var(--app-space-7); } .testimonial-detail-dialog__body blockquote { margin: 0; } .testimonial-detail-dialog__body p { margin: 0; line-height: 1.65; } @keyframes testimonial-marquee-right { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* Project MotionAccordion, using HeroUI's compound Accordion API. */ .faq-layout { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } /* HeroUI form primitives: layout only; visual states remain library-owned. */ .lead-form-shell { min-width: 0; } .lead-form { gap: var(--app-space-5); padding: var(--app-space-8); border-radius: var(--app-radius-lg); } .lead-field { gap: var(--app-space-2); } .lead-field > [data-slot="label"], .lead-field > label { font-size: var(--app-type-body-sm-size); font-weight: var(--app-type-weight-medium); line-height: var(--app-type-body-sm-line-height); } .lead-consent { display: block; color: var(--text-muted); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .lead-consent__content { display: flex; gap: var(--app-space-3); align-items: flex-start; width: 100%; } .lead-consent__content [data-slot="checkbox-control"] { flex: 0 0 auto; margin-top: 1px; } .lead-form-trust { gap: var(--app-space-3); margin-top: var(--app-space-6); padding: var(--app-space-4); border-radius: var(--app-radius-md); } .lead-form-trust svg { width: var(--app-icon-size-md); height: var(--app-icon-size-md); } .lead-form-success > div { display: grid; gap: var(--app-space-4); } .lead-form-success h3 { margin: 0; font-size: var(--app-type-heading-3-size) !important; line-height: var(--app-type-heading-line-height) !important; } @media (max-width: 1080px) { :root { --landing-section-y: calc(var(--app-space-16) + var(--app-space-4)); } .landing-header { width: calc(100% - var(--app-space-6)); } .landing-header__nav { display: none; } .landing-header__inner { grid-template-columns: 1fr auto; } .orientation-layout, .mechanism-layout, .expert-layout, .lead-form-layout, .conditions-layout, .faq-layout { grid-template-columns: 1fr; gap: var(--app-space-12); } .orientation-layout > div:first-child, .mechanism-layout > div:first-child, .expert-copy, .lead-form-copy, .conditions-layout .section-heading, .faq-layout .section-heading { max-width: 720px; } .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .testimonial-card:first-child { grid-column: 1 / -1; } } @media (max-width: 760px) { :root { --landing-section-y: var(--app-space-16); } .page-shell { width: min(100% - var(--app-space-8), 1200px); } .page-section { scroll-margin-top: 80px; } .landing-header, .landing-header[data-compact="true"] { top: max(var(--app-space-2), env(safe-area-inset-top)); width: calc(100% - var(--app-space-4)); max-width: none; } .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner { height: 60px; padding: var(--app-space-2) var(--app-space-2) var(--app-space-2) var(--app-space-4); border-radius: var(--app-radius-lg); } .landing-header__actions { gap: var(--app-space-2); } .landing-segment__expanded { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.86); } .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); } .landing-header__cta { min-width: 44px; width: 44px; padding-inline: 0; } .landing-header__cta-full, .landing-header__cta-short { display: none !important; } .landing-hero { min-height: 720px; padding: calc(var(--app-space-16) + var(--app-space-12)) var(--app-space-4) var(--app-space-12); } .landing-hero__copy h1 { max-width: 15ch; font-size: var(--app-type-heading-1-size) !important; line-height: 1.06 !important; } .landing-hero__lead { margin-top: var(--app-space-5); font-size: var(--app-type-body-size) !important; line-height: var(--app-type-body-line-height) !important; } .landing-hero__actions { align-items: stretch; margin-top: var(--app-space-6); } .landing-hero__actions > * { width: 100%; } .shape-tile { width: 216px; height: 332px; } .shape-tile:nth-child(3n + 2) { width: 248px; } .shape-tile:nth-child(4n) { width: 192px; } .intro-layout { grid-template-columns: 32px minmax(0, 1fr); gap: var(--app-space-4); } .intro-layout > p { grid-column: 2; } .recognition-grid { grid-template-columns: 1fr; margin-top: var(--app-space-8); } .recognition-card { min-height: 0; padding: var(--app-space-5); } .orientation-layout { gap: var(--app-space-8); } .orientation-panel { padding: var(--app-space-4); } .orientation-panel__question { max-width: 24ch; margin-bottom: var(--app-space-5); font-size: var(--app-type-heading-4-size); line-height: 1.25; } .orientation-option__content { min-height: 56px; padding: var(--app-space-3); } .care-mosaic { min-height: 620px; } .care-mosaic__copy { padding-inline: var(--app-space-4); } .help-list, .process-list, .testimonials-grid { margin-top: var(--app-space-8); } .help-item { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: var(--app-space-4); } .help-item h3 { grid-column: 2; } .help-item p { grid-column: 2 / -1; } .help-item > svg { grid-column: 3; grid-row: 1 / span 2; } .process-list, .testimonials-grid { grid-template-columns: 1fr; } .testimonial-card:first-child { grid-column: auto; } .testimonial-card { min-height: 280px; padding: var(--app-space-6); } .lead-form { padding: var(--app-space-5); } } @media (max-width: 420px) { .landing-brand img { width: 108px; } .landing-header__actions { gap: var(--app-space-1); } .landing-segment__compact, .landing-header__cta { width: 42px; height: 42px; } .landing-hero { padding-inline: var(--app-space-4); } .orientation-panel, .lead-form, .testimonial-card { padding: var(--app-space-4); } .orientation-option__content { font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } } @media (prefers-reduced-motion: reduce) { .landing-header, .landing-header__inner, .landing-header__nav, .landing-segment__expanded, .landing-segment__compact { transition-duration: 0.01ms !important; } } /* Process route V3: connected route with phase labels, no numeric badges. */ .process-list.process-route { position: relative; display: flex; gap: 0; align-items: stretch; margin-top: var(--app-space-12); padding: 0; overflow: hidden; list-style: none; border-block: 1px solid var(--border); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 58%, transparent), color-mix(in srgb, var(--surface-muted) 28%, transparent) ); } .process-list.process-route::before { position: absolute; inset: 0 0 auto; z-index: 0; height: 1px; content: ''; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--accent) 46%, var(--border)), transparent ); opacity: 0.48; pointer-events: none; } .process-list.process-route > .process-route__step { position: relative; isolation: isolate; display: grid; flex: 1 1 0; grid-template-rows: auto 1fr; min-height: 292px; min-width: 0; padding: var(--app-space-6); overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: flex 560ms var(--app-ease-emphasized), background-color var(--app-duration-highlight) var(--app-ease-standard); } .process-list.process-route > .process-route__step::before { position: absolute; inset: 0; z-index: -1; content: ''; background: radial-gradient( circle at 22% 18%, color-mix(in srgb, var(--accent-soft) 80%, transparent), transparent 46% ), linear-gradient(135deg, color-mix(in srgb, var(--surface-hover) 78%, transparent), transparent 62%); opacity: 0; transform: translateY(var(--app-space-2)); transition: opacity 520ms var(--app-ease-standard), transform 560ms var(--app-ease-emphasized); } .process-list.process-route > .process-route__step + .process-route__step { border-inline-start: 1px solid var(--border); } .process-list.process-route > .process-route__step > .process-route__marker { display: grid; grid-template-columns: auto minmax(var(--app-space-8), 1fr) var(--app-icon-size-md); gap: var(--app-space-3); align-items: center; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0; color: var(--text-muted); background: transparent; font-size: inherit; font-weight: inherit; } .process-route__phase { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 var(--app-space-4); border: 1px solid var(--border); border-radius: var(--app-radius-full); color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-semibold); line-height: 1; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; transition: border-color var(--app-duration-highlight) var(--app-ease-standard), color var(--app-duration-highlight) var(--app-ease-standard), background-color var(--app-duration-highlight) var(--app-ease-standard), transform var(--app-duration-highlight) var(--app-ease-standard); } .process-route__line { position: relative; display: block; height: 1px; overflow: hidden; background: var(--border); } .process-route__line::after { position: absolute; inset: 0; display: block; content: ''; background: var(--text-muted); transform: scaleX(0); transform-origin: left center; transition: transform 620ms var(--app-ease-emphasized); } .process-route__marker svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); color: var(--text-muted); transition: color var(--app-duration-highlight) var(--app-ease-standard), transform var(--app-duration-highlight) var(--app-ease-standard); } .process-route__copy { display: grid; align-self: end; gap: var(--app-space-4); max-width: 28rem; margin-top: var(--app-space-16); } .process-route__copy h3, .process-route__copy p { margin: 0; } @media (hover: hover) and (pointer: fine) { .process-list.process-route > .process-route__step:hover { flex-grow: 1.14; background: color-mix(in srgb, var(--surface-hover) 58%, transparent); } .process-list.process-route > .process-route__step:hover::before { opacity: 1; transform: translateY(0); } .process-list.process-route > .process-route__step:hover .process-route__phase { border-color: var(--text); color: var(--surface); background: var(--text); transform: translateY(-1px); } .process-list.process-route > .process-route__step:hover .process-route__line::after { transform: scaleX(1); } .process-list.process-route > .process-route__step:hover .process-route__marker svg { color: var(--text); transform: translateX(var(--app-space-1)); } } @media (max-width: 760px) { .process-list.process-route { flex-direction: column; margin-top: var(--app-space-8); } .process-list.process-route > .process-route__step, .process-list.process-route > .process-route__step:hover { display: grid; flex: none; grid-template-columns: minmax(86px, auto) minmax(0, 1fr); grid-template-rows: auto; column-gap: var(--app-space-5); min-height: 0; padding: var(--app-space-5) 0; overflow: visible; background: transparent; } .process-list.process-route > .process-route__step::before { display: none; } .process-list.process-route > .process-route__step + .process-route__step { border-block-start: 1px solid var(--border); border-inline-start: 0; } .process-list.process-route > .process-route__step > .process-route__marker { display: flex; grid-column: 1; grid-row: 1; flex-direction: column; align-items: center; align-self: stretch; gap: var(--app-space-3); } .process-route__phase { min-height: 30px; padding-inline: var(--app-space-3); } .process-route__line { width: 1px; min-height: var(--app-space-10); height: 100%; } .process-route__line::after { transform: scaleY(0); transform-origin: top center; } .process-route__marker svg { transform: rotate(90deg); } .process-route__copy { grid-column: 2; align-self: start; gap: var(--app-space-3); max-width: none; margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .process-list.process-route > .process-route__step, .process-list.process-route > .process-route__step::before, .process-route__phase, .process-route__line::after, .process-route__marker svg { transition-duration: 0.01ms; } } @media (hover: hover) and (pointer: fine) { .testimonial-card:hover { border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-4px); } .testimonial-card[data-active='true']:hover { border-color: rgb(248 244 240 / 24%); background: var(--scene-ink); } } @media (max-width: 760px) { .testimonials-heading-row { grid-template-columns: 1fr; gap: var(--app-space-6); } .testimonials-motion-control { justify-self: start; margin-bottom: 0; } .testimonial-archive { width: 100%; margin-top: var(--app-space-8); overflow: hidden; } .testimonial-archive__summary { padding-inline: var(--app-space-4); } .testimonial-archive__stage { display: flex; gap: var(--app-space-3); padding-inline: var(--app-space-4); padding-bottom: var(--app-space-5); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .testimonial-archive__rail { display: contents; } .testimonial-archive__rail .testimonial-card:nth-child(n + 3) { display: flex; } .testimonial-marquee { margin-top: var(--app-space-8); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .testimonial-marquee__track { gap: var(--app-space-3); padding-inline-end: var(--app-space-3); animation-duration: 58s; } .testimonial-card, .testimonial-card[data-variant='rail'], .testimonial-card[data-variant='center'], .testimonial-card[data-variant='marquee'], .testimonial-card[data-variant='marquee'][data-length='short'], .testimonial-card[data-variant='marquee'][data-length='long'] { flex: 0 0 auto; width: min(82vw, 350px); min-height: 320px; gap: var(--app-space-6); padding: var(--app-space-6); scroll-snap-align: start; } .testimonial-card[data-variant='center'] { order: -1; } .testimonial-card h3 { font-size: var(--app-type-heading-4-size) !important; } .testimonial-card__quote { font-size: 1.12rem !important; -webkit-line-clamp: 10; } .testimonial-card__topline { align-items: flex-start; } .testimonial-card__label { max-width: 12ch; } .testimonial-card__footer { align-items: flex-start; flex-wrap: wrap; } .testimonial-card__actions { width: 100%; margin-left: 0; } .testimonial-photo-card { flex: 0 0 auto; width: min(82vw, 350px); min-height: 320px; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .testimonials-motion-control { display: none; } .testimonial-marquee { padding-inline: var(--app-space-4); -webkit-mask-image: none; mask-image: none; } .testimonial-marquee__viewport { gap: var(--app-space-4); padding-bottom: var(--app-space-6); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .testimonial-marquee__track { transform: none; animation: none; will-change: auto; } .testimonial-marquee__track[aria-hidden='true'] { display: none; } .testimonial-card { scroll-snap-align: start; transition: none; } .testimonial-card__quote { -webkit-line-clamp: unset; } } /* Lead form and local legal footer: flat surfaces, HeroUI-owned controls. */ .lead-form-section { background: var(--surface-muted); background-image: none; } .lead-form, .lead-form-success { border: 1px solid var(--border-strong); background: var(--surface); box-shadow: none; } .lead-form { --field-background: var(--canvas); --field-border: color-mix(in srgb, var(--border-strong) 82%, var(--text)); --field-border-hover: color-mix(in srgb, var(--border-strong) 58%, var(--text)); --field-hover: color-mix(in srgb, var(--surface-hover) 76%, var(--surface)); --field-focus: color-mix(in srgb, var(--surface) 92%, var(--focus) 8%); --field-border-focus: var(--focus); --field-shadow: 0 0 #0000; } .lead-field { display: flex; flex-direction: column; gap: var(--app-space-2); min-width: 0; } .lead-field > [data-slot="label"], .lead-field > label { color: var(--text-secondary); } .lead-field [data-slot="input"], .lead-field [data-slot="textarea"], .lead-field input, .lead-field textarea { width: 100%; border: 1px solid var(--field-border); border-radius: var(--app-radius-md); color: var(--field-foreground); background: var(--field-background); box-shadow: none; transition: none; } .lead-field [data-slot="input"], .lead-field input { min-height: 54px; padding-inline: var(--app-space-4); } .lead-field [data-slot="textarea"], .lead-field textarea { min-height: 132px; padding: var(--app-space-4); line-height: var(--app-type-body-line-height); resize: vertical; } .lead-field [data-slot="input"]:hover:not(:disabled), .lead-field [data-slot="textarea"]:hover:not(:disabled), .lead-field input:hover:not(:disabled), .lead-field textarea:hover:not(:disabled) { border-color: var(--field-border-hover); background: var(--field-hover); } .lead-field [data-slot="input"]::placeholder, .lead-field [data-slot="textarea"]::placeholder, .lead-field input::placeholder, .lead-field textarea::placeholder { color: var(--field-placeholder); opacity: 1; } .lead-consent__content { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--app-space-3); align-items: start; width: 100%; padding: var(--app-space-4); border: 1px solid var(--border); border-radius: var(--app-radius-md); color: var(--text-secondary); background: var(--field-background); cursor: pointer; user-select: none; } .lead-consent__control { display: grid; flex: none; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--field-border); border-radius: var(--app-radius-sm); color: transparent; background: var(--surface); transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); } .lead-consent__indicator { width: 14px; height: 14px; } .lead-consent[data-hovered="true"] .lead-consent__control, .lead-consent__content[data-hovered="true"] .lead-consent__control { border-color: var(--field-border-hover); } .lead-consent[data-selected="true"] .lead-consent__control, .lead-consent__content[data-selected="true"] .lead-consent__control, .lead-consent__content[aria-checked="true"] .lead-consent__control { border-color: var(--text); color: var(--surface); background: var(--text); } .lead-consent[data-focus-visible="true"] .lead-consent__control, .lead-consent__content[data-focus-visible="true"] .lead-consent__control { outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent); outline-offset: 3px; } .lead-form__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-1) var(--app-space-2); color: var(--text-muted); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .lead-form__legal-links [data-slot="button"] { min-height: 32px; padding-inline: var(--app-space-2); color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .landing-footer { padding: var(--app-space-12) 0 max(var(--app-space-6), env(safe-area-inset-bottom)); background: var(--surface); } .landing-footer__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.6fr) auto; gap: var(--app-space-10); align-items: start; } .landing-footer__brand { display: grid; gap: var(--app-space-4); max-width: 30ch; } .landing-footer__brand img { width: 120px; height: auto; } .landing-footer__brand p { margin: 0; } .landing-footer__legal { display: grid; gap: var(--app-space-3); } .landing-footer__legal h2, .landing-footer__contact > span { margin: 0; color: var(--text-muted); font-size: var(--app-type-body-sm-size) !important; font-weight: var(--app-type-weight-medium); line-height: var(--app-type-body-sm-line-height) !important; } .landing-footer__legal > div { display: flex; flex-wrap: wrap; gap: var(--app-space-1) var(--app-space-2); } .landing-footer__legal [data-slot="button"] { min-height: 36px; padding-inline: var(--app-space-2); justify-content: flex-start; color: var(--text-secondary); } .landing-footer__contact { display: grid; gap: var(--app-space-3); justify-items: start; } .landing-footer__contact a { color: var(--link); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); text-decoration: underline; text-underline-offset: 4px; } .landing-footer__bottom { display: flex; justify-content: space-between; gap: var(--app-space-6); margin-top: var(--app-space-10); padding-top: var(--app-space-5); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--app-type-caption-size); line-height: var(--app-type-caption-line-height); } .landing-legal-dialog { width: min(960px, calc(100vw - var(--app-space-8))); max-height: min(90svh, 920px); color: var(--text); background: var(--surface); } .landing-legal-dialog__header { padding: var(--app-space-8) var(--app-space-8) var(--app-space-6); border-bottom: 1px solid var(--border); } .landing-legal-dialog__header > div { display: grid; gap: var(--app-space-3); max-width: 70ch; padding-right: var(--app-space-8); } .landing-legal-dialog__header .section-kicker, .landing-legal-dialog__header p { margin: 0; } .landing-legal-dialog__header [data-slot="heading"] { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--app-type-weight-semibold); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; } .landing-legal-dialog__close { width: 44px; height: 44px; } .landing-legal-dialog__body { display: grid; min-width: 0; gap: var(--app-space-6); padding: var(--app-space-6) var(--app-space-8); } .landing-legal-nav { display: flex; flex-wrap: wrap; gap: var(--app-space-2); padding-bottom: var(--app-space-5); border-bottom: 1px solid var(--border); } .landing-legal-nav [data-slot="button"] { white-space: normal; text-align: left; } .landing-legal-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--app-space-6); align-items: start; } .landing-legal-meta > p { max-width: 56ch; margin: 0; color: var(--text-secondary); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .landing-legal-meta dl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--app-space-3) var(--app-space-5); margin: 0; } .landing-legal-meta dl > div { display: grid; gap: 2px; } .landing-legal-meta dt { color: var(--text-muted); font-size: var(--app-type-caption-size); } .landing-legal-meta dd { margin: 0; color: var(--text-secondary); font-size: var(--app-type-body-sm-size); } .landing-legal-document { display: grid; width: 100%; min-width: 0; gap: 0; max-width: 74ch; } .landing-legal-document blockquote { display: grid; gap: var(--app-space-3); margin: 0 0 var(--app-space-6); padding: var(--app-space-5); border-radius: var(--app-radius-md); color: var(--text-secondary); background: var(--surface-muted); } .landing-legal-document blockquote p { margin: 0; } .landing-legal-document > section { min-width: 0; padding: var(--app-space-6) 0; border-top: 1px solid var(--border); } .landing-legal-document h3 { margin: 0 0 var(--app-space-4); font-size: var(--app-type-heading-3-size); line-height: var(--app-type-heading-line-height); letter-spacing: -0.025em; text-wrap: balance; } .landing-legal-document p, .landing-legal-document li { color: var(--text-secondary); font-size: var(--app-type-body-size); line-height: var(--app-type-body-line-height); } .landing-legal-document p { margin: 0 0 var(--app-space-4); } .landing-legal-document ul, .landing-legal-document ol { display: grid; gap: var(--app-space-2); margin: 0 0 var(--app-space-4); padding-left: var(--app-space-6); } .landing-legal-document__links { display: flex; flex-wrap: wrap; gap: var(--app-space-3); } .landing-legal-document__links a { color: var(--link); text-decoration: underline; text-underline-offset: 4px; } .landing-legal-dialog__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--app-space-4); padding: var(--app-space-4) var(--app-space-8); border-top: 1px solid var(--border); } .landing-legal-dialog__footer p { margin: 0; } @media (max-width: 860px) { .landing-footer__main { grid-template-columns: 1fr; gap: var(--app-space-8); } .landing-legal-meta { grid-template-columns: 1fr; } .landing-legal-meta dl { justify-content: flex-start; } } @media (max-width: 620px) { .lead-form, .lead-form-success { border-radius: var(--app-radius-md); } .lead-form__legal-links { align-items: flex-start; } .landing-footer { padding-top: var(--app-space-10); } .landing-footer__bottom { flex-direction: column; gap: var(--app-space-2); } .landing-legal-dialog { width: calc(100vw - var(--app-space-4)); max-height: calc(100svh - var(--app-space-4)); } .landing-legal-dialog__header, .landing-legal-dialog__body, .landing-legal-dialog__footer { padding-inline: var(--app-space-4); } .landing-legal-dialog__header { padding-top: var(--app-space-6); } .landing-legal-dialog__header > div { padding-right: var(--app-space-10); } .landing-legal-nav { display: grid; grid-template-columns: 1fr; } .landing-legal-nav [data-slot="button"] { width: 100%; justify-content: flex-start; } .landing-legal-document h3 { font-size: clamp(1.25rem, 7vw, 1.65rem); } } /* * Final responsive guardrail for the isolated landing lab. * It intentionally sits after styles.css and polish.css so HeroUI components * keep their canonical styling while the page shell cannot grow past the * viewport on narrow devices. */ html, body, #root { inline-size: 100%; max-inline-size: 100%; overflow-x: clip; } .landing-page { inline-size: 100%; max-inline-size: 100%; overflow-x: clip; } .landing-page main, .landing-page section, .landing-hero, .landing-hero__copy, .landing-hero__copy > *, .page-shell { max-inline-size: 100%; } .landing-hero__copy { margin-inline: auto; } .landing-hero__copy h1, .landing-hero__eyebrow, .landing-hero__lead { overflow-wrap: normal; word-break: normal; } @media (max-width: 760px) { .landing-header, .landing-header[data-compact="true"] { left: 50%; right: auto; inline-size: calc(100% - 16px); max-inline-size: calc(100% - 16px); transform: translateX(-50%); } .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; inline-size: 100%; padding: 8px 8px 8px 12px; } .landing-brand { inline-size: min(96px, 100%); max-inline-size: 96px; overflow: hidden; } .landing-brand img { inline-size: 96px; max-inline-size: 100%; height: auto; } .landing-header__actions { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; inline-size: 128px; max-inline-size: 128px; } .landing-segment { inline-size: 40px; block-size: 40px; } .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact, .landing-header__cta { inline-size: 40px !important; min-inline-size: 40px !important; block-size: 40px !important; min-block-size: 40px !important; padding: 0 !important; } .landing-hero { inline-size: 100%; padding-inline: 16px; } .landing-hero__copy { inline-size: 100%; max-inline-size: 100%; } .landing-hero__copy h1 { inline-size: 100%; max-inline-size: 15ch; margin-inline: auto; } .landing-hero__eyebrow, .landing-hero__lead, .landing-hero__actions, .landing-hero__privacy { inline-size: 100%; max-inline-size: 100%; margin-inline: auto; } .landing-hero__actions > * { min-inline-size: 0 !important; max-inline-size: 100%; } } @media (max-width: 420px) { .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner { padding-left: 10px; } .landing-brand, .landing-brand img { inline-size: 92px; max-inline-size: 92px; } .landing-hero__copy h1 { max-inline-size: 100%; font-size: 36px !important; line-height: 1.06 !important; letter-spacing: -0.04em !important; } .landing-primary-button, .landing-secondary-button { inline-size: 100%; max-inline-size: 100%; padding-inline: 16px; white-space: normal; } } @media (max-width: 350px) { .landing-brand, .landing-brand img { inline-size: 76px; max-inline-size: 76px; } .landing-header__actions { grid-template-columns: repeat(3, 38px); inline-size: 122px; max-inline-size: 122px; } .landing-segment, .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact, .landing-header__cta { inline-size: 38px !important; min-inline-size: 38px !important; block-size: 38px !important; min-block-size: 38px !important; } } /* * motion/react owns the transform property on the header for its tiny y-shift. * Center the fixed shell with auto margins instead, so that inline transform * never cancels the horizontal translate used by the base prototype. */ .landing-header, .landing-header[data-compact="true"] { left: 0 !important; right: 0 !important; margin-inline: auto; transform: none !important; } @media (max-width: 760px) { .landing-header, .landing-header[data-compact="true"] { left: 8px !important; right: 8px !important; inline-size: auto; max-inline-size: none; margin-inline: 0; } } @media (max-width: 760px) { .landing-header__cta svg { display: block !important; inline-size: 18px; block-size: 18px; margin: 0; } } .testimonial-card:first-child blockquote .typography { color: inherit !important; } /* * Canonical hero composition for the local landing lab. * The explicit root scope wins over legacy prototype icon rules without * changing any shared HeroUI component. */ .landing-hero__copy { display: flex; flex-direction: column; align-items: center; width: min(100%, 860px); margin-inline: auto; text-align: center; } .landing-hero__copy > .typography, .landing-hero__copy > h1 { width: 100%; text-align: center; } .landing-hero__copy h1, .landing-hero__eyebrow, .landing-hero__lead, .landing-hero__privacy { margin-inline: auto; } .landing-hero__actions, .landing-hero__privacy { justify-content: center; } html body #root .landing-page .landing-hero .landing-hero__actions svg, html body #root .landing-page .landing-hero .landing-hero__privacy svg { display: none; } /* * Intro section cleanup: * - remove the orphaned "01"; * - use a clean two-column desktop composition; * - keep both text blocks left-aligned; * - collapse to one column on mobile. */ .landing-page .intro-layout { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(48px, 8vw, 128px); } .landing-page .intro-layout__index { display: none; } .landing-page .intro-layout h2, .landing-page .intro-layout > p:last-child { text-align: left; } .landing-page .intro-layout h2 { grid-column: 1; justify-self: start; } .landing-page .intro-layout > p:last-child { grid-column: 2; justify-self: start; } @media (max-width: 760px) { .landing-page .intro-layout { grid-template-columns: minmax(0, 1fr); gap: var(--app-space-6); } .landing-page .intro-layout h2, .landing-page .intro-layout > p:last-child { grid-column: 1; } } /* * Recognition feature card: * keep the large tile visually prominent through scale only, without a glow, * directional highlight, side accent, or uneven edge contrast. */ .landing-page .recognition-card--1 { border-color: color-mix(in srgb, var(--border) 72%, transparent); outline: none; background: color-mix( in srgb, var(--surface) 88%, var(--scene-soft) 12% ); box-shadow: none; filter: none; } .landing-page .recognition-card--1::before, .landing-page .recognition-card--1::after { content: none; } /* The featured tile is separated by its tinted surface, so it needs no edge. */ .landing-page .recognition-card--1 { border-color: transparent; } /* * First-step section: * restore the canonical HeroUI radio geometry and reserve a square visual * below the copy for the future editorial photograph. */ .landing-page .orientation-panel, .landing-page .orientation-options, .landing-page .orientation-option, .landing-page .orientation-option__content { overflow: visible; } .landing-page .orientation-panel .orientation-option__control { position: relative; display: inline-flex; flex: 0 0 16px; align-items: center; justify-content: center; inline-size: 16px; block-size: 16px; margin: 0; border: var(--border-width-field) solid var(--field-border); border-radius: 999px; background: var(--default); box-shadow: none; } .landing-page .orientation-panel .orientation-option[data-selected] .orientation-option__control, .landing-page .orientation-panel .orientation-option:has(input:checked) .orientation-option__control { border-color: transparent; background: var(--accent); } .landing-page .orientation-panel .radio__indicator { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .landing-page .orientation-layout > div:first-child::after { content: ""; display: block; width: min(100%, 360px); aspect-ratio: 1; margin-top: var(--app-space-10); border: 1px solid var(--border); border-radius: var(--app-radius-lg); background: radial-gradient( circle at 66% 29%, color-mix(in srgb, var(--scene-c) 58%, var(--surface)) 0 10.5%, transparent 11% ), radial-gradient( ellipse at 50% 106%, color-mix(in srgb, var(--scene-ink) 28%, var(--surface)) 0 38%, transparent 38.5% ), color-mix(in srgb, var(--scene-soft) 72%, var(--surface)); } @media (max-width: 760px) { .landing-page .orientation-layout > div:first-child::after { width: 100%; margin-top: var(--app-space-8); } } /* * Keep the control on HeroUI's primary radio treatment. The previous local * polish layer removed its field shadow, which made the 16px control disappear * against the option surface in the light theme. */ .landing-page .orientation-panel .orientation-option__control { box-shadow: var(--shadow-field); } /* * The project theme resolves HeroUI's field border width to 0px. On these * similarly coloured option surfaces that erases the unselected 16px radio. * Keep HeroUI's semantic field-border colour, with the smallest visible edge. */ .landing-page .orientation-panel .orientation-option__control { border-width: 1px; border-style: solid; border-color: var(--field-border); } .landing-page .orientation-panel .orientation-option[data-selected] .orientation-option__control, .landing-page .orientation-panel .orientation-option:has(input:checked) .orientation-option__control { border-color: transparent; } /* * Final mobile navigation layer. * Reuses the project's DashboardMobileDrawer / HeroUI v3 bottom sheet. */ .landing-mobile-menu__trigger { display: none; } @media (hover: hover) and (pointer: fine) { .landing-header__cta:hover, .landing-primary-button:hover, .landing-secondary-button:hover, .orientation-option:hover, .orientation-tabs__tab:hover { transform: none !important; } } .landing-mobile-nav { --app-drawer-panel-bg: var(--surface); --app-drawer-title: var(--text); --app-drawer-muted: var(--text-muted); --app-drawer-control-bg: color-mix(in srgb, var(--surface-hover) 78%, transparent); --app-drawer-control-hover: var(--surface-hover); z-index: 400; background: rgb(20 17 23 / 46%); } .landing-mobile-nav[data-exiting="true"] { pointer-events: none; } .landing-mobile-nav [data-slot="drawer-content"] { width: 100%; } .landing-mobile-nav [data-slot="drawer-dialog"][data-placement="bottom"] { max-height: min(85svh, var(--visual-viewport-height, 100svh)); border: 0; border-radius: var(--app-radius-xl) var(--app-radius-xl) 0 0; color: var(--text); background: var(--surface); box-shadow: 0 -18px 52px rgb(24 19 27 / 16%); } .landing-mobile-nav [data-slot="drawer-header"] { padding-inline: var(--app-space-5); } .landing-mobile-nav [data-slot="drawer-heading"] { color: var(--text); font-size: var(--app-type-heading-3-size); font-weight: 620; letter-spacing: -0.025em; } .landing-mobile-nav [data-slot="drawer-body"] { padding: var(--app-space-3) var(--app-space-4) var(--app-space-5); } .landing-mobile-nav [data-slot="drawer-footer"] { padding: var(--app-space-2) var(--app-space-4) calc(var(--app-space-4) + env(safe-area-inset-bottom)); } .landing-mobile-nav .app-drawer-close-trigger { border: 0; box-shadow: none; } .landing-mobile-nav .app-drawer-close-trigger::before { position: absolute; inset: -10px; content: ""; } .app-drawer-menu, .app-drawer-menu__list { display: grid; width: 100%; min-width: 0; margin: 0; padding: 0; } .app-drawer-menu { gap: var(--app-space-4); } .app-drawer-menu__list { gap: var(--app-space-2); list-style: none; } .app-drawer-menu__item { min-width: 0; margin: 0; padding: 0; list-style: none; } .app-drawer-menu__link { display: flex; align-items: center; justify-content: flex-start; gap: var(--app-space-3); width: 100%; min-height: 56px; padding: var(--app-space-3) var(--app-space-4); border: 0; border-radius: var(--app-radius-md); color: var(--text); background: var(--app-drawer-control-bg); text-align: left; transform: none !important; } .app-drawer-menu__item-copy { display: grid; flex: 1 1 auto; gap: var(--app-space-1); min-width: 0; } .app-drawer-menu__item-title { color: inherit; font-size: var(--app-type-body-size); font-weight: 620; line-height: 1.25; } .app-drawer-menu__arrow { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-left: auto; color: var(--app-drawer-muted); transition: color var(--app-motion-fast), transform var(--app-motion-fast); } .app-drawer-menu__arrow svg { width: 18px; height: 18px; } .app-drawer-menu__link:focus-visible, .landing-mobile-nav__cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .app-drawer-menu__link:hover { color: var(--text); background: var(--app-drawer-control-hover); transform: none !important; } .app-drawer-menu__link:hover .app-drawer-menu__arrow { color: var(--text); transform: translateX(4px); } } .app-drawer-menu__link:active { transform: scale(0.985) !important; } .landing-mobile-nav__cta { min-height: 52px; border: 0; border-radius: var(--app-radius-md); transform: none !important; } .landing-mobile-nav__cta svg { width: 18px; height: 18px; } @media (max-width: 760px) { .landing-header__actions { grid-template-columns: repeat(3, 44px); width: 140px; max-width: 140px; } .landing-segment { width: 44px; height: 44px; } .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } .landing-header__cta { display: none !important; } .landing-mobile-menu__trigger { display: inline-grid; place-items: center; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: 0; border-radius: var(--radius-pill); color: var(--text); background: color-mix(in srgb, var(--surface-hover) 72%, transparent); box-shadow: none; transform: none !important; } .landing-mobile-menu__trigger svg { width: 18px; height: 18px; stroke-width: 1.8; } .landing-mobile-menu__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } } @media (max-width: 350px) { .landing-header__actions { grid-template-columns: repeat(3, 44px); width: 140px; max-width: 140px; } .landing-segment, .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact, .landing-mobile-menu__trigger { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } } @media (prefers-reduced-motion: reduce) { .app-drawer-menu__arrow, .app-drawer-menu__link { transition-duration: 0.01ms !important; } } /* * Landing system final pass. * One visual contract for the prototype sections below the hero. */ :root { --landing-section-y: clamp(72px, 8vw, 118px); --landing-section-gap: clamp(28px, 4.4vw, 56px); --landing-card-radius: 18px; --landing-control-radius: 12px; --landing-surface-flat: color-mix(in srgb, var(--surface) 90%, var(--canvas)); --landing-surface-soft: color-mix(in srgb, var(--surface-muted) 82%, var(--canvas)); --landing-line-soft: color-mix(in srgb, var(--border) 74%, transparent); } .landing-page, .landing-page :where(button, input, textarea, label, a, p, span, h1, h2, h3, h4) { font-family: var(--font-sans); } .landing-page :where(button, [data-slot="button"]) { transform: none; transition: background-color 180ms var(--app-ease-standard), color 180ms var(--app-ease-standard), opacity 180ms var(--app-ease-standard), box-shadow 180ms var(--app-ease-standard); } @media (hover: hover) and (pointer: fine) { .landing-page :where(button, [data-slot="button"]):hover { transform: none; } } .page-shell { width: min(100% - 48px, 1200px); } .page-section { padding-block: var(--landing-section-y); } .section-heading, .mechanism-layout > div:first-child, .lead-form-copy, .faq-layout .section-heading { max-width: 720px; } .section-heading > div > p:last-child, .orientation-layout > div:first-child > p:last-child, .mechanism-layout__copy p, .care-mosaic__copy > p:last-child, .expert-copy__lead, .lead-form-copy > p { max-width: 62ch; margin-top: 18px; font-size: 1.0625rem !important; line-height: 1.56 !important; } .section-kicker, .landing-hero__eyebrow { margin-bottom: 14px; text-transform: none !important; } .expert-copy ul { gap: var(--app-space-2); margin-top: var(--app-space-6); } .expert-copy li { padding-block: var(--app-space-2); } .landing-header__inner, .landing-header .landing-segment__expanded, .landing-header .landing-segment__compact, .landing-header .landing-segment__expanded button, .landing-header__cta, .landing-header__cta:hover, .landing-secondary-button, .landing-secondary-button:hover, .orientation-panel, .recognition-card, .care-shape, .expert-visual, .lead-form, .lead-form-success, .testimonial-card, .safety-note { border: 0; box-shadow: none; } .landing-primary-button, .landing-secondary-button { min-height: 48px; border-radius: var(--landing-control-radius); font-size: 0.975rem; font-weight: 650; } /* Care mosaic: the lower tiles and text sit on one visual baseline. */ @media (min-width: 761px) { .care-shape--8 { grid-row: 4 / span 2; } } .landing-secondary-button { background: var(--landing-surface-soft); } /* Process */ .process-list.process-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--landing-section-gap); padding: 0; overflow: visible; border: 0; background: transparent; list-style: none; } .process-list.process-route::before { display: none; } .process-list.process-route > .process-route__step { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 264px; padding: 28px; overflow: hidden; border: 0; border-radius: var(--landing-card-radius); background: var(--landing-surface-flat); box-shadow: none; transition: background-color 240ms var(--app-ease-standard), color 240ms var(--app-ease-standard); } .process-list.process-route > .process-route__step::before { display: none; } .process-list.process-route > .process-route__step + .process-route__step { border-inline-start: 0; } .process-list.process-route > .process-route__step > .process-route__marker { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; gap: 12px; align-items: center; color: var(--text-muted); } .process-route__phase { min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); color: var(--text-secondary); background: var(--landing-surface-soft); font-size: 0.8125rem; font-weight: 650; line-height: 1; white-space: nowrap; transform: none; } .process-route__line { height: 1px; background: var(--landing-line-soft); } .process-route__marker svg { width: 18px; height: 18px; color: var(--text-muted); transform: none; } .process-route__copy { align-self: start; gap: 14px; max-width: 30rem; margin-top: 64px; } .process-route__copy h3 { margin: 0; } .process-route__copy p { margin: 0; font-size: 1rem !important; line-height: 1.55 !important; } @media (hover: hover) and (pointer: fine) { .process-list.process-route > .process-route__step:hover { background: var(--surface-hover); } .process-list.process-route > .process-route__step:hover .process-route__phase { color: var(--surface); background: var(--text); transform: none; } .process-list.process-route > .process-route__step:hover .process-route__marker svg { color: var(--text); transform: none; } } /* Testimonials */ .testimonials-section { overflow: hidden; background: var(--canvas); } .testimonials-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; } .testimonials-motion-control { min-height: 40px; border-radius: var(--radius-pill); color: var(--text-secondary); background: var(--landing-surface-soft); font-size: 0.875rem; font-weight: 650; } .testimonial-marquee { margin-top: 28px; } .testimonial-archive { margin-top: var(--landing-section-gap); } .testimonial-marquee__viewport { padding-block: 4px 8px; outline: none; } .testimonial-marquee__viewport:focus-visible { box-shadow: none; } .testimonial-marquee__track { gap: 16px; animation-duration: 110s; } .testimonial-card { gap: 20px; border: 0; border-radius: var(--landing-card-radius); color: var(--text); background: var(--landing-surface-flat); transform: none; } .testimonial-card[data-variant='center'] { min-height: 500px; padding: 32px; } .testimonial-card[data-variant='rail'] { min-height: 220px; } .testimonial-card[data-variant='marquee'] { min-height: 248px; } .testimonial-card[data-active='true'] { color: #f8f4f0; background: var(--scene-ink); } .testimonial-card__topline, .testimonial-card__footer { gap: 16px; } .testimonial-card__label { color: var(--text-muted) !important; font-size: 0.8125rem !important; font-weight: 600 !important; text-align: left; } .testimonial-card blockquote { align-items: flex-start; max-width: none; } .testimonial-card h3 { font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.38 !important; letter-spacing: 0 !important; } .testimonial-card__quote { font-size: 1.32rem !important; line-height: 1.34 !important; letter-spacing: 0 !important; } .testimonial-card__footer, .testimonial-card[data-active='true'] .testimonial-card__footer { padding-top: 0; border-top: 0; } .testimonial-card__avatar { width: 42px; height: 42px; background: var(--landing-surface-soft); } @media (hover: hover) and (pointer: fine) { .testimonial-card:hover, .testimonial-card[data-active='true']:hover { transform: none; } } /* FAQ */ .faq-layout { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: var(--landing-section-gap); align-items: start; } .faq-list { border-top: 0; } /* Lead form */ .lead-form-section { background: var(--surface-muted); background-image: none; } .lead-form-layout { align-items: start; gap: var(--landing-section-gap); } .lead-form-copy > .section-kicker { margin-top: 0; } .lead-form, .lead-form-success { border: 0; border-radius: 22px; background: var(--landing-surface-flat); box-shadow: none; } .lead-form { display: grid; gap: 18px; padding: clamp(24px, 4vw, 36px); } /* Footer and legal modal */ [data-slot="modal-backdrop"], [data-slot="modal-container"], .landing-page [data-slot="backdrop"], .landing-page [data-slot="modal-backdrop"] { z-index: 2200; } .landing-legal-dialog { width: min(1000px, calc(100vw - 32px)); max-width: min(1000px, calc(100vw - 32px)); max-height: min(88svh, 900px); border: 0; border-radius: 22px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-float); overflow: hidden; } .landing-legal-dialog__header { padding: 32px 32px 20px; border-bottom: 0; } .landing-legal-dialog__header > div { gap: 10px; max-width: 68ch; padding-right: 0; } .landing-legal-dialog__header [data-slot="heading"] { font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 650; line-height: 1.08; } .landing-legal-dialog__close { width: 42px; height: 42px; border-radius: var(--radius-pill); background: var(--landing-surface-soft); } .landing-legal-dialog__body { gap: 24px; padding: 0 32px 28px; } .landing-legal-nav { gap: 8px; padding-bottom: 0; border-bottom: 0; } .landing-legal-nav [data-slot="button"] { min-height: 36px; border-radius: var(--radius-pill); font-weight: 600; } .landing-legal-meta { display: block; } .landing-legal-meta > p { display: none; } .landing-legal-meta dl { display: grid; max-width: 360px; justify-content: start; gap: 10px; margin: 0; } .landing-legal-meta dl > div { display: grid; gap: 2px; } .landing-legal-meta dt { color: var(--text-muted); font-size: 0.75rem; line-height: 1.35; } .landing-legal-meta dd { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.45; } .landing-legal-document { max-width: none; } .landing-legal-document > section { padding: 24px 0; border-top: 1px solid var(--landing-line-soft); } .landing-legal-document h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 650; line-height: 1.18; } .landing-legal-dialog__footer { justify-content: flex-end; padding: 18px 32px 28px; border-top: 0; } .landing-legal-dialog__footer p { display: none; } @media (max-width: 900px) { .page-shell { width: min(100% - 32px, 1200px); } .process-list.process-route, .faq-layout, .lead-form-layout, .landing-footer__main { grid-template-columns: 1fr; } .process-list.process-route > .process-route__step { min-height: 0; } .process-route__copy { margin-top: 40px; } } @media (max-width: 620px) { :root { --landing-section-y: 64px; } .page-shell { width: min(100% - 28px, 1200px); } .process-list.process-route { gap: 12px; } .process-list.process-route > .process-route__step { padding: 22px; } .process-list.process-route > .process-route__step > .process-route__marker { grid-template-columns: auto minmax(0, 1fr); } .process-route__marker svg { display: none; } .process-route__copy { margin-top: 34px; } .testimonials-heading-row { grid-template-columns: 1fr; align-items: start; } .testimonials-motion-control { justify-self: start; } .testimonial-card, .testimonial-card[data-variant='rail'], .testimonial-card[data-variant='center'], .testimonial-card[data-variant='marquee'], .testimonial-card[data-variant='marquee'][data-length='short'], .testimonial-card[data-variant='marquee'][data-length='long'] { width: min(84vw, 360px); min-height: 320px; padding: 22px; } .testimonial-card__quote { font-size: 1.12rem !important; } .lead-form { padding: 22px; } .landing-legal-dialog { width: calc(100vw - 16px); max-height: calc(100svh - 16px); border-radius: 18px; } .landing-legal-dialog__header, .landing-legal-dialog__body, .landing-legal-dialog__footer { padding-inline: 18px; } } /* * Copy system v14. * Editorial, borderless long-form section for the source-backed bullet bank. */ .insight-section { background: color-mix(in srgb, var(--surface-muted) 42%, var(--canvas)); } .insight-layout { display: grid; grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr); gap: clamp(44px, 7vw, 104px); align-items: start; } .insight-layout > .section-heading { position: sticky; top: 112px; } .insight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.2vw, 56px) clamp(32px, 5vw, 72px); min-width: 0; } .insight-item { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .insight-item h3 { max-width: 24ch; margin: 0; color: var(--text); font-size: 1.25rem !important; font-weight: 650 !important; line-height: 1.2 !important; text-wrap: balance; } .insight-item p { max-width: 46ch; margin: 0; color: var(--text-secondary); font-size: 1rem !important; line-height: 1.58 !important; } .insight-item:hover, .insight-item:focus-within { transform: none; color: inherit; background: transparent; } @media (max-width: 920px) { .insight-layout { grid-template-columns: 1fr; gap: 44px; } .insight-layout > .section-heading { position: static; max-width: 680px; } } @media (max-width: 680px) { .insight-list { grid-template-columns: 1fr; gap: 34px; } .insight-item h3 { font-size: 1.125rem !important; } } @media (prefers-reduced-motion: reduce) { .insight-item { transition: none; } } /* * First-step composition: one portal owns choices, media and answer together. * The previous v13 implementation placed those three pieces in separate grid * items, so the answer could fall below the visible section at compact widths. * * Responsive behavior: desktop keeps a balanced two-column choice/preview layout; * below 60rem it stacks. Tab rows are content-sized at every width, so the * situation subtitle is never silently clipped. */ .orientation-tabs-composed .orientation-layout { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .orientation-tabs-composed .orientation-layout > div:first-child { display: contents; } .orientation-tabs-composed .orientation-layout > div:first-child > .section-kicker, .orientation-tabs-composed .orientation-layout > div:first-child > h2, .orientation-tabs-composed .orientation-layout > div:first-child > p:not(.section-kicker) { grid-column: 1; inline-size: min(100%, 42rem); } .orientation-tabs-composed .orientation-layout > div:first-child > p:not(.section-kicker) { margin-block: var(--app-space-4) 0 !important; } .orientation-tabs-composed .orientation-layout > div:first-child::after { content: none !important; display: none !important; } .orientation-tabs-composed .orientation-panel { display: none !important; } .orientation-tabs-composition-host { grid-column: 1; inline-size: 100%; min-inline-size: 0; margin-block-start: clamp(1.75rem, 3vw, 3rem); } .orientation-tabs-v15 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.96fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; inline-size: min(100%, 72rem); } .orientation-tabs-v15__choices, .orientation-tabs-v15__preview, .orientation-tabs-v15__tabs, .orientation-tabs-v15__list-container { min-inline-size: 0; } .orientation-tabs-v15__tabs, .orientation-tabs-v15__list-container { inline-size: 100%; } .orientation-tabs-v15__tabs { display: block; } .orientation-tabs-v15__list-container, .orientation-tabs-v15__list-container [data-slot="tab-list-container-scroller"] { overflow: visible; } .orientation-tabs-v15__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--app-space-2); grid-auto-rows: max-content; inline-size: 100%; block-size: auto; padding: 0; background: transparent; } .orientation-tabs-v15__tab { display: flex; align-items: flex-start; justify-content: flex-start; inline-size: 100%; min-block-size: 6.375rem; padding: var(--app-space-4) var(--app-space-5); overflow: visible; border: 0; border-radius: var(--app-radius-md); background: transparent; color: var(--text-secondary); opacity: 0.58; text-align: start; transition: background-color 260ms var(--app-ease-standard), color 260ms var(--app-ease-standard), opacity 260ms var(--app-ease-standard); } .orientation-tabs-v15__tab:hover { background: color-mix(in srgb, var(--surface-muted) 72%, transparent); color: var(--text); opacity: 0.82; } .orientation-tabs-v15__tab[aria-selected="true"], .orientation-tabs-v15__tab[data-selected] { background: var(--surface-muted); color: var(--text); opacity: 1; } .orientation-tabs-v15__tab-copy { display: grid; gap: var(--app-space-1); inline-size: 100%; min-inline-size: 0; pointer-events: none; } .orientation-tabs-v15__tab-title { color: inherit; font-size: var(--app-type-heading-4-size); font-weight: var(--app-type-weight-semibold); line-height: 1.22; text-wrap: balance; } .orientation-tabs-v15__tab-description { max-inline-size: 44ch; color: var(--text-muted); font-size: var(--app-type-body-sm-size); font-weight: var(--app-type-weight-regular); line-height: var(--app-type-body-sm-line-height); text-wrap: pretty; } .orientation-tabs-v15__tab[aria-selected="true"] .orientation-tabs-v15__tab-description, .orientation-tabs-v15__tab[data-selected] .orientation-tabs-v15__tab-description { color: var(--text-secondary); } .orientation-tabs-v15__a11y-panel { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .orientation-tabs-v15__preview { display: grid; gap: var(--app-space-3); inline-size: 100%; max-inline-size: 30rem; margin-inline: auto 0; } .orientation-tabs-v15__visual { margin: 0; } .orientation-tabs-v15__media { position: relative; isolation: isolate; inline-size: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 0; border-radius: var(--app-radius-lg); background: var(--surface-muted); } .orientation-tabs-v15__image { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; backface-visibility: hidden; will-change: opacity, transform; } .orientation-tabs-v15__preview-copy { display: grid; gap: var(--app-space-2); min-inline-size: 0; } .orientation-tabs-v15__index { color: var(--text-muted); font-size: var(--app-type-body-xs-size); font-variant-numeric: tabular-nums; line-height: var(--app-type-body-xs-line-height); } .orientation-tabs-v15__preview-title { max-inline-size: 26ch; margin: 0; color: var(--text); font-size: var(--app-type-heading-4-size) !important; line-height: 1.22 !important; letter-spacing: 0 !important; text-wrap: balance; } .orientation-tabs-v15__result-copy { max-inline-size: 56ch; margin: 0 !important; color: var(--text-secondary); font-size: var(--app-type-body-sm-size) !important; line-height: var(--app-type-body-sm-line-height) !important; } .orientation-tabs-v15__cta { justify-self: start; margin-block-start: var(--app-space-1); } @media (max-width: 60rem) { .orientation-tabs-v15 { grid-template-columns: minmax(0, 1fr); gap: var(--app-space-7); } .orientation-tabs-v15__preview { max-inline-size: min(100%, 38rem); margin-inline: 0; } } @media (max-width: 47.5rem) { .orientation-tabs-composition-host { margin-block-start: var(--app-space-6); } .orientation-tabs-v15 { gap: var(--app-space-6); } .orientation-tabs-v15__tab { min-block-size: 5.5rem; padding: var(--app-space-3) var(--app-space-4); } .orientation-tabs-v15__tab-title { font-size: var(--app-type-body-size); line-height: 1.25; } .orientation-tabs-v15__tab-description { font-size: var(--app-type-body-xs-size); line-height: var(--app-type-body-xs-line-height); } .orientation-tabs-v15__preview { max-inline-size: none; } .orientation-tabs-v15__media { aspect-ratio: 4 / 3; border-radius: var(--app-radius-md); } .orientation-tabs-v15__cta { inline-size: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .orientation-tabs-v15__tab, .orientation-tabs-v15__image { transition-duration: 0.01ms; animation-duration: 0.01ms; will-change: auto; } } .landing-success-modal { width: min(28rem, calc(100vw - var(--app-space-8))); max-width: min(28rem, calc(100vw - var(--app-space-8))); border: 0; border-radius: var(--app-radius-lg); color: var(--text); background: var(--surface); box-shadow: var(--shadow-float); overflow: hidden; } .landing-success-modal__header { min-height: 0; padding: var(--app-space-3) var(--app-space-3) 0; } .landing-success-modal__close { margin-left: auto; border: 0; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--landing-surface-soft); } .landing-success-modal__body { padding: 0 var(--app-space-8) var(--app-space-5); } .landing-success-modal__footer { padding: 0 var(--app-space-8) var(--app-space-8); border: 0; } .landing-success-content { display: grid; justify-items: center; gap: var(--app-space-3); width: 100%; margin: 0; text-align: center; } .landing-success-content [data-slot="heading"] { max-width: 16ch; margin: 0; color: var(--text); font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 650; line-height: 1.08; letter-spacing: -0.03em; } .landing-success-content [data-slot="description"], .landing-success-content > p { max-width: 34ch; margin: 0; text-wrap: balance; } .landing-success-seal { display: grid; place-items: center; width: 88px; height: 88px; color: var(--scene-a); } .landing-success-seal svg { display: block; width: 100%; height: 100%; overflow: visible; } .landing-success-seal__ring, .landing-success-seal__check { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .landing-success-seal__ring { stroke-width: 2; } .landing-success-seal__check { stroke-width: 2.8; } .landing-success-seal__particle { color: color-mix(in srgb, var(--scene-a) 72%, var(--text)); } .landing-success-action { min-height: 48px; border: 0; border-radius: var(--landing-control-radius); transform: none !important; } .landing-success-sheet { --app-drawer-panel-bg: var(--surface); --app-drawer-title: var(--text); --app-drawer-muted: var(--text-muted); --app-drawer-control-bg: var(--landing-surface-soft); --app-drawer-control-hover: var(--surface-hover); z-index: 2300; background: color-mix(in srgb, #151319 48%, transparent); } .landing-success-sheet [data-slot="drawer-content"] { width: 100%; max-width: 100%; } .landing-success-sheet [data-slot="drawer-dialog"] { border: 0; border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0; background: var(--surface); box-shadow: var(--shadow-float); } .landing-success-sheet [data-slot="drawer-header"] { padding-inline: var(--app-space-5); } .landing-success-sheet [data-slot="drawer-body"] { padding: var(--app-space-3) var(--app-space-5) var(--app-space-5); } .landing-success-sheet [data-slot="drawer-footer"] { padding: var(--app-space-3) var(--app-space-5) calc(var(--app-space-5) + env(safe-area-inset-bottom)); border: 0; } .landing-success-sheet .landing-success-seal { width: 76px; height: 76px; } @media (max-width: 760px) { .landing-success-content { gap: var(--app-space-2-5); } .landing-success-content [data-slot="description"], .landing-success-content > p { max-width: 30rem; } } @media (prefers-reduced-motion: reduce) { .landing-success-seal, .landing-success-seal * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Legal lists stay semantically grouped, but align with the document text. */ .landing-legal-document ul, .landing-legal-document ol { padding-inline-start: 0; list-style: none; } .landing-legal-document li::marker { content: ""; } /* A legal section is a single reading column: headings, prose and list items share one left edge. */ .landing-legal-document > section { width: 100%; max-width: none; padding-inline: 0; } .landing-legal-document > section > h3, .landing-legal-document > section > p, .landing-legal-document > section > ul, .landing-legal-document > section > ol { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; } .landing-legal-document > section > ul > li, .landing-legal-document > section > ol > li { width: 100%; margin-inline: 0; padding-inline: 0; } /* The document has one explicit reading column; no inherited grid track may offset prose. */ .landing-legal-document { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .landing-legal-document > section { grid-column: 1 / -1; justify-self: stretch; } /* Mobile process: one calm reading column. Phase, title and copy share one left edge. */ @media (max-width: 760px) { .process-list.process-route { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--app-space-3); margin-top: var(--app-space-7); overflow: visible; background: transparent; } .process-list.process-route > .process-route__step, .process-list.process-route > .process-route__step:hover { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--app-space-4); min-height: 0; padding: var(--app-space-5); overflow: visible; border: 0; border-radius: var(--app-radius-md); background: var(--landing-surface-flat); } .process-list.process-route > .process-route__step + .process-route__step { border: 0; } .process-list.process-route > .process-route__step > .process-route__marker { display: flex; flex-direction: row; grid-column: 1; grid-row: 1; align-items: center; align-self: start; justify-content: flex-start; width: auto; min-height: 30px; } .process-route__line, .process-route__marker svg { display: none; } .process-route__phase { min-height: 30px; padding-inline: var(--app-space-3); background: var(--landing-surface-soft); } .process-route__copy { display: grid; grid-column: 1; grid-row: 2; align-self: start; gap: var(--app-space-3); max-width: none; margin-top: 0; } } /* ============================================================================ 00 - Design tokens (@layer tokens). Dark/light theme variables (:root[data-theme]), typography scale, 4px-base spacing scale (--app-space-*), radius, motion, surface palettes. Custom properties only - no rules. Extracted verbatim from globals.css (commit 085838f); cascade order kept. ============================================================================ */ @layer tokens { :root { --app-font-family-base: "Inter Tight Variable", "Inter Tight", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --app-font-family-heading: var(--app-font-family-base); --app-font-family-display: var(--app-font-family-base); /* Canonical product typography. These fixed roles mirror HeroUI/Tailwind's 12/14/16/18/20/24/30/36 scale, with one 13px metadata step for dense dashboards. Product UI never scales type from viewport width; editorial article prose may opt into its own bounded reading scale. */ --app-type-caption-size: 0.75rem; --app-type-meta-size: 0.8125rem; --app-type-body-sm-size: 0.875rem; --app-type-body-size: 1rem; --app-type-lead-size: 1.125rem; --app-type-heading-4-size: 1.25rem; --app-type-heading-3-size: 1.5rem; --app-type-heading-2-size: 1.875rem; --app-type-heading-1-size: 2.25rem; --app-type-display-size: 3rem; --app-type-caption-line-height: 1.333; --app-type-meta-line-height: 1.385; --app-type-body-sm-line-height: 1.5; --app-type-body-line-height: 1.55; --app-type-lead-line-height: 1.5; --app-type-heading-line-height: 1.111; --app-type-weight-normal: 400; --app-type-weight-medium: 500; --app-type-weight-semibold: 600; --app-type-weight-bold: 700; --app-type-color-heading: var(--app-color-text); --app-type-color-body: var(--app-color-text-soft); --app-type-color-meta: var(--app-color-text-muted); /* Compatibility aliases: legacy BEM surfaces now consume the same scale as HeroUI without a risky markup rewrite. */ --app-font-size-xs: var(--app-type-caption-size); --app-font-size-sm: var(--app-type-body-sm-size); --app-font-size-base: var(--app-type-body-size); --app-font-size-lg: var(--app-type-lead-size); --app-font-size-xl: var(--app-type-heading-4-size); --app-font-size-2xl: var(--app-type-heading-1-size); --app-line-height-tight: var(--app-type-heading-line-height); --app-line-height-base: var(--app-type-body-line-height); --app-space-1: 4px; --app-space-2: 8px; --app-space-3: 12px; --app-space-4: 16px; --app-space-5: 20px; --app-space-6: 24px; --app-space-7: 28px; --app-space-8: 32px; --app-space-10: 40px; --app-space-12: 48px; --app-space-16: 64px; /* Half-step tier (2px sub-grid) — allowed ONLY for dense controls (chips, pills, compact control paddings). New code uses these tokens, not new off-grid literals; any other off-grid value needs a documented optical reason. Policy: docs/CSS-ARCHITECTURE.md. */ --app-space-1-5: 6px; --app-space-2-5: 10px; --app-space-3-5: 14px; --app-space-4-5: 18px; --app-space-5-5: 22px; --app-icon-size-sm: 1rem; --app-icon-size-md: 1.25rem; --app-icon-size-lg: 1.5rem; --app-icon-stroke: 1.8; --app-radius-xs: 6px; --app-radius-sm: 8px; --app-radius-md: 12px; --app-radius-lg: 18px; --app-radius-full: 999px; /* pill idiom — use instead of literal 999px */ --app-image-filter: none; /* psychometric figure colors stay theme-neutral */ --app-shadow-soft: 0 16px 50px rgb(0 0 0 / 24%); --app-ease-standard: cubic-bezier(0.2, 0, 0, 1); --app-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --app-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --app-ease-spring-sm: cubic-bezier(0.34, 1.42, 0.64, 1); --app-duration-press: 100ms; --app-duration-hover: 160ms; --app-duration-exit: 160ms; --app-duration-enter: 220ms; --app-duration-highlight: 260ms; --app-duration-panel: 280ms; --app-duration-panel-fade: 180ms; --app-duration-sheet: 260ms; --app-motion-distance-sm: 4px; --app-motion-distance-md: 6px; --app-motion-press-scale: 0.975; --app-motion-icon-press-scale: 0.92; --app-interactive-press-scale: var(--app-motion-press-scale); --app-interactive-icon-press-scale: var(--app-motion-icon-press-scale); --app-interactive-disabled-opacity: 0.52; --app-motion-fast: var(--app-duration-hover) var(--app-ease-standard); --app-motion-base: 240ms var(--app-ease-standard); --app-motion-slow: var(--app-duration-panel) var(--app-ease-standard); --app-motion-panel: var(--app-duration-panel) var(--app-ease-emphasized); --app-motion-panel-fade: var(--app-duration-panel-fade) var(--app-ease-standard); --app-motion-sheet: var(--app-duration-sheet) var(--app-ease-sheet); --app-motion-sheet-soft: var(--app-duration-panel-fade) var(--app-ease-standard); --app-motion-icon: var(--app-duration-highlight) var(--app-ease-spring-sm); --app-motion-highlight: var(--app-duration-highlight) var(--app-ease-emphasized); --app-scroll-offset: 96px; --app-scroll-card-offset: 132px; } :root, :root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; --app-color-bg: #111111; --app-color-bg-elevated: #15181b; --app-color-bg-subtle: #1c2024; --app-color-bg-muted: #242a2f; /* Neutral raised surfaces — the Theraphea dashboard family (page #111111, raised card #161616, chip #1a1a1a). Shared chrome (toast, drawer, account) and --app-shell-* fallbacks resolve here; the blue-steel --app-color-bg-elevated/-subtle/-muted scale above stays for the legacy runner/result/journal surfaces only. */ --app-surface-raised: #161616; --app-surface-chip: #1a1a1a; --app-surface-border: rgb(255 255 255 / 7%); --app-color-text: #f4eee3; --app-color-text-soft: rgb(255 255 255 / 68%); --app-color-text-muted: rgb(255 255 255 / 55%); --app-color-text-faint: rgb(255 255 255 / 46%); --app-type-color-heading: var(--app-color-text); --app-type-color-body: var(--app-color-text-soft); --app-type-color-meta: var(--app-color-text-muted); --app-runner-text-soft: var(--app-color-text-soft); --app-runner-text-muted: var(--app-color-text-muted); --app-color-border: rgb(244 239 230 / 14%); --app-color-border-strong: rgb(244 239 230 / 24%); --app-color-accent: #e8d6b3; --app-color-accent-strong: #f7ead0; --app-color-accent-muted: rgb(232 214 179 / 14%); --app-button-primary-bg: var(--app-color-accent); --app-button-primary-text: #11100d; --app-color-danger: #f08d7b; --app-color-success: #87c7a1; --app-color-focus: rgb(232 214 179 / 42%); --app-logo-color-start: #ffffff; --app-logo-color-end: #e8d6b3; --app-header-logo-color-start: #ffffff; --app-header-logo-color-end: #e8d6b3; --app-header-control-bg: rgb(255 255 255 / 5%); --app-header-control-bg-hover: rgb(255 255 255 / 9%); --app-header-control-border: transparent; --app-header-control-text: #f2f2f2; --app-header-control-text-muted: rgb(242 242 242 / 58%); --app-header-surface: #161616; --app-header-shadow: none; --app-header-blend-mode: normal; --app-header-blend-color: #f2f2f2; --app-footer-bg: #111111; --app-footer-border: rgb(244 239 230 / 9%); --app-glass-bg: rgb(15 16 19 / 66%); --app-glass-border: rgb(255 255 255 / 8%); --app-glass-shadow: 0 18px 48px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 8%); --app-progress-track: rgb(255 255 255 / 4%); --app-option-bg: rgb(255 255 255 / 3%); --app-option-bg-hover: rgb(232 214 179 / 5%); --app-option-bg-selected: rgb(232 214 179 / 10%); --app-option-border: rgb(255 255 255 / 6%); --app-option-border-hover: rgb(232 214 179 / 22%); --app-option-border-selected: rgb(232 214 179 / 42%); --app-seo-surface-1: #171717; --app-seo-surface-2: #202020; --app-seo-surface-3: #292929; --app-seo-text: #f4f3ef; --app-seo-text-soft: rgb(244 243 239 / 72%); --app-seo-text-muted: rgb(244 243 239 / 56%); --app-seo-text-faint: rgb(244 243 239 / 42%); --app-seo-border: rgb(244 243 239 / 9%); --app-seo-border-strong: rgb(244 243 239 / 16%); --app-seo-accent: #e8d6b3; --app-seo-accent-soft: rgb(232 214 179 / 72%); --app-seo-card-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); --app-seo-scale-low: #5de5f2; --app-seo-scale-norm: #7ade74; --app-seo-scale-sub: #4b8dff; --app-seo-scale-mild: #fff06a; --app-seo-scale-mid: #ffd45c; --app-seo-scale-high: #ff9466; --app-seo-scale-very: #ff5b54; --app-seo-scale-critical: #ff6a7c; /* Ink for score badges sitting on the scale tones. Dark theme tones are light fills, so the badge text is near-black; light theme flips. */ --app-seo-scale-ink: #111111; } :root[data-theme="light"], [data-theme="light"] { color-scheme: light; --app-color-bg: #fbfbfa; --app-color-bg-elevated: #ffffff; --app-color-bg-subtle: #f3f3f1; --app-color-bg-muted: #e9e9e6; --app-surface-raised: #ffffff; --app-surface-chip: #f4f4f2; --app-surface-border: rgb(20 20 20 / 10%); --app-color-text: #141414; --app-color-text-soft: rgb(20 20 20 / 68%); --app-color-text-muted: #70706a; --app-color-text-faint: rgb(20 20 20 / 48%); --app-type-color-heading: var(--app-color-text); --app-type-color-body: var(--app-color-text-soft); --app-type-color-meta: var(--app-color-text-muted); --app-runner-text-soft: var(--app-color-text-soft); --app-runner-text-muted: var(--app-color-text-muted); --app-color-border: rgb(20 20 20 / 11%); --app-color-border-strong: rgb(20 20 20 / 20%); --app-color-accent: #171717; --app-color-accent-strong: #111111; --app-color-accent-muted: rgb(20 20 20 / 7%); --app-button-primary-bg: var(--app-color-accent); --app-button-primary-text: #ffffff; --app-color-danger: #a74738; --app-color-success: #38784f; --app-color-focus: rgb(20 20 20 / 24%); --app-logo-color-start: #171512; --app-logo-color-end: #34342f; --app-header-logo-color-start: #171512; --app-header-logo-color-end: #34342f; --app-header-control-bg: rgb(20 20 20 / 6%); --app-header-control-bg-hover: rgb(20 20 20 / 10%); --app-header-control-border: transparent; --app-header-control-text: #181818; --app-header-control-text-muted: rgb(20 20 20 / 55%); --app-header-surface: #ffffff; --app-header-shadow: none; --app-header-blend-mode: normal; --app-header-blend-color: #141414; --app-footer-bg: #fbfbfa; --app-footer-border: rgb(20 20 20 / 10%); --app-glass-bg: rgb(255 255 255 / 74%); --app-glass-border: rgb(20 20 20 / 9%); --app-glass-shadow: 0 18px 42px rgb(20 20 20 / 10%), inset 0 1px 0 rgb(255 255 255 / 70%); --app-progress-track: rgb(20 20 20 / 8%); --app-option-bg: rgb(255 255 255 / 48%); --app-option-bg-hover: rgb(20 20 20 / 5%); --app-option-bg-selected: rgb(20 20 20 / 8%); --app-option-border: rgb(20 20 20 / 9%); --app-option-border-hover: rgb(20 20 20 / 20%); --app-option-border-selected: rgb(20 20 20 / 34%); --app-seo-surface-1: #ffffff; --app-seo-surface-2: #f4f4f2; --app-seo-surface-3: #ececea; --app-seo-text: #141414; --app-seo-text-soft: rgb(20 20 20 / 72%); --app-seo-text-muted: rgb(20 20 20 / 56%); --app-seo-text-faint: rgb(20 20 20 / 42%); --app-seo-border: rgb(20 20 20 / 10%); --app-seo-border-strong: rgb(20 20 20 / 18%); --app-seo-accent: #171717; --app-seo-accent-soft: rgb(20 20 20 / 68%); --app-seo-card-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 14px 36px rgb(20 20 20 / 7%); --app-seo-scale-low: #077c90; --app-seo-scale-norm: #287a3f; --app-seo-scale-sub: #245aa8; --app-seo-scale-mild: #806c00; --app-seo-scale-mid: #916800; --app-seo-scale-high: #a6551d; --app-seo-scale-very: #992f2b; --app-seo-scale-critical: #a63a4c; /* Light theme scale tones are dark fills -> badge text must be light. */ --app-seo-scale-ink: #ffffff; } } /* ============================================================================ Theraphea brand theme — Moonlit Pearl. This is the semantic brand layer that sits on top of HeroUI's default variables and the aliases in tokens-bridge.css. The legacy --app-* tokens remain available for result and specialist surfaces; the test-runner UI is bridged to Moonlit Pearl below without changing test data or color mechanics. Contract: - --accent is always a solid, accessible interaction color. - --app-brand-gradient is reserved for primary actions and expressive brand moments; it is never stored inside a color slot. - form controls keep one quiet 1px boundary. - text-field focus stays inside that boundary; contrast modes add an outline. - status colors stay semantic and independent from the pearl brand colors. ============================================================================ */ @layer tokens { :root, [data-theme="light"], [data-theme="dark"] { /* Mother-of-pearl primitives extracted from the approved references. */ --app-pearl-warm: #ebdac7; --app-pearl-blush: #d8c6c1; --app-pearl-silver: #c9ced1; --app-pearl-opal: #dee6e4; /* Gradient and solid brand roles intentionally stay separate. */ --app-brand-gradient: linear-gradient( 112deg, var(--app-pearl-warm) 0%, var(--app-pearl-blush) 34%, var(--app-pearl-silver) 67%, var(--app-pearl-opal) 100% ); --app-brand-gradient-hover: linear-gradient( 112deg, #f1e4d6 0%, #e2d1cc 34%, #d6dadd 67%, #e7efed 100% ); --app-brand-gradient-pressed: linear-gradient( 112deg, #deccb8 0%, #ccb8b3 34%, #bac1c5 67%, #cedad7 100% ); --app-brand-gradient-foreground: #211e24; --app-brand-logo-gradient: linear-gradient( 112deg, var(--app-ui-text) 0%, var(--app-ui-accent) 34%, color-mix(in srgb, var(--app-pearl-silver) 55%, var(--app-ui-text)) 67%, color-mix(in srgb, var(--app-pearl-opal) 55%, var(--app-ui-text)) 100% ); /* HeroUI control geometry. A border is retained only where it communicates the boundary of an interactive field. */ --field-border-width: 1px; --ring-offset-width: 2px; --color-field-border-invalid: var(--danger); --app-ui-control-bg: var(--app-ui-surface); --app-ui-control-bg-focus: color-mix(in srgb, var(--app-ui-surface) 94%, var(--app-ui-focus) 6%); --app-ui-control-selected-bg: color-mix(in srgb, var(--app-ui-text) 12%, var(--app-ui-surface-active)); --app-ui-control-selected-foreground: var(--app-ui-text); --app-field-focus-border: var(--app-ui-focus); --app-field-focus-ring: 0 0 0 1px var(--app-ui-focus); --app-interactive-focus-ring: 0 0 0 2px var(--app-ui-focus); } :root, :root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; /* Product semantics: dark. */ --app-ui-canvas: #151319; --app-ui-sidebar: #1c1921; --app-ui-surface: #24212a; --app-ui-surface-raised: #24212a; --app-ui-surface-hover: #2b2631; --app-ui-surface-active: #352f3b; --app-ui-divider: #403a46; --app-ui-border: #403a46; --app-ui-control-border: #756d79; --app-ui-control-border-hover: #8a818e; --app-ui-text: #f6f4ef; --app-ui-text-secondary: #d8d1d5; --app-ui-text-muted: #b8b1b8; --app-ui-accent: #ebdac7; --app-ui-accent-hover: #f1e4d6; --app-ui-accent-soft: #332b34; --app-ui-accent-soft-hover: #3c323d; --app-ui-accent-foreground: #211e24; --app-ui-focus: #ebdac7; --app-ui-link: #f1dcc9; /* Semantic status roles deliberately do not reuse brand pearl. */ --app-ui-success: #8bc7a5; --app-ui-success-hover: #9bd3b3; --app-ui-success-soft: rgb(139 199 165 / 15%); --app-ui-warning: #e1bd79; --app-ui-warning-hover: #ebca8b; --app-ui-warning-soft: rgb(225 189 121 / 16%); --app-ui-danger: #ef9a8c; --app-ui-danger-hover: #f4aa9e; --app-ui-danger-soft: rgb(239 154 140 / 16%); --app-ui-info: #9fc3de; --app-ui-info-soft: rgb(159 195 222 / 16%); --app-ui-status-foreground: #211e24; --app-ui-surface-shadow: none; --app-ui-overlay-shadow: 0 24px 70px rgb(0 0 0 / 38%); --app-ui-backdrop: rgb(12 10 15 / 68%); /* HeroUI semantic slots. */ --background: var(--app-ui-canvas); --background-secondary: var(--app-ui-sidebar); --background-tertiary: var(--app-ui-surface); --background-inverse: var(--app-ui-text); --foreground: var(--app-ui-text); --muted: var(--app-ui-text-muted); --surface: var(--app-ui-surface); --surface-foreground: var(--app-ui-text); --surface-secondary: var(--app-ui-surface-hover); --surface-secondary-foreground: var(--app-ui-text); --surface-tertiary: var(--app-ui-surface-active); --surface-tertiary-foreground: var(--app-ui-text); --surface-hover: var(--app-ui-surface-hover); --overlay: var(--app-ui-surface-raised); --overlay-foreground: var(--app-ui-text); --backdrop: var(--app-ui-backdrop); --default: var(--app-ui-surface-hover); --default-hover: var(--app-ui-surface-active); --default-foreground: var(--app-ui-text); --default-soft: rgb(216 209 213 / 8%); --default-soft-hover: rgb(216 209 213 / 12%); --default-soft-foreground: var(--app-ui-text-secondary); --accent: var(--app-ui-accent); --accent-hover: var(--app-ui-accent-hover); --accent-foreground: var(--app-ui-accent-foreground); --accent-soft: var(--app-ui-accent-soft); --accent-soft-hover: var(--app-ui-accent-soft-hover); --accent-soft-foreground: var(--app-ui-accent); --success: var(--app-ui-success); --success-hover: var(--app-ui-success-hover); --success-foreground: var(--app-ui-status-foreground); --success-soft: var(--app-ui-success-soft); --success-soft-hover: rgb(139 199 165 / 22%); --success-soft-foreground: var(--app-ui-success); --warning: var(--app-ui-warning); --warning-hover: var(--app-ui-warning-hover); --warning-foreground: var(--app-ui-status-foreground); --warning-soft: var(--app-ui-warning-soft); --warning-soft-hover: rgb(225 189 121 / 23%); --warning-soft-foreground: var(--app-ui-warning); --danger: var(--app-ui-danger); --danger-hover: var(--app-ui-danger-hover); --danger-foreground: var(--app-ui-status-foreground); --danger-soft: var(--app-ui-danger-soft); --danger-soft-hover: rgb(239 154 140 / 23%); --danger-soft-foreground: var(--app-ui-danger); --border: var(--app-ui-border); --border-secondary: var(--app-ui-control-border); --border-tertiary: var(--app-ui-control-border-hover); --separator: var(--app-ui-divider); --separator-secondary: var(--app-ui-border); --separator-tertiary: var(--app-ui-control-border); --focus: var(--app-ui-focus); --link: var(--app-ui-link); --field-background: var(--app-ui-control-bg); --field-foreground: var(--app-ui-text); --field-placeholder: var(--app-ui-text-muted); --field-border: var(--app-ui-control-border); --field-hover: var(--app-ui-surface-hover); --field-focus: var(--app-ui-control-bg-focus); --field-border-hover: var(--app-ui-control-border-hover); --field-border-focus: var(--app-field-focus-border); --field-shadow: 0 0 #0000; --segment: var(--app-ui-surface); --segment-foreground: var(--app-ui-text); --surface-shadow: var(--app-ui-surface-shadow); --overlay-shadow: var(--app-ui-overlay-shadow); } :root[data-theme="light"], [data-theme="light"] { color-scheme: light; /* Product semantics: light. */ --app-ui-canvas: #f8f7f6; --app-ui-sidebar: #f2efec; --app-ui-surface: #fdfcfa; --app-ui-surface-raised: #fdfcfa; --app-ui-surface-hover: #ecebe7; --app-ui-surface-active: #e4e1de; --app-ui-divider: #dfdddb; --app-ui-border: #dfdddb; --app-ui-control-border: #938c90; --app-ui-control-border-hover: #797277; --app-ui-text: #252329; --app-ui-text-secondary: #514d52; --app-ui-text-muted: #69656a; --app-ui-accent: #7c647c; --app-ui-accent-hover: #695369; --app-ui-accent-soft: #eee7ed; --app-ui-accent-soft-hover: #e6dce5; --app-ui-accent-foreground: #ffffff; --app-ui-focus: #7c647c; --app-ui-link: #654f68; /* Semantic status roles deliberately do not reuse brand pearl. */ --app-ui-success: #3b7153; --app-ui-success-hover: #32684c; --app-ui-success-soft: #e3eee7; --app-ui-warning: #865a1b; --app-ui-warning-hover: #744c17; --app-ui-warning-soft: #f4ead8; --app-ui-danger: #9d4338; --app-ui-danger-hover: #87372f; --app-ui-danger-soft: #f5e3df; --app-ui-info: #496e8c; --app-ui-info-soft: #e3edf4; --app-ui-status-foreground: #ffffff; --app-ui-surface-shadow: 0 12px 32px rgb(37 35 41 / 6%); --app-ui-overlay-shadow: 0 24px 60px rgb(37 35 41 / 16%); --app-ui-backdrop: rgb(37 35 41 / 44%); /* HeroUI semantic slots. */ --background: var(--app-ui-canvas); --background-secondary: var(--app-ui-sidebar); --background-tertiary: var(--app-ui-surface-hover); --background-inverse: var(--app-ui-text); --foreground: var(--app-ui-text); --muted: var(--app-ui-text-muted); --surface: var(--app-ui-surface); --surface-foreground: var(--app-ui-text); --surface-secondary: var(--app-ui-sidebar); --surface-secondary-foreground: var(--app-ui-text); --surface-tertiary: var(--app-ui-surface-hover); --surface-tertiary-foreground: var(--app-ui-text); --surface-hover: var(--app-ui-surface-hover); --overlay: var(--app-ui-surface-raised); --overlay-foreground: var(--app-ui-text); --backdrop: var(--app-ui-backdrop); --default: var(--app-ui-surface-hover); --default-hover: var(--app-ui-surface-active); --default-foreground: var(--app-ui-text); --default-soft: #f1efec; --default-soft-hover: #e8e5e1; --default-soft-foreground: var(--app-ui-text-secondary); --accent: var(--app-ui-accent); --accent-hover: var(--app-ui-accent-hover); --accent-foreground: var(--app-ui-accent-foreground); --accent-soft: var(--app-ui-accent-soft); --accent-soft-hover: var(--app-ui-accent-soft-hover); --accent-soft-foreground: #624d62; --success: var(--app-ui-success); --success-hover: var(--app-ui-success-hover); --success-foreground: var(--app-ui-status-foreground); --success-soft: var(--app-ui-success-soft); --success-soft-hover: #d9e8df; --success-soft-foreground: var(--app-ui-success); --warning: var(--app-ui-warning); --warning-hover: var(--app-ui-warning-hover); --warning-foreground: var(--app-ui-status-foreground); --warning-soft: var(--app-ui-warning-soft); --warning-soft-hover: #ecdfc8; --warning-soft-foreground: var(--app-ui-warning); --danger: var(--app-ui-danger); --danger-hover: var(--app-ui-danger-hover); --danger-foreground: var(--app-ui-status-foreground); --danger-soft: var(--app-ui-danger-soft); --danger-soft-hover: #edd7d2; --danger-soft-foreground: var(--app-ui-danger); --border: var(--app-ui-border); --border-secondary: var(--app-ui-control-border); --border-tertiary: var(--app-ui-control-border-hover); --separator: var(--app-ui-divider); --separator-secondary: var(--app-ui-border); --separator-tertiary: var(--app-ui-control-border); --focus: var(--app-ui-focus); --link: var(--app-ui-link); --field-background: var(--app-ui-control-bg); --field-foreground: var(--app-ui-text); --field-placeholder: var(--app-ui-text-muted); --field-border: var(--app-ui-control-border); --field-hover: #f7f4f1; --field-focus: var(--app-ui-control-bg-focus); --field-border-hover: var(--app-ui-control-border-hover); --field-border-focus: var(--app-field-focus-border); --field-shadow: 0 0 #0000; --segment: var(--app-ui-surface); --segment-foreground: var(--app-ui-text); --surface-shadow: var(--app-ui-surface-shadow); --overlay-shadow: var(--app-ui-overlay-shadow); } } @layer blocks { /* The legacy runner predates the HeroUI semantic namespace. Bridge only its intro, resume and active-flow roots so results, crisis UI and data-driven Luscher swatches retain their independent visual semantics. */ .app-test-intro, .app-test-resume, .app-test-runner:not(.app-test-runner_state_result) { --app-color-bg-elevated: var(--app-ui-surface); --app-color-bg-subtle: var(--app-ui-surface-hover); --app-color-bg-muted: var(--app-ui-surface-active); --app-color-text: var(--app-ui-text); --app-color-text-soft: var(--app-ui-text-secondary); --app-color-text-muted: var(--app-ui-text-muted); --app-color-border: color-mix(in srgb, var(--app-ui-divider) 76%, transparent); --app-color-border-strong: var(--app-ui-control-border); --app-color-accent: var(--app-ui-accent); --app-color-accent-strong: var(--app-ui-accent-hover); --app-color-accent-muted: var(--app-ui-accent-soft); --app-color-focus: var(--app-ui-focus); --app-button-primary-bg: var(--app-ui-accent); --app-button-primary-text: var(--app-ui-accent-foreground); --app-option-bg: color-mix(in srgb, var(--app-ui-surface) 92%, transparent); --app-option-bg-hover: var(--app-ui-surface-hover); --app-option-bg-selected: var(--app-ui-accent-soft); --app-option-border: color-mix(in srgb, var(--app-ui-divider) 76%, transparent); --app-option-border-hover: var(--app-ui-control-border); --app-option-border-selected: color-mix(in srgb, var(--app-ui-accent) 64%, var(--app-ui-control-border)); --app-progress-track: var(--app-ui-divider); --app-runner-text-soft: var(--app-ui-text-secondary); --app-runner-text-muted: var(--app-ui-text-muted); --app-type-color-meta: var(--app-ui-text-muted); --app-surface-raised: var(--app-ui-surface); --app-shell-raised-bg: var(--app-ui-surface); } /* Primary runner actions are the expressive brand moment. The selector is deliberately scoped and excludes disabled controls to preserve state. */ .app-test-intro .app-button_variant_primary:not(:disabled), .app-test-resume .app-button_variant_primary:not(:disabled), .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled) { border-color: transparent; background-color: var(--app-pearl-blush); background-image: var(--app-brand-gradient); background-repeat: no-repeat; color: var(--app-brand-gradient-foreground); } .app-test-intro .app-button_variant_secondary:not(:disabled), .app-test-resume .app-button_variant_secondary:not(:disabled), .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_secondary:not(:disabled) { border-color: transparent; background: var(--app-ui-surface); color: var(--app-ui-text-secondary); } .app-test-intro .app-button_variant_outline:not(:disabled), .app-test-resume .app-button_variant_outline:not(:disabled) { border-color: var(--app-ui-control-border); background: transparent; color: var(--app-ui-text); } @media (hover: hover) and (pointer: fine) { .app-test-intro .app-button_variant_primary:not(:disabled):hover, .app-test-resume .app-button_variant_primary:not(:disabled):hover, .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled):hover { border-color: transparent; background-image: var(--app-brand-gradient-hover); color: var(--app-brand-gradient-foreground); } .app-test-intro .app-button_variant_secondary:not(:disabled):hover, .app-test-resume .app-button_variant_secondary:not(:disabled):hover, .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_secondary:not(:disabled):hover { border-color: transparent; background: var(--app-ui-surface-hover); color: var(--app-ui-text); } .app-test-intro .app-button_variant_outline:not(:disabled):hover, .app-test-resume .app-button_variant_outline:not(:disabled):hover { border-color: var(--app-ui-control-border-hover); background: var(--app-ui-surface-hover); color: var(--app-ui-text); } } .app-test-intro .app-button_variant_primary:not(:disabled):active, .app-test-resume .app-button_variant_primary:not(:disabled):active, .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled):active { background-image: var(--app-brand-gradient-pressed); } .app-test-intro .app-button_variant_secondary:not(:disabled):active, .app-test-resume .app-button_variant_secondary:not(:disabled):active, .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_secondary:not(:disabled):active { background: var(--app-ui-surface-active); } .app-test-intro .app-button_variant_outline:not(:disabled):active, .app-test-resume .app-button_variant_outline:not(:disabled):active { border-color: var(--app-ui-control-border-hover); background: var(--app-ui-surface-active); } /* Keyboard focus uses one shared ring with no detached double outline. */ .app-test-intro .app-button:focus-visible, .app-test-resume .app-button:focus-visible, .app-test-runner:not(.app-test-runner_state_result) .app-button:focus-visible, .app-test-runner:not(.app-test-runner_state_result) .app-scale__button:focus-visible, .app-test-intro__expand:focus-visible { outline: 0; outline-offset: 0; box-shadow: var(--app-interactive-focus-ring); } .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:has(.app-checkbox__input:focus-visible) { outline: 0; box-shadow: var(--app-interactive-focus-ring); } /* Hover has higher selector weight in the legacy runner. Restate selected controls explicitly so pointing at them cannot visually unselect them. */ .app-test-runner:not(.app-test-runner_state_result) .app-scale__button_state_selected, .app-test-runner:not(.app-test-runner_state_result) .app-scale__button_state_selected:hover, .app-test-runner:not(.app-test-runner_state_result) .app-checkbox_state_checked, .app-test-runner:not(.app-test-runner_state_result) .app-checkbox_state_checked:hover { border-color: var(--app-option-border-selected); background: var(--app-option-bg-selected); color: var(--app-ui-text); } /* Some mobile browsers keep :hover after a tap. Restore the neutral state for coarse pointers so a tap never leaves an unselected control tinted. */ @media (hover: none), (pointer: coarse) { .app-test-runner:not(.app-test-runner_state_result) .app-scale__button:not(.app-scale__button_state_selected):hover, .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:not(.app-checkbox_state_checked):hover { border-color: var(--app-option-border); background: var(--app-option-bg); color: var(--app-ui-text-secondary); } .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:not(.app-checkbox_state_checked):hover .app-checkbox__tick-bg { stroke: var(--app-color-border-strong); } } .app-test-runner:not(.app-test-runner_state_result) .app-test-runner__progress-value { background-color: var(--app-pearl-blush); background-image: var(--app-brand-gradient); box-shadow: none; } .app-test-runner:not(.app-test-runner_state_result) .app-short-reminder, .app-test-runner:not(.app-test-runner_state_result) .app-time-window { border-color: transparent; background: var(--app-ui-accent-soft); color: color-mix(in srgb, var(--app-ui-accent) 82%, var(--app-ui-text-secondary)); } .app-test-runner:not(.app-test-runner_state_result) .app-time-window_state_changed { border-color: transparent; background: var(--app-ui-accent-soft-hover); color: color-mix(in srgb, var(--app-ui-accent) 90%, var(--app-ui-text)); } /* The primary action is the only default HeroUI control that receives the pearl gradient. Chips, links, focus and selection states use --accent as a solid color, so the semantic system remains predictable. */ .button--primary { background-color: var(--app-pearl-blush); background-image: var(--app-brand-gradient); background-repeat: no-repeat; color: var(--app-brand-gradient-foreground); } @media (hover: hover) { .button--primary:hover, .button--primary[data-hovered="true"] { background-image: var(--app-brand-gradient-hover); } } .button--primary:active, .button--primary[data-pressed="true"] { background-image: var(--app-brand-gradient-pressed); } .search-field { --app-search-field-min-height: 2.75rem; min-width: 0; } .search-field__group { min-height: var(--app-search-field-min-height); } @media (min-width: 640px) { .search-field { --app-search-field-min-height: 2.5rem; } } /* Theraphea fields keep one 1px boundary in their active state. HeroUI still owns interaction, validation and motion; only its default 2px field ring is cleared here so the focused border remains the single visible boundary. */ .input:focus, .input[data-focused="true"], .textarea:focus, .textarea[data-focused="true"], .input-group:has([data-slot="input-group-input"]:focus), .input-group:has([data-slot="input-group-textarea"]:focus), .search-field__group:focus-within:not([data-invalid="true"], [aria-invalid="true"]), .search-field__group[data-focus-within="true"]:not([data-invalid="true"], [aria-invalid="true"]), .select__trigger:focus, .select__trigger[data-focus="true"] { --tw-ring-shadow: 0 0 #0000; border-color: var(--app-field-focus-border); background-color: var(--app-ui-control-bg-focus); } .input[data-focus-visible="true"], .textarea[data-focus-visible="true"], .search-field__group:has([data-slot="search-field-input"][data-focus-visible="true"]):not([data-invalid="true"], [aria-invalid="true"]), .input-group:has([data-slot="input-group-input"][data-focus-visible="true"]), .input-group:has([data-slot="input-group-textarea"][data-focus-visible="true"]) { --tw-ring-shadow: 0 0 #0000; border-color: var(--app-field-focus-border); background-color: var(--app-ui-control-bg-focus); } .color-input-group:focus-within, .color-input-group[data-focus-within="true"], .date-input-group:focus-within, .date-input-group[data-focus-within="true"], .number-field__group:focus-within, .number-field__group[data-focus-within="true"], .search-field__group:focus-within, .search-field__group[data-focus-within="true"], .combo-box [data-slot="input"]:focus, .combo-box [data-slot="input"][data-focus] { --tw-ring-shadow: 0 0 #0000; } /* Keep browser autofill inside the same semantic field surface in both themes; individual account/auth screens no longer own this state. */ .input:autofill, .input:-webkit-autofill, .input:-webkit-autofill:hover, .textarea:autofill, .textarea:-webkit-autofill, .textarea:-webkit-autofill:hover { border-color: var(--app-ui-control-border); background-color: var(--app-ui-control-bg); color: var(--app-ui-text); -webkit-text-fill-color: var(--app-ui-text); caret-color: var(--app-ui-text); -webkit-box-shadow: 0 0 0 1000px var(--app-ui-control-bg) inset; box-shadow: 0 0 0 1000px var(--app-ui-control-bg) inset; } .input:autofill:focus, .input:autofill:focus-visible, .input:-webkit-autofill:focus, .input:-webkit-autofill:focus-visible, .textarea:autofill:focus, .textarea:autofill:focus-visible, .textarea:-webkit-autofill:focus, .textarea:-webkit-autofill:focus-visible { border-color: var(--app-field-focus-border); background-color: var(--app-ui-control-bg-focus); -webkit-text-fill-color: var(--app-ui-text); caret-color: var(--app-ui-text); -webkit-box-shadow: 0 0 0 1000px var(--app-ui-control-bg-focus) inset; box-shadow: 0 0 0 1000px var(--app-ui-control-bg-focus) inset; } .select__trigger[data-focus-visible="true"] { --tw-ring-shadow: 0 0 #0000; border-color: var(--app-field-focus-border); background-color: var(--app-ui-control-bg-focus); } .input[data-invalid="true"]:focus, .textarea[data-invalid="true"]:focus, .input-group[data-invalid="true"]:has([data-slot="input-group-input"]:focus), .input-group[data-invalid="true"]:has([data-slot="input-group-textarea"]:focus) { border-color: var(--app-ui-danger); } .input[data-invalid="true"][data-focus-visible="true"], .textarea[data-invalid="true"][data-focus-visible="true"], .input-group[data-invalid="true"]:has([data-slot="input-group-input"][data-focus-visible="true"]), .input-group[data-invalid="true"]:has([data-slot="input-group-textarea"][data-focus-visible="true"]) { border-color: var(--app-ui-danger); } .input-otp__slot[data-active="true"] { --tw-ring-shadow: 0 0 #0000; border-color: var(--app-field-focus-border); background-color: var(--app-ui-control-bg-focus); } .input-otp:has(.input-otp__input[data-focus-visible="true"]) .input-otp__slot[data-active="true"][data-invalid="true"] { border-color: var(--app-ui-danger); } .input-otp:has(.input-otp__input:focus-visible) .input-otp__slot[data-active="true"][data-invalid="true"] { border-color: var(--app-ui-danger); } @media (prefers-contrast: more) { .input:focus-visible, .textarea:focus-visible, .search-field__group:has([data-slot="search-field-input"]:focus-visible), .input-group:has([data-slot="input-group-input"]:focus-visible), .input-group:has([data-slot="input-group-textarea"]:focus-visible), .color-input-group:has([data-slot="color-input-group-input"]:focus-visible), .date-input-group:has([data-slot="date-input-group-segment"]:focus-visible), .number-field__group:has([data-slot="number-field-input"]:focus-visible), .combo-box [data-slot="input"]:focus-visible, .select__trigger:focus-visible, .input-otp:has(.input-otp__input:focus-visible) .input-otp__slot[data-active="true"] { outline: 2px solid var(--app-ui-focus); outline-offset: 0; } } @media (forced-colors: active) { .input:focus-visible, .textarea:focus-visible, .search-field__group:has([data-slot="search-field-input"]:focus-visible), .input-group:has([data-slot="input-group-input"]:focus-visible), .input-group:has([data-slot="input-group-textarea"]:focus-visible), .color-input-group:has([data-slot="color-input-group-input"]:focus-visible), .date-input-group:has([data-slot="date-input-group-segment"]:focus-visible), .number-field__group:has([data-slot="number-field-input"]:focus-visible), .combo-box [data-slot="input"]:focus-visible, .select__trigger:focus-visible, .input-otp:has(.input-otp__input:focus-visible) .input-otp__slot[data-active="true"] { outline: 2px solid Highlight; outline-offset: 0; box-shadow: none; } .button--primary { background-image: none; border: 1px solid ButtonText; } .app-test-intro .app-button_variant_primary:not(:disabled), .app-test-resume .app-button_variant_primary:not(:disabled), .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled) { border: 1px solid ButtonText; background-image: none; color: ButtonText; } .app-test-intro .app-button_variant_outline:not(:disabled), .app-test-resume .app-button_variant_outline:not(:disabled) { border: 1px solid ButtonText; background: Canvas; color: ButtonText; } .app-test-intro .app-button:focus-visible, .app-test-resume .app-button:focus-visible, .app-test-runner:not(.app-test-runner_state_result) .app-button:focus-visible, .app-test-runner:not(.app-test-runner_state_result) .app-scale__button:focus-visible, .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:has(.app-checkbox__input:focus-visible), .app-test-intro__expand:focus-visible { outline: 2px solid Highlight; outline-offset: 0; box-shadow: none; } } } /* ============================================================================ HeroUI v3 theme integration. GOAL: expose HeroUI semantic slots through Tailwind's --color-* namespace. This bridge contains aliases only; the Theraphea brand values live in the adjacent theraphea-theme.css layer. WHAT THIS FILE DOES: 1. The HeroUI default theme (variables.css with --accent, --success, --warning, --danger, --background, --foreground, --surface*, --border and all -hover/-soft/-foreground variants for both light and dark) is loaded directly from globals.css BEFORE this file. 2. This file does NOT set visual values for --accent / status / surfaces. 3. Exposes the Tailwind v4 --color-* namespace aliases pointing at the HeroUI slots, so HeroUI's utility classes (bg-accent, text-foreground, border-border) resolve to HeroUI's own palette. 4. theraphea-theme.css is loaded after this file and supplies Moonlit Pearl semantic values. Keeping that layer separate makes future re-skinning possible without changing the utility bridge. Loaded after HeroUI's default theme and before the Theraphea brand layer. ============================================================================ */ @layer tokens { /* Tailwind v4 color namespace aliases. Tailwind v4 generates utilities like `bg-accent`, `text-foreground`, `border-border` that resolve to `var(--color-)`. HeroUI v3 components apply these utilities, so the HeroUI slot values (defined by the default theme loaded above) must be exposed under the --color-* prefix. We do NOT redefine the values — aliases automatically follow the Moonlit Pearl values supplied by theraphea-theme.css. */ :root, :root[data-theme="dark"], :root[data-theme="light"], [data-theme="dark"], [data-theme="light"] { --color-background: var(--background); --color-foreground: var(--foreground); --color-foreground-muted: var(--muted); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-foreground: var(--accent-foreground); --color-accent-soft: var(--accent-soft); --color-accent-soft-hover: var(--accent-soft-hover); --color-accent-soft-foreground: var(--accent-soft-foreground); --color-default: var(--default); --color-default-hover: var(--default-hover); --color-default-foreground: var(--default-foreground); --color-default-soft: var(--default-soft); --color-default-soft-hover: var(--default-soft-hover); --color-default-soft-foreground: var(--default-soft-foreground); --color-success: var(--success); --color-success-hover: var(--success-hover); --color-success-foreground: var(--success-foreground); --color-success-soft: var(--success-soft); --color-success-soft-hover: var(--success-soft-hover); --color-success-soft-foreground: var(--success-soft-foreground); --color-danger: var(--danger); --color-danger-hover: var(--danger-hover); --color-danger-foreground: var(--danger-foreground); --color-danger-soft: var(--danger-soft); --color-danger-soft-hover: var(--danger-soft-hover); --color-danger-soft-foreground: var(--danger-soft-foreground); --color-warning: var(--warning); --color-warning-hover: var(--warning-hover); --color-warning-foreground: var(--warning-foreground); --color-warning-soft: var(--warning-soft); --color-warning-soft-hover: var(--warning-soft-hover); --color-warning-soft-foreground: var(--warning-soft-foreground); --color-surface: var(--surface); --color-surface-secondary: var(--surface-secondary); --color-surface-tertiary: var(--surface-tertiary); --color-overlay: var(--overlay); --color-backdrop: var(--backdrop); --color-border: var(--border); --color-separator: var(--separator); --color-focus: var(--focus); --color-link: var(--link); /* Border tokens used by HeroUI utility classes (border-border etc.) */ --color-border-secondary: var(--border-secondary); --color-border-tertiary: var(--border-tertiary); /* Background tonal tokens */ --color-background-secondary: var(--background-secondary); --color-background-tertiary: var(--background-tertiary); --color-background-inverse: var(--background-inverse); /* Surface foreground + segment (used by segmented controls) */ --color-surface-foreground: var(--surface-foreground); --color-segment: var(--segment); --color-segment-foreground: var(--segment-foreground); /* Field tokens (form input backgrounds) */ --color-field-background: var(--field-background); --color-field-foreground: var(--field-foreground); --color-field-placeholder: var(--field-placeholder); --color-field-border: var(--field-border); /* Muted text token */ --color-muted: var(--muted); /* Font family bridge. HeroUI Typography inherits its font from the CSS cascade (body font-family). Exposing --font-sans here makes the inheritance explicit and lets any HeroUI component that references --font-sans resolve to the project's Inter Tight stack. */ --font-sans: var(--app-font-family-base); } } /* ============================================================================ 02 - Site chrome (@layer blocks). Global frame (.app-app*), toast system (.app-toast*), site header (.app-header*), locale switcher, theme switch, burger control, site footer (.app-footer*). First `blocks` pass - later files override at equal specificity. Extracted verbatim from globals.css (commit 085838f); cascade order kept. ============================================================================ */ @layer blocks { .app-app { min-height: 100vh; background: var(--app-ui-canvas); } .app-app__main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: var(--app-space-12) 0 var(--app-space-16); } .app-toast-viewport { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 260; width: min(24rem, calc(100vw - 2rem)); display: grid; gap: 0.625rem; pointer-events: none; } /* The toast viewport floats outside .app-shell, so it consumes the shared Moonlit Pearl UI semantics directly. */ .app-toast { --app-toast-tone: var(--app-ui-text-secondary); --app-toast-hover-bg: var(--app-ui-surface-active); --app-toast-shadow: var(--app-ui-overlay-shadow); position: relative; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; padding: 0.875rem 3.75rem 0.875rem 0.875rem; border-radius: var(--app-radius-md); background: var(--app-ui-surface); color: var(--app-ui-text); box-shadow: var(--app-toast-shadow); animation: app-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; } .app-toast_tone_success { --app-toast-tone: var(--app-ui-success); } .app-toast_tone_error { --app-toast-tone: var(--app-ui-danger); } .app-toast_tone_warning { --app-toast-tone: var(--app-ui-warning); } .app-toast_tone_info { --app-toast-tone: var(--app-ui-info); } .app-toast__icon, .app-toast__close { display: inline-grid; place-items: center; border: 0; line-height: 1; } .app-toast__icon { width: 1.25rem; height: 1.25rem; border-radius: var(--app-radius-full); background: color-mix(in srgb, var(--app-toast-tone) 16%, transparent); color: var(--app-toast-tone); } .app-toast__icon svg { width: 0.875rem; height: 0.875rem; } .app-toast__body { min-width: 0; display: grid; gap: 0.25rem; } .app-toast__title { color: var(--app-ui-text); font-size: var(--app-font-size-sm); font-weight: var(--app-type-weight-bold); line-height: 1.3; } .app-toast__description { margin: 0; color: var(--app-ui-text-secondary); font-size: var(--app-font-size-xs); line-height: 1.45; overflow-wrap: anywhere; } /* Corner close control: the same 0.5rem inset from the toast's top and right edges, glyph centered in its own round hit area — no offset margins. The toast's right padding reserves this zone for every line. */ .app-toast__close { position: absolute; top: 0.375rem; right: 0.375rem; width: 2.75rem; height: 2.75rem; border-radius: var(--app-radius-full); background: transparent; color: var(--app-ui-text-muted); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .app-toast__close:hover { background: var(--app-toast-hover-bg); color: var(--app-ui-text); } .app-toast__close:focus-visible { outline: none; box-shadow: var(--app-interactive-focus-ring); } .app-toast__close svg { width: 0.875rem; height: 0.875rem; } @media (max-width: 620px) { .app-toast-viewport { right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); width: min(24rem, calc(100vw - 1.5rem)); } body:has(.app-account) .app-toast-viewport { top: calc(72px + 0.75rem + env(safe-area-inset-top)); bottom: auto; } .app-toast { padding-right: 3.75rem; } .app-toast__close { top: 0.375rem; right: 0.375rem; } } @media (prefers-reduced-motion: reduce) { .app-toast { animation: none; } } @keyframes app-toast-in { from { opacity: 0; transform: translate3d(0, 0.55rem, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } .app-header { --app-header-control-bg: var(--app-ui-surface-hover); --app-header-control-bg-hover: var(--app-ui-surface-active); --app-header-control-border: transparent; --app-header-control-text: var(--app-ui-text); --app-header-control-text-muted: var(--app-ui-text-muted); --app-header-surface: var(--app-ui-sidebar); --app-header-shadow: none; --app-header-blend-mode: normal; --app-header-blend-color: var(--app-ui-text); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; min-height: calc(var(--app-header-row-height, 74px) + var(--app-shell-edge-y, var(--app-space-3))); padding: var(--app-shell-edge-y, var(--app-space-3)) var(--app-shell-edge-x, var(--app-space-5-5)) 0; border-bottom: 0; background: var(--app-shell-bg, var(--app-ui-canvas)); color: var(--app-header-blend-color); mix-blend-mode: var(--app-header-blend-mode); } .app-header__inner { width: 100%; min-height: 64px; margin: 0 auto; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: clamp(16px, 2vw, 32px); padding-inline: var(--app-space-6); border-radius: var(--app-radius-lg); background: var(--app-header-surface); box-shadow: var(--app-header-shadow, none); color: var(--app-header-blend-color); } .app-header_editor .app-header__inner { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); gap: clamp(12px, 1.4vw, 24px); min-height: 64px; } .app-header-editor__side { display: flex; align-items: center; gap: var(--app-space-2); min-width: 0; } .app-header-editor__side_left { justify-self: start; } .app-header-editor__side_right { --app-header-switch-width: 5.875rem; --app-header-switch-height: 2.75rem; --app-header-switch-padding: 0.25rem; --app-header-switch-cell: calc((var(--app-header-switch-width) - var(--app-header-switch-padding) * 2) / 2); justify-self: end; } .app-header-editor__center { width: 100%; min-width: 0; justify-self: center; text-align: center; } .app-header-editor__title { width: 100%; margin: 0; max-width: min(42vw, 560px); overflow: hidden; color: var(--app-header-blend-color); text-overflow: ellipsis; white-space: nowrap; } .app-header-editor__placeholder-control { width: var(--app-panel-toggle-size, 34px); height: var(--app-panel-toggle-size, 34px); } .app-header-editor__save-status[data-empty="true"] { display: none; } .app-header-editor__theme { display: inline-flex; align-items: center; flex: 0 0 auto; } /* The public-page action is direct on wide screens and moves into the overflow menu when the direct label is hidden. Never show both. */ .app-header-editor__more { display: none; } .app-header-editor__save { display: inline-flex; margin-left: var(--app-space-1); } .app-header__brand { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; min-width: 0; color: var(--app-header-blend-color); } .app-header__brand:focus-visible { border-radius: var(--app-radius-xs); outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-header__logo { width: clamp(112px, 14vw, 146px); display: block; flex: 0 0 auto; aspect-ratio: 41 / 13; background: var(--app-brand-logo-gradient); mask: url("/brand/theraphea-logo.svg") center / contain no-repeat; -webkit-mask: url("/brand/theraphea-logo.svg") center / contain no-repeat; } .app-header__nav { justify-self: center; margin-left: 0; color: var(--app-header-blend-color); } .app-navigation-menu__highlight-container { position: relative; display: inline-block; } .app-navigation-menu__highlight { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; will-change: transform, width, height; } .app-navigation-menu__list { position: relative; z-index: 1; } .app-header__nav-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; gap: var(--app-space-2); } .app-header__link { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 9px 11px; border-radius: var(--app-radius-xs); color: color-mix(in srgb, var(--app-header-blend-color) 86%, transparent); font-size: var(--app-font-size-sm); font-weight: var(--app-type-weight-normal); line-height: var(--app-type-body-sm-line-height); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast); } .app-header__link-label { position: relative; z-index: 1; } .app-header__link:hover, .app-header__link:focus-visible { background: var(--app-header-control-bg-hover); color: var(--app-header-blend-color); } .app-header__link[data-active="true"] { background: var(--app-header-control-bg); color: var(--app-header-blend-color); } .app-header__link:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-header__actions { --app-header-switch-width: 5.875rem; --app-header-switch-height: 2.75rem; --app-header-switch-padding: 0.25rem; --app-header-switch-cell: calc((var(--app-header-switch-width) - var(--app-header-switch-padding) * 2) / 2); display: flex; align-items: center; justify-self: end; gap: 0.5rem; } .app-header-account { width: 12rem; min-width: 12rem; max-width: 12rem; height: 2.75rem; display: grid; grid-template-columns: 2.125rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem; border: 0; border-radius: var(--app-radius-full); background: var(--app-header-control-bg); color: var(--app-header-control-text); cursor: pointer; font: inherit; line-height: 1; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .app-header-account_state_loading { pointer-events: none; } .app-header-account__avatar { width: 2.125rem; height: 2.125rem; min-width: 2.125rem; display: inline-grid; place-items: center; overflow: hidden; border-radius: var(--app-radius-full) !important; background: var(--app-header-control-bg-hover) !important; color: var(--app-header-control-text); } .app-header-account__avatar :where(img, [data-slot="avatar-fallback"]) { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .app-header-account__avatar :where([data-slot="avatar-fallback"]) { background: transparent !important; } .app-header-account__avatar-fallback { width: 100%; height: 100%; display: inline-grid; place-items: center; color: var(--app-header-control-text); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-bold); line-height: 1; } .app-header-account_state_guest .app-header-account__avatar-fallback { background: transparent; } .app-header-account__copy { min-width: 0; display: grid; gap: 0.125rem; } .app-header-account__title, .app-header-account__subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-header-account__title { color: var(--app-header-control-text); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-bold); line-height: 1.15; } .app-header-account__subtitle { color: var(--app-header-control-text-muted); font-size: 0.6875rem; font-weight: var(--app-type-weight-medium); line-height: 1.15; } .app-header-account__chevron { flex: 0 0 auto; color: var(--app-header-control-text-muted); transition: transform var(--app-motion-fast); } .app-header-account[aria-expanded="true"] .app-header-account__chevron { transform: rotate(180deg); } .app-header-account__skeleton-avatar { border-radius: var(--app-radius-full); } .app-header-account__skeleton-avatar, .app-header-account__skeleton-line { background: color-mix(in srgb, var(--app-header-control-text) 10%, transparent); } .app-header-account__skeleton-line { display: block; height: 0.4375rem; border-radius: var(--app-radius-full); } .app-header-account__skeleton-line_title { width: 4.75rem; } .app-header-account__skeleton-line_subtitle { width: 6.25rem; } .app-header-account-popover { min-width: 15rem; padding: 0.375rem; border-radius: var(--app-radius-md); background: var(--app-ui-surface); color: var(--app-ui-text); box-shadow: var(--app-ui-overlay-shadow); } .app-header-account-menu { min-width: 14.25rem; } .app-header-account-menu__link, .app-header-account-menu__action { width: 100%; min-height: 2.5rem; display: flex; align-items: center; gap: 0.625rem; color: inherit; text-decoration: none; } .app-header-account-menu__link svg, .app-header-account-menu__action svg { flex: 0 0 auto; color: var(--app-ui-text-muted); } .app-header-account-menu__sign-out { color: var(--app-ui-danger); } .app-header-account-menu__sign-out svg { color: currentColor; } .app-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; } .app-locale-switcher { position: relative; display: inline-block; width: var(--app-header-switch-width); height: var(--app-header-switch-height); } .app-locale-switcher__toggle, .app-theme-switch { background: var(--app-header-control-bg); } .app-locale-switcher__toggle { position: relative; display: inline-grid; grid-template-columns: var(--app-header-switch-cell) var(--app-header-switch-cell); align-items: center; width: 100%; height: 100%; padding: var(--app-header-switch-padding); border: 0; border-radius: var(--app-radius-full); color: var(--app-header-control-text-muted); cursor: pointer; font: inherit; line-height: 1; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-locale-switcher__toggle:hover, .app-locale-switcher__toggle:focus-visible, .app-theme-switch:hover, .app-theme-switch:focus-visible { background: var(--app-header-control-bg-hover); color: var(--app-header-control-text); } .app-locale-switcher__toggle:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-locale-switcher__toggle:active { transform: scale(var(--app-interactive-press-scale)); } .app-locale-switcher__label { position: relative; z-index: 2; display: inline-grid; place-items: center; width: var(--app-header-switch-cell); height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2); min-width: 0; min-height: 0; font-size: var(--app-type-caption-size); font-weight: 650; line-height: 1; letter-spacing: 0.01em; pointer-events: none; transition: color var(--app-motion-fast), opacity var(--app-motion-fast); } .app-locale-switcher__thumb, .app-theme-switch__thumb { border-radius: var(--app-radius-full); background: var(--app-ui-control-selected-bg); box-shadow: none; } .app-locale-switcher__thumb { position: absolute; z-index: 1; top: var(--app-header-switch-padding); left: var(--app-header-switch-padding); width: var(--app-header-switch-cell); height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2); --app-locale-thumb-transform: translateX(0); transform: var(--app-locale-thumb-transform); transition: transform var(--app-motion-base); } .app-locale-switcher[data-locale="en"] .app-locale-switcher__thumb, .app-locale-switcher[data-motion="en"] .app-locale-switcher__thumb { --app-locale-thumb-transform: translateX(var(--app-header-switch-cell)); transform: var(--app-locale-thumb-transform); } .app-locale-switcher[data-motion="ru"] .app-locale-switcher__thumb { --app-locale-thumb-transform: translateX(0); transform: var(--app-locale-thumb-transform); } .app-locale-switcher:not([data-motion])[data-locale="ru"] .app-locale-switcher__label[data-locale="ru"], .app-locale-switcher:not([data-motion])[data-locale="en"] .app-locale-switcher__label[data-locale="en"], .app-locale-switcher[data-motion="ru"] .app-locale-switcher__label[data-locale="ru"], .app-locale-switcher[data-motion="en"] .app-locale-switcher__label[data-locale="en"] { color: var(--app-ui-control-selected-foreground); } .app-locale-switcher__trigger, .app-locale-switcher__menu { display: none; } .app-locale-switcher__trigger { align-items: center; justify-content: center; border: 0; border-radius: var(--app-radius-full); background: var(--app-header-control-bg); color: var(--app-header-control-text); cursor: pointer; font: inherit; font-size: var(--app-type-caption-size); font-weight: 650; line-height: 1; letter-spacing: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-locale-switcher__trigger:hover, .app-locale-switcher__trigger:focus-visible, .app-locale-switcher__trigger[aria-expanded="true"] { background: var(--app-header-control-bg-hover); color: var(--app-header-control-text); } .app-locale-switcher__trigger:active { transform: scale(var(--app-interactive-press-scale)); } .app-locale-switcher__trigger-label { display: none; } .app-locale-switcher__trigger-label:first-child { display: inline; } .app-locale-switcher[data-locale] .app-locale-switcher__trigger-label { display: none; } .app-locale-switcher[data-locale="ru"] .app-locale-switcher__trigger-label[data-locale="ru"], .app-locale-switcher[data-locale="en"] .app-locale-switcher__trigger-label[data-locale="en"] { display: inline; } .app-locale-switcher__trigger:focus-visible, .app-locale-switcher__option:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-locale-switcher__menu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 90; min-width: min(8.25rem, calc(100vw - 2rem)); padding: 0.25rem; border: 0; border-radius: 1rem; background: var(--app-ui-surface); box-shadow: var(--app-ui-overlay-shadow); transform-origin: top right; } .app-locale-switcher__option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 2.25rem; padding: 0 0.65rem; border: 0; border-radius: var(--app-radius-md); background: transparent; color: var(--app-header-control-text-muted); cursor: pointer; font: inherit; font-size: var(--app-type-caption-size); font-weight: 620; line-height: 1; text-align: left; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-locale-switcher__option:hover, .app-locale-switcher__option:focus-visible { background: var(--app-header-control-bg-hover); color: var(--app-header-control-text); } .app-locale-switcher__option:active { transform: scale(var(--app-interactive-press-scale)); } .app-locale-switcher[data-locale="ru"] .app-locale-switcher__option[data-locale="ru"], .app-locale-switcher[data-locale="en"] .app-locale-switcher__option[data-locale="en"] { background: var(--app-ui-control-selected-bg); color: var(--app-ui-control-selected-foreground); } .app-locale-switcher__option-name { color: color-mix(in srgb, currentColor 72%, transparent); font-size: var(--app-type-caption-size); font-weight: 560; } .app-theme-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; width: var(--app-header-switch-width); height: var(--app-header-switch-height); padding: var(--app-header-switch-padding); border: 0; border-radius: var(--app-radius-full); color: var(--app-header-control-text-muted); cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-theme-switch:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-theme-switch:active:not(:disabled) { transform: scale(var(--app-interactive-press-scale)); } .app-theme-switch:disabled { cursor: default; opacity: 1; } .app-theme-switch__icon { position: relative; z-index: 2; display: inline-grid; place-items: center; justify-self: center; align-self: center; width: var(--app-header-switch-cell); height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2); color: currentColor; line-height: 0; pointer-events: none; transition: color var(--app-motion-fast); } .app-theme-switch__icon svg { display: block; width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); overflow: visible; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-theme-switch__icon :where(path, circle) { stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-theme-switch__sun-ray { stroke-dasharray: 1; stroke-dashoffset: 0; } .app-theme-switch__moon-crescent { stroke-dasharray: 1; stroke-dashoffset: 0; } .app-theme-switch__sun-ray_0 { --app-sun-ray-index: 0; } .app-theme-switch__sun-ray_1 { --app-sun-ray-index: 1; } .app-theme-switch__sun-ray_2 { --app-sun-ray-index: 2; } .app-theme-switch__sun-ray_3 { --app-sun-ray-index: 3; } .app-theme-switch__sun-ray_4 { --app-sun-ray-index: 4; } .app-theme-switch__sun-ray_5 { --app-sun-ray-index: 5; } .app-theme-switch__sun-ray_6 { --app-sun-ray-index: 6; } .app-theme-switch__sun-ray_7 { --app-sun-ray-index: 7; } .app-theme-switch__thumb { position: absolute; z-index: 1; top: var(--app-header-switch-padding); left: var(--app-header-switch-padding); width: var(--app-header-switch-cell); height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2); --app-theme-thumb-transform: translateX(0); transform: var(--app-theme-thumb-transform); transition: transform var(--app-motion-base), background var(--app-motion-fast); } .app-theme-switch[data-active-theme="light"] .app-theme-switch__thumb, .app-theme-switch[data-motion="light"] .app-theme-switch__thumb, :root[data-theme="light"] .app-theme-switch:not([data-hydrated="true"]) .app-theme-switch__thumb { --app-theme-thumb-transform: translateX(var(--app-header-switch-cell)); transform: var(--app-theme-thumb-transform); } .app-theme-switch[data-motion="dark"] .app-theme-switch__thumb { --app-theme-thumb-transform: translateX(0); transform: var(--app-theme-thumb-transform); } .app-theme-switch:not([data-motion])[data-active-theme="dark"] .app-theme-switch__icon_theme_dark, .app-theme-switch:not([data-motion])[data-active-theme="light"] .app-theme-switch__icon_theme_light, .app-theme-switch[data-motion="dark"] .app-theme-switch__icon_theme_dark, .app-theme-switch[data-motion="light"] .app-theme-switch__icon_theme_light, :root[data-theme="dark"] .app-theme-switch:not([data-hydrated="true"]) .app-theme-switch__icon_theme_dark, :root[data-theme="light"] .app-theme-switch:not([data-hydrated="true"]) .app-theme-switch__icon_theme_light { color: var(--app-ui-control-selected-foreground); } @media (prefers-reduced-motion: no-preference) { .app-theme-switch[data-motion="light"] .app-theme-switch__thumb { animation: app-theme-thumb-to-light var(--app-motion-base) both; } .app-theme-switch[data-motion="dark"] .app-theme-switch__thumb { animation: app-theme-thumb-to-dark var(--app-motion-base) both; } .app-theme-switch[data-motion="light"] .app-theme-switch__icon_theme_light svg { animation: app-theme-sun-orbit 680ms cubic-bezier(0.16, 1, 0.3, 1); } .app-theme-switch[data-motion="light"] .app-theme-switch__sun-core { animation: app-theme-sun-core 560ms cubic-bezier(0.16, 1, 0.3, 1); } .app-theme-switch[data-motion="light"] .app-theme-switch__sun-ray { animation: app-theme-sun-ray-grow 560ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--app-sun-ray-index) * 22ms); } .app-theme-switch[data-motion="dark"] .app-theme-switch__icon_theme_dark svg { animation: app-theme-moon-settle 620ms cubic-bezier(0.16, 1, 0.3, 1); } .app-theme-switch[data-motion="dark"] .app-theme-switch__moon-crescent { animation: app-theme-moon-reveal 560ms cubic-bezier(0.16, 1, 0.3, 1); } } @keyframes app-theme-thumb-to-light { from { transform: translateX(0); } to { transform: translateX(var(--app-header-switch-cell)); } } @keyframes app-theme-thumb-to-dark { from { transform: translateX(var(--app-header-switch-cell)); } to { transform: translateX(0); } } @keyframes app-theme-sun-orbit { 0% { opacity: 0.82; transform: rotate(-10deg) scale(0.98); } 64% { opacity: 1; transform: rotate(7deg) scale(1.025); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } @keyframes app-theme-sun-core { 0% { opacity: 0.64; transform: scale(0.88); } 58% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes app-theme-sun-ray-grow { 0% { opacity: 0.12; stroke-dashoffset: 1; transform: scale(0.68); } 62% { opacity: 1; stroke-dashoffset: 0; transform: scale(1.08); } 100% { opacity: 1; stroke-dashoffset: 0; transform: scale(1); } } @keyframes app-theme-moon-settle { 0% { opacity: 0.78; transform: translateY(0.045rem) rotate(5deg) scale(0.96); } 64% { opacity: 1; transform: translateY(-0.018rem) rotate(-2deg) scale(1.035); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } } @keyframes app-theme-moon-reveal { 0% { opacity: 0.62; stroke-dashoffset: 0.58; transform: translateX(0.025rem); } 100% { opacity: 1; stroke-dashoffset: 0; transform: translateX(0); } } .app-burger { width: 2.75rem; height: 2.75rem; display: none; place-items: center; position: relative; border: 0; border-radius: 50%; background: var(--app-header-control-bg); color: var(--app-header-control-text); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color var(--app-motion-fast), background var(--app-motion-fast), transform var(--app-motion-fast); } .app-burger:hover { background: var(--app-header-control-bg-hover); } .app-burger:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-burger:active { transform: scale(var(--app-interactive-icon-press-scale)); } .app-burger__line { position: absolute; width: 17px; height: 1.5px; border-radius: var(--app-radius-full); background: currentColor; transition: transform var(--app-motion-icon), opacity var(--app-motion-panel-fade); } .app-burger__line_position_top { transform: translateY(-6px); } .app-burger__line_position_middle { transform: translateY(0); } .app-burger__line_position_bottom { transform: translateY(6px); } .app-burger_state_open .app-burger__line_position_top { transform: rotate(45deg); } .app-burger_state_open .app-burger__line_position_middle { opacity: 0; transform: scaleX(0.35); } .app-burger_state_open .app-burger__line_position_bottom { transform: rotate(-45deg); } @media (max-width: 1040px) { .app-header-account { width: 2.75rem; min-width: 2.75rem; max-width: 2.75rem; grid-template-columns: 1fr; gap: 0; padding: 0.3125rem; } .app-header-account_state_guest .app-header-account__avatar { background: transparent; } .app-header-account__copy, .app-header-account__chevron { display: none; } } @media (max-width: 1180px) { .app-header_editor .app-header__inner { grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); padding-inline: var(--app-space-3); gap: var(--app-space-2); } .app-header-editor__side_left { gap: var(--app-space-1); } .app-header-editor__title { max-width: 100%; } .app-header-editor__links { display: none; } .app-header-editor__more { display: inline-flex; } } @media (max-width: 959px) { .app-burger { display: inline-grid; } } @media (max-width: 620px) { .app-header_editor .app-header__inner { min-height: 58px; } .app-header-editor__side_left .app-studio__chip { display: none; } .app-header-editor__history { display: none; } } .app-footer { --app-color-text: var(--app-ui-text); --app-color-text-soft: var(--app-ui-text-secondary); --app-color-text-muted: var(--app-ui-text-muted); --app-color-accent: var(--app-ui-accent); --app-color-focus: var(--app-ui-focus); margin-top: clamp(32px, 5vw, 64px); background: transparent; } .app-footer__inner { width: min(1440px, calc(100% - 80px)); margin: 0 auto; padding: 0 0 var(--app-space-4); } .app-footer__surface { background: var(--app-ui-sidebar); border: 0; border-radius: clamp(18px, 2vw, 24px); padding: clamp(24px, 3vw, 36px); box-shadow: none; } .app-footer__top { display: grid; grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2.15fr); gap: clamp(36px, 5vw, 68px); align-items: start; padding-bottom: clamp(20px, 2.5vw, 28px); } .app-footer__brand-group { display: grid; gap: var(--app-space-4); align-content: start; min-width: 0; } .app-footer__brand { width: clamp(132px, 12vw, 168px); display: block; } .app-footer__logo { width: 100%; display: block; aspect-ratio: 41 / 13; background: var(--app-brand-logo-gradient); mask: url("/brand/theraphea-logo.svg") center / contain no-repeat; -webkit-mask: url("/brand/theraphea-logo.svg") center / contain no-repeat; } .app-footer__description { max-width: 30ch; margin: 0; color: var(--app-color-text-soft); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .app-footer__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); align-items: start; } .app-footer__column { display: grid; gap: var(--app-space-2-5); align-content: start; min-width: 0; } .app-footer__title { margin: 0; color: var(--app-color-text); font-size: var(--app-type-body-sm-size); font-weight: var(--app-type-weight-semibold); line-height: var(--app-type-body-sm-line-height); } .app-footer__column-description { max-width: 22ch; margin: 0; color: var(--app-color-text-soft); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .app-footer__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .app-footer__column_navigation .app-footer__list { grid-template-columns: 1fr; } .app-footer__item { min-width: 0; } .app-footer__link { width: fit-content; max-width: 100%; min-height: 32px; display: inline-flex; align-items: center; justify-content: flex-start; padding: var(--app-space-1) 0; color: var(--app-color-text-soft); font-size: var(--app-type-body-sm-size); font-weight: var(--app-type-weight-normal); line-height: var(--app-type-body-sm-line-height); overflow-wrap: anywhere; transition: color var(--app-motion-fast), opacity var(--app-motion-fast); } .app-footer__link:hover { color: var(--app-color-text); opacity: 1; } .app-footer__brand:focus-visible, .app-footer__link:focus-visible { border-radius: var(--app-radius-xs); outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-footer__bottom { margin-top: clamp(20px, 3vw, 32px); } .app-footer__copyright { margin: 0; color: var(--app-color-text-muted); font-size: var(--app-type-caption-size); line-height: var(--app-type-caption-line-height); } @media (prefers-reduced-motion: reduce) { .app-header__link, .app-locale-switcher__toggle, .app-locale-switcher__trigger, .app-locale-switcher__option, .app-theme-switch, .app-burger, .app-header-account, .app-header-account__chevron, .app-locale-switcher__thumb, .app-theme-switch__thumb, .app-footer__link { transition: none; } } } /* ============================================================================ 03 - Shared page primitives (@layer blocks). Generic page scaffold (.app-page*), section headers (.app-section*), base button (.app-button*). Extracted verbatim from globals.css (commit 085838f); cascade order kept. ============================================================================ */ @layer blocks { /* Project typography roles over HeroUI v3. Native headings/body elements may keep their BEM selectors, while every HeroUI Typography call resolves to this same fixed product scale and three-tone hierarchy. */ .typography--h1 { color: var(--app-type-color-heading); font-size: var(--app-type-heading-1-size); line-height: var(--app-type-heading-line-height); } .typography--h2 { color: var(--app-type-color-heading); font-size: var(--app-type-heading-2-size); line-height: 1.2; } .typography--h3 { color: var(--app-type-color-heading); font-size: var(--app-type-heading-3-size); line-height: 1.25; } .typography--h4 { color: var(--app-type-color-heading); font-size: var(--app-type-heading-4-size); line-height: 1.3; } .typography--h5 { color: var(--app-type-color-heading); font-size: var(--app-type-lead-size); line-height: 1.35; } .typography--h6 { color: var(--app-type-color-heading); font-size: var(--app-type-body-size); line-height: 1.4; } .typography--body { font-size: var(--app-type-body-size); line-height: var(--app-type-body-line-height); } .typography--body-sm { font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .typography--body-xs { font-size: var(--app-type-caption-size); line-height: var(--app-type-caption-line-height); } .typography--color-default { color: var(--app-type-color-heading); } .typography--body.typography--color-default, .typography--body-sm.typography--color-default { color: var(--app-type-color-body); } .typography--body-xs.typography--color-default, .typography--color-muted { color: var(--app-type-color-meta); } .typography-prose { color: var(--app-type-color-body); } .typography-prose :where(h1, h2, h3, h4, h5, h6, strong) { color: var(--app-type-color-heading); } .app-page { display: grid; gap: var(--app-space-10); min-width: 0; } .app-page > * { min-width: 0; } .app-page_kind_test { gap: var(--app-space-8); } .app-page_kind_result { gap: var(--app-space-8); } .app-section { display: grid; gap: var(--app-space-5); } .app-section__header { display: grid; gap: var(--app-space-2); max-width: 720px; } .app-section__title { margin: 0; color: var(--app-color-text); font-size: var(--app-font-size-xl); font-weight: 650; } .app-section__lead { margin: 0; color: var(--app-color-text-muted); } .app-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border: 1px solid var(--app-color-border); border-radius: var(--app-radius-sm); cursor: pointer; font-size: var(--app-font-size-sm); font-weight: var(--app-type-weight-semibold); transition: border-color var(--app-motion-fast), background var(--app-motion-fast), color var(--app-motion-fast); } .app-button:hover { border-color: var(--app-color-border-strong); } .app-button:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .app-button_variant_primary { border-color: var(--app-button-primary-bg); background: var(--app-button-primary-bg); color: var(--app-button-primary-text); } .app-button_variant_secondary { background: var(--app-color-bg-elevated); color: var(--app-color-text); } .app-button_variant_outline { border-color: var(--app-color-border-strong); background: transparent; color: var(--app-color-text); } .app-button_variant_ghost { background: transparent; color: var(--app-color-text-soft); } .app-motion-highlight { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; } .app-motion-accordion { width: 100%; min-width: 0; } .app-motion-accordion__list { display: flex; flex-direction: column; gap: var(--app-motion-accordion-gap, 10px); min-width: 0; padding: var(--app-motion-accordion-list-padding, var(--app-space-3)); border-radius: var(--app-motion-accordion-list-radius, var(--app-radius-lg)); } .app-motion-accordion__item { min-width: 0; overflow: hidden; border: var(--app-motion-accordion-item-border, 0); border-radius: var(--app-motion-accordion-item-radius, var(--app-radius-md)); background: var(--app-motion-accordion-item-bg, var(--app-color-bg-elevated)); color: var(--app-motion-accordion-text, var(--app-color-text)); box-shadow: var(--app-motion-accordion-shadow, none); } .app-motion-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--app-motion-accordion-trigger-gap, var(--app-space-4)); width: 100%; min-height: var(--app-motion-accordion-trigger-min-height, 64px); padding: var(--app-motion-accordion-trigger-padding, 20px 28px); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .app-motion-accordion__trigger:hover, .app-motion-accordion__trigger:active { background: transparent; } .app-motion-accordion__trigger:focus-visible { outline: 0; box-shadow: var(--app-motion-accordion-focus-ring, inset 0 0 0 2px var(--app-ui-focus)); } .app-motion-accordion__item-head { display: flex; align-items: stretch; gap: var(--app-motion-accordion-meta-gap, var(--app-space-2)); } .app-motion-accordion .app-motion-accordion__heading { flex: 1 1 auto; min-width: 0; margin: 0; color: inherit; font: inherit; } .app-motion-accordion__question { min-width: 0; color: inherit; font-size: var(--app-motion-accordion-question-size, clamp(1.2rem, 1.6vw, 1.3rem)); font-weight: var(--app-motion-accordion-question-weight, 560); line-height: var(--app-motion-accordion-question-line-height, 1.22); overflow-wrap: anywhere; } .app-motion-accordion__meta { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; } .app-motion-accordion__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--app-motion-accordion-icon-size, 48px); width: var(--app-motion-accordion-icon-size, 48px); height: var(--app-motion-accordion-icon-size, 48px); color: var(--app-motion-accordion-icon-color, currentColor); } .app-motion-accordion__icon svg { display: block; flex: 0 0 auto; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .app-motion-accordion__panel { min-width: 0; } .app-motion-accordion__body { min-width: 0; padding: var(--app-motion-accordion-body-padding, 0 28px 28px); } .app-motion-accordion__answer { min-width: 0; color: var(--app-motion-accordion-answer-color, var(--app-color-text-soft)); font-size: var(--app-motion-accordion-answer-size, var(--app-font-size-base)); font-weight: var(--app-motion-accordion-answer-weight, 420); line-height: var(--app-motion-accordion-answer-line-height, 1.68); } .app-motion-accordion__answer > :first-child { margin-top: 0; } .app-motion-accordion__answer > :last-child { margin-bottom: 0; } /* Editorial FAQ skin shared by SEO content and the Article Studio canvas. Keep the visual contract here so both surfaces cannot drift independently. */ .app-motion-accordion_variant-editorial { --app-motion-accordion-list-padding: 0; --app-motion-accordion-list-radius: var(--app-radius-lg); --app-motion-accordion-item-radius: var(--app-radius-md); --app-motion-accordion-item-bg: var(--app-seo-surface-1); --app-motion-accordion-item-border: 1px solid var(--app-seo-border); --app-motion-accordion-text: color-mix(in srgb, var(--app-seo-text) 94%, transparent); --app-motion-accordion-trigger-min-height: 3.5rem; --app-motion-accordion-trigger-padding: 1rem 1.125rem; --app-motion-accordion-question-size: var(--app-type-lead-size); --app-motion-accordion-question-weight: var(--app-type-weight-bold); --app-motion-accordion-question-line-height: 1.24; --app-motion-accordion-icon-size: 44px; --app-motion-accordion-answer-color: var(--app-seo-text); --app-motion-accordion-answer-size: var(--app-type-body-sm-size); --app-motion-accordion-answer-line-height: var(--app-type-body-sm-line-height); --app-motion-accordion-body-padding: 0 1.125rem 1rem; } .app-motion-accordion_variant-editorial .app-motion-accordion__answer { display: grid; gap: 0.75rem; } .app-motion-accordion_variant-editorial .app-motion-accordion__answer p { margin: 0; } /* Shared table contract. HeroUI owns interactive data tables; native tables (articles and SEO content) use this frame so their hierarchy, density and responsive overflow cannot drift into a separate visual language. */ /* Keep visible breathing room between InputGroup separators and typed text. */ .app-input-group--spaced:has([data-slot="input-group-prefix"]) .input-group__input { padding-inline-start: var(--app-space-3); } .app-input-group--spaced:has([data-slot="input-group-suffix"]) .input-group__input { padding-inline-end: var(--app-space-3); } .app-data-table-frame { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; border: 1px solid var(--app-data-table-border, var(--app-shell-border, var(--app-ui-divider))); border-radius: var(--app-radius-lg); background: var(--app-data-table-frame-bg, var(--app-shell-chip-bg, var(--app-ui-surface-hover))); scrollbar-width: thin; scrollbar-color: var(--app-data-table-border, var(--app-shell-border, var(--app-ui-divider))) transparent; } .app-data-table-frame .app-data-table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; color: var(--app-data-table-text, var(--app-shell-text-soft, var(--app-ui-text-secondary))); font-size: var(--app-type-body-sm-size); line-height: var(--app-type-body-sm-line-height); } .app-data-table-frame .app-data-table :is(th, td) { padding: var(--app-space-3) var(--app-space-4); text-align: left; vertical-align: middle; } .app-data-table-frame .app-data-table thead th { padding-block: var(--app-space-2-5); border-bottom: 0; background: transparent; color: var(--app-data-table-muted, var(--app-shell-text-muted, var(--app-ui-text-muted))); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-medium); } .app-data-table-frame .app-data-table tbody :is(th, td) { border-bottom: 1px solid color-mix(in srgb, var(--app-data-table-border, var(--app-shell-border, var(--app-ui-divider))) 58%, transparent); background: var(--app-data-table-body-bg, var(--app-shell-raised-bg, var(--app-ui-surface))); color: var(--app-data-table-text, var(--app-shell-text-soft, var(--app-ui-text-secondary))); } .app-data-table-frame .app-data-table tbody tr:last-child :is(th, td) { border-bottom: 0; } .app-data-table-frame .app-data-table :is(th, td).app-data-table__numeric { overflow-wrap: normal; white-space: nowrap; font-variant-numeric: tabular-nums; } .app-data-table__id { color: var(--app-data-table-muted, var(--app-shell-text-muted, var(--app-ui-text-muted))); white-space: nowrap; } .app-data-table__empty, .app-data-table__meta { margin: 0; color: var(--app-data-table-muted, var(--app-shell-text-muted, var(--app-ui-text-muted))); } .app-data-table__meta { font-size: var(--app-type-caption-size); } .app-data-table__empty { display: block; padding: var(--app-space-6) var(--app-space-4); font-size: var(--app-type-body-sm-size); text-align: center; white-space: normal; } /* Canonical HeroUI tables wrap phrases at spaces, not inside words. Narrow layouts use Table.ScrollContainer for horizontal overflow. */ :where(.table__column, .table__cell) { overflow-wrap: normal; word-break: normal; } } /* ============================================================================ 11 - Legacy site-wide responsive pass #2 (@layer blocks). Footer breakpoint stack, runner main-column mobile compaction, and scale/actions/button mobile sizing. Cross-zone like 05 - kept as an ordered pass. Extracted verbatim from globals.css (commit 085838f); cascade order kept. ============================================================================ */ @layer blocks { @media (max-width: 1180px) { .app-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .app-app__main { width: min(100% - 40px, 720px); } .app-footer__inner { width: min(100% - 40px, 720px); padding-top: 0; } .app-footer__top { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; } .app-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-footer__column_navigation { grid-column: 1 / -1; } .app-footer__column_navigation .app-footer__list { grid-template-columns: 1fr; } .app-test-runner { grid-template-columns: 1fr; } } @media (max-width: 660px) { .app-footer { margin-top: var(--app-space-6); } .app-app__main { width: auto; margin-inline: var(--app-space-2-5); padding-top: var(--app-space-5); } .app-footer__inner { width: auto; margin-inline: var(--app-space-2-5); padding: 0 0 12px; } .app-footer__surface { border-radius: 20px; padding: var(--app-space-5); } .app-footer__top { gap: var(--app-space-5); padding-bottom: var(--app-space-7); } .app-footer__brand { width: 148px; } .app-footer__brand-group { gap: var(--app-space-3); } .app-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-space-6) var(--app-space-5); } .app-footer__column_navigation { grid-column: 1 / -1; } .app-footer__column { gap: var(--app-space-2-5); } .app-footer__list { gap: 2px; } .app-footer__link { min-height: 44px; padding-block: var(--app-space-2); font-size: var(--app-type-meta-size); line-height: 1.25; } .app-footer__bottom { margin-top: var(--app-space-5); padding-top: 0; } .app-test-runner__main { padding: 0; } .app-test-runner__question-title { min-height: clamp(64px, 9vw, 92px); font-size: var(--app-type-heading-3-size); } .app-scale__button { min-height: 50px; padding: var(--app-space-3) var(--app-space-12) var(--app-space-3) var(--app-space-4); } .app-scale_width_wide { grid-template-columns: 1fr; } .app-scale_variant_circles { display: flex; } .app-scale_variant_circles .app-scale__button_shape_circle { flex-basis: 44px; width: 44px; height: 44px; padding: 0; } .app-actions { flex-direction: column-reverse; align-items: stretch; } .app-test-runner .app-actions { flex-direction: row; align-items: center; } .app-button { width: 100%; } .app-test-runner .app-button { width: auto; } } } /* ============================================================================ 14 - Right tools rail + mobile tools + drawer (@layer blocks). Right rail (.app-right-rail*), catalog filter panel (shared by rail and drawer), mobile tools bar (.app-mobile-tools*), universal bottom sheet (.app-drawer*) + drawer-hosted sidebar/filter skins, drawer breakpoints and reduced-motion. Extracted verbatim from globals.css (commit 085838f); cascade order kept. ============================================================================ */ /* ============================================================================ App shell — right tools rail + mobile tools layer. Adds a contextual right sidebar (catalog filters) that collapses to the right, symmetric to the left aside (same width-token; layout motion is opt-in through data-layout-motion="panel"). On mobile the left aside AND the right rail fold into one compact two-button tools layer (Разделы / Подбор) that opens accessible drawers — the old horizontal nav strip is hidden in favour of it. Runner/test pages render neither the rail nor the tools bar, so the central column stays put. ============================================================================ */ @layer blocks { /* Shells with a right rail reserve the right column; surfaces that pass no rail (account, runner/test pages) keep it at 0. `app-shell--has-rail` is set by DashboardShell whenever the rightRail slot is filled, so the reservation follows the slot — no per-surface allowlist to extend. */ .app-shell.app-shell--has-rail { --app-shell-right-width: clamp(244px, 18vw, 280px); } .app-shell--rail-collapsed.app-shell--has-rail { --app-shell-right-width: var(--app-shell-rail-collapsed-width); } /* ---- Right rail surface ---- */ .app-right-rail { --app-panel-head-copy-width: minmax(0, 1fr); --app-panel-head-gap: 8px; --app-panel-head-justify: stretch; --app-rail-head-padding-x: 8px; --app-panel-copy-opacity: 1; --app-panel-copy-pointer-events: auto; --app-panel-copy-visibility: visible; --app-panel-copy-visibility-delay: 0s; --app-panel-copy-x: 0px; --app-panel-toggle-icon-transform: none; --app-panel-justify-items: stretch; --app-rail-body-padding: 2px; --app-rail-body-opacity: 1; --app-rail-body-pointer-events: auto; --app-rail-body-visibility: visible; --app-rail-body-visibility-delay: 0s; --app-rail-body-x: 0px; --app-rail-peek-opacity: 0; --app-rail-peek-pointer-events: none; --app-rail-peek-visibility: hidden; --app-rail-peek-visibility-delay: var(--app-shell-panel-hide-delay, var(--app-duration-panel-fade)); --app-rail-peek-y: calc(0px - var(--app-motion-distance-sm)); grid-area: right; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-self: stretch; gap: var(--app-space-4-5); min-width: 0; min-height: 0; justify-items: var(--app-panel-justify-items); padding: var(--app-space-3); border-radius: var(--app-radius-lg); background: var(--app-shell-sidebar-bg); box-shadow: none; contain: layout paint style; overflow: clip; transition: background var(--app-motion-base); } .app-right-rail__head { display: grid; position: relative; grid-template-columns: var(--app-panel-head-copy-width) var(--app-panel-toggle-size); align-items: center; justify-content: var(--app-panel-head-justify); gap: var(--app-panel-head-gap); min-height: 0; min-width: 0; padding: var(--app-space-2) var(--app-rail-head-padding-x) var(--app-space-1); border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; transition: grid-template-columns var(--app-shell-panel-motion), gap var(--app-shell-panel-motion), padding var(--app-shell-panel-motion); } .app-right-rail__copy { display: grid; gap: 3px; min-width: 0; overflow: hidden; opacity: var(--app-panel-copy-opacity); pointer-events: var(--app-panel-copy-pointer-events); transform: translateX(var(--app-panel-copy-x)); visibility: var(--app-panel-copy-visibility); transition: opacity var(--app-shell-panel-fade-motion), transform var(--app-shell-panel-motion), visibility 0s linear var(--app-panel-copy-visibility-delay); } .app-right-rail__copy[data-motion-managed="true"] { transform: none; transition: visibility 0s linear var(--app-panel-copy-visibility-delay); } .app-right-rail__copy > .app-panel-reveal__body { display: grid; gap: 3px; min-width: 0; } .app-right-rail__kicker { color: var(--app-shell-text-muted); letter-spacing: 0; text-transform: none; } .app-right-rail__title { color: var(--app-shell-text); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-right-rail__toggle { display: inline-flex; align-self: start; align-items: center; justify-content: center; width: var(--app-panel-toggle-size); height: var(--app-panel-toggle-size); padding: 0; border: 0; border-radius: 10px; background: var(--app-shell-chip-bg); color: var(--app-shell-text-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-right-rail__toggle svg { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); overflow: visible; stroke-width: var(--app-icon-stroke); stroke-linecap: round; stroke-linejoin: round; transform: var(--app-panel-toggle-icon-transform); transform-box: fill-box; transform-origin: center; transition: transform var(--app-shell-panel-icon-motion); vector-effect: non-scaling-stroke; } .app-right-rail__toggle:hover, .app-right-rail__toggle:focus-visible { background: var(--app-shell-hover-bg); color: var(--app-shell-text); } .app-right-rail__toggle:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-right-rail__toggle:active { transform: scale(var(--app-interactive-icon-press-scale)); } .app-right-rail__body { min-height: 0; margin-top: 0; padding: var(--app-rail-body-padding); opacity: var(--app-rail-body-opacity); pointer-events: var(--app-rail-body-pointer-events); transform: translateX(var(--app-rail-body-x)); visibility: var(--app-rail-body-visibility); overflow-x: hidden; overflow-y: auto; /* scrollbar-gutter: auto (default) — reserve scrollbar space ONLY when content actually overflows. `stable` reserved it unconditionally, which combined with the motion height animation made short content (a single text field) show a permanent stray scrollbar. */ scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: opacity var(--app-shell-panel-fade-motion), padding var(--app-shell-panel-motion), transform var(--app-shell-panel-motion), visibility 0s linear var(--app-rail-body-visibility-delay); } .app-right-rail__body[data-motion-managed="true"] { transition: visibility 0s linear var(--app-rail-body-visibility-delay); } .app-right-rail__body .app-panel-reveal__scroll-content { min-height: 0; } .app-right-rail__body::-webkit-scrollbar { width: var(--app-scrollbar-size); height: var(--app-scrollbar-size); } .app-right-rail__body::-webkit-scrollbar-track { background: transparent; } .app-right-rail__body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--app-radius-full); background: transparent; background-clip: padding-box; } .app-right-rail__body:hover, .app-right-rail__body:focus-within { scrollbar-color: var(--app-scrollbar-thumb) transparent; } .app-right-rail__body:hover::-webkit-scrollbar-thumb, .app-right-rail__body:focus-within::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb); background-clip: padding-box; } .app-right-rail__body::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); background-clip: padding-box; } .app-right-rail__peek { position: absolute; top: calc( var(--app-space-3) + var(--app-space-2) + var(--app-panel-toggle-size) + var(--app-space-2) ); left: 50%; display: inline-flex; opacity: var(--app-rail-peek-opacity); pointer-events: var(--app-rail-peek-pointer-events); transform: translate(-50%, var(--app-rail-peek-y)); visibility: var(--app-rail-peek-visibility); transition: opacity var(--app-shell-panel-fade-motion), transform var(--app-shell-panel-motion), visibility 0s linear var(--app-rail-peek-visibility-delay); } .app-right-rail__peek-control { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--app-radius-md); background: var(--app-shell-chip-bg); color: var(--app-shell-text-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast); } .app-right-rail[data-collapsed="true"] { --app-panel-head-copy-width: 0; --app-panel-head-gap: 0; --app-panel-head-justify: center; --app-rail-head-padding-x: 6px; --app-panel-copy-opacity: 0; --app-panel-copy-pointer-events: none; --app-panel-copy-visibility: hidden; --app-panel-copy-visibility-delay: var(--app-shell-panel-hide-delay, var(--app-duration-panel-fade)); --app-panel-copy-x: calc(0px - var(--app-motion-distance-md)); --app-panel-toggle-icon-transform: rotate(180deg); --app-panel-justify-items: center; --app-rail-body-padding: 0px; --app-rail-body-opacity: 0; --app-rail-body-pointer-events: none; --app-rail-body-visibility: hidden; --app-rail-body-visibility-delay: var(--app-shell-panel-hide-delay, var(--app-duration-panel-fade)); --app-rail-body-x: calc(0px - var(--app-motion-distance-md)); --app-rail-peek-opacity: 1; --app-rail-peek-pointer-events: auto; --app-rail-peek-visibility: visible; --app-rail-peek-visibility-delay: 0s; --app-rail-peek-y: 0px; } .app-right-rail__peek-control:hover, .app-right-rail__peek-control:focus-visible { background: var(--app-shell-hover-bg); color: var(--app-shell-text); } .app-right-rail__peek-control:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-right-rail__peek-icon { display: inline-grid; transform-origin: center; transition: transform var(--app-duration-press) var(--app-ease-standard); } .app-right-rail__peek-control:active .app-right-rail__peek-icon { transform: scale(var(--app-interactive-icon-press-scale)); } .app-right-rail__peek-icon svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-right-rail__peek-icon svg :where(path, circle, line, polyline), .app-mobile-tools__icon svg :where(path, circle, line, polyline), .app-drawer .app-sidebar__icon svg :where(path, circle, line, polyline), .app-drawer-menu__arrow svg :where(path, circle, line, polyline) { stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-right-rail__peek-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 var(--app-space-1); border-radius: var(--app-radius-full); background: var(--app-shell-chip-bg); box-shadow: none; color: var(--app-shell-chip-text-strong); font-size: var(--app-type-caption-size); font-weight: 620; line-height: 16px; text-align: center; } /* ---- Filter panel (shared by rail + mobile drawer) ---- */ .app-catalog-filters { display: grid; gap: var(--app-space-4-5); align-content: start; } .app-catalog-filters__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--app-space-2); min-height: 24px; } .app-catalog-filters__count { color: var(--app-shell-text-muted-readable); font-size: var(--app-type-meta-size); font-weight: 560; line-height: 1.3; } .app-catalog-filters__reset { -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; --app-catalog-reset-danger: var(--app-ui-danger); min-height: 32px; padding: 0 var(--app-space-2); border: 0; border-radius: var(--app-radius-sm); background: color-mix(in srgb, var(--app-catalog-reset-danger) 14%, transparent); background-clip: padding-box; box-shadow: none; color: var(--app-catalog-reset-danger); font-size: var(--app-type-meta-size); font-weight: var(--app-type-weight-semibold); cursor: pointer; outline: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; visibility: hidden; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-catalog-filters__reset[data-visible="true"] { visibility: visible; } .app-catalog-filters__reset:focus-visible { outline: 0; background: color-mix(in srgb, var(--app-catalog-reset-danger) 24%, transparent); background-clip: padding-box; color: var(--app-catalog-reset-danger); box-shadow: var(--app-interactive-focus-ring); } .app-catalog-filters__reset:active { transform: scale(var(--app-interactive-press-scale)); } @media (hover: hover) and (pointer: fine) { .app-catalog-filters__reset:hover { background: color-mix(in srgb, var(--app-catalog-reset-danger) 24%, transparent); background-clip: padding-box; color: var(--app-catalog-reset-danger); } } .app-catalog-filters__group { display: grid; gap: var(--app-space-2); } .app-catalog-filters__label { margin: 0; color: var(--app-shell-text-muted-readable); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-semibold); line-height: 1.2; letter-spacing: 0; } .app-catalog-filters__alpha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--app-space-1-5); width: 100%; } .app-catalog-filters__alpha-btn { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; padding: 0 var(--app-space-1-5); border: 0; border-radius: var(--app-radius-sm); background: var(--app-shell-chip-bg); background-clip: padding-box; box-shadow: none; color: var(--app-shell-chip-text-strong); font-size: var(--app-type-meta-size); font-weight: var(--app-type-weight-semibold); line-height: 1; cursor: pointer; outline: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-catalog-filters__chips { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--app-space-1-5); width: 100%; } .app-catalog-filters__chip { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--app-space-3); border: 0; border-radius: var(--app-radius-full); background: var(--app-shell-chip-bg); background-clip: padding-box; box-shadow: none; color: var(--app-shell-chip-text-strong); font-size: var(--app-type-meta-size); font-weight: 560; line-height: 1.2; cursor: pointer; outline: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-catalog-filters__alpha-btn:focus-visible, .app-catalog-filters__chip:focus-visible { outline: 0; background: var(--app-shell-hover-bg); background-clip: padding-box; color: var(--app-shell-text); box-shadow: var(--app-interactive-focus-ring); } .app-catalog-filters__alpha-btn:active, .app-catalog-filters__chip:active { transform: scale(var(--app-interactive-press-scale)); } @media (hover: hover) and (pointer: fine) { .app-catalog-filters__alpha-btn:hover, .app-catalog-filters__chip:hover { background: var(--app-shell-hover-bg); background-clip: padding-box; color: var(--app-shell-text); } } /* Selected controls use the solid interaction accent; the brand gradient is reserved for primary actions. */ .app-catalog-filters__alpha-btn[data-selected="true"], .app-catalog-filters__chip[data-selected="true"] { background: var(--app-ui-accent); background-clip: padding-box; color: var(--app-ui-accent-foreground); } @media (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) { .app-drawer .app-catalog-filters__reset, .app-drawer .app-catalog-filters__alpha-btn, .app-drawer .app-catalog-filters__chip { transition: none; } .app-drawer .app-catalog-filters__reset:hover, .app-drawer .app-catalog-filters__reset:active, .app-drawer .app-catalog-filters__reset:focus, .app-drawer .app-catalog-filters__reset:focus-visible { outline: 0; background: color-mix(in srgb, var(--app-catalog-reset-danger) 14%, transparent); background-clip: padding-box; box-shadow: none; color: var(--app-catalog-reset-danger); } .app-drawer .app-catalog-filters__alpha-btn:hover:not([data-selected="true"]), .app-drawer .app-catalog-filters__alpha-btn:active:not([data-selected="true"]), .app-drawer .app-catalog-filters__alpha-btn:focus:not([data-selected="true"]), .app-drawer .app-catalog-filters__alpha-btn:focus-visible:not([data-selected="true"]), .app-drawer .app-catalog-filters__chip:hover:not([data-selected="true"]), .app-drawer .app-catalog-filters__chip:active:not([data-selected="true"]), .app-drawer .app-catalog-filters__chip:focus:not([data-selected="true"]), .app-drawer .app-catalog-filters__chip:focus-visible:not([data-selected="true"]) { outline: 0; background: var(--app-shell-chip-bg); background-clip: padding-box; box-shadow: none; color: var(--app-shell-chip-text-strong); } .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:hover, .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:active, .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:focus, .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:focus-visible, .app-drawer .app-catalog-filters__chip[data-selected="true"]:hover, .app-drawer .app-catalog-filters__chip[data-selected="true"]:active, .app-drawer .app-catalog-filters__chip[data-selected="true"]:focus, .app-drawer .app-catalog-filters__chip[data-selected="true"]:focus-visible { outline: 0; background: var(--app-ui-accent); background-clip: padding-box; box-shadow: none; color: var(--app-ui-accent-foreground); } } .app-drawer .app-catalog-filters__reset:focus-visible { box-shadow: var(--app-interactive-focus-ring); } .app-drawer .app-catalog-filters__alpha-btn:focus-visible:not([data-selected="true"]), .app-drawer .app-catalog-filters__chip:focus-visible:not([data-selected="true"]) { background: var(--app-shell-hover-bg); background-clip: padding-box; box-shadow: var(--app-interactive-focus-ring); color: var(--app-shell-text); } .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:focus-visible, .app-drawer .app-catalog-filters__chip[data-selected="true"]:focus-visible { box-shadow: var(--app-interactive-focus-ring); } /* ---- Mobile tools bar (hidden on desktop / non-catalog) ---- */ .app-mobile-tools { display: none; grid-area: tools; gap: var(--app-space-2); min-width: 0; } .app-mobile-tools__button { position: relative; display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--app-space-2); min-width: 0; min-height: 48px; padding: 0 var(--app-space-3); border: 0; border-radius: 14px; background: var(--app-shell-sidebar-bg); box-shadow: none; color: var(--app-shell-text); font-size: var(--app-type-body-sm-size); font-weight: 580; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-mobile-tools__button:focus-visible { background: var(--app-shell-hover-bg); } @media (hover: hover) and (pointer: fine) { .app-mobile-tools__button:hover { background: var(--app-shell-hover-bg); } } .app-mobile-tools__button:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-mobile-tools__button:active { transform: scale(var(--app-interactive-press-scale)); } .app-mobile-tools__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--app-shell-text-soft); } .app-mobile-tools__icon svg { width: var(--app-icon-size-md); height: var(--app-icon-size-md); stroke-width: var(--app-icon-stroke); stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-mobile-tools__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--app-radius-full); background: var(--app-shell-chip-bg); box-shadow: none; color: var(--app-shell-chip-text-strong); font-size: var(--app-type-caption-size); font-weight: 620; line-height: 1; } /* ---- Universal mobile drawer (bottom sheet) ---- Surface-agnostic: rendered by DashboardMobileDrawer for catalog sections, catalog filters, blog panels, account/auth OTP, editor tools, and future admin content. The `.app-drawer` scope maps a neutral `--app-drawer-*` token layer off whichever surface tokens are in scope (tests → account → base colour tokens), while HeroUI owns focus, dismissal and drag behaviour. */ .app-drawer { --app-drawer-panel-bg: var(--app-account-surface-raised, var(--app-ui-surface)); --app-drawer-border: var(--app-shell-border, var(--app-account-border, var(--app-ui-divider))); --app-drawer-title: var(--app-shell-text, var(--app-ui-text)); --app-drawer-muted: var(--app-shell-text-soft, var(--app-ui-text-secondary)); --app-drawer-control-bg: var(--app-shell-chip-bg, var(--app-account-surface-subtle, var(--app-ui-surface-hover))); --app-drawer-control-hover: var(--app-shell-hover-bg, var(--app-ui-surface-active)); } /* HeroUI maintains this variable from the live visual viewport. Keep the native sheet body as the only scroll root when a virtual keyboard shrinks it. */ .app-drawer [data-slot="drawer-dialog"][data-placement="bottom"] { max-height: min(85vh, var(--visual-viewport-height)); } /* React Aria keeps the backdrop mounted for HeroUI's 200ms exit motion. Stop that transparent frame from swallowing an immediate tap on the external mobile tool that reopens the controlled drawer. */ .app-drawer[data-exiting="true"] { pointer-events: none; } /* Keep HeroUI's native 24px close visual while making its touch hit area a reliable 44px without changing the component's geometry. */ .app-drawer-close-trigger::before { position: absolute; inset: -10px; content: ""; } .app-drawer .app-sidebar__nav { flex-direction: column; /* Override the mobile-strip `align-items: center` that otherwise centres and shrinks the groups to ~content width — rows must span the full sheet. */ align-items: stretch; width: 100%; gap: var(--app-space-4-5); overflow: visible; } .app-drawer .app-sidebar__group { display: grid; width: 100%; gap: var(--app-space-2); } .app-drawer .app-sidebar__group-label { display: block; max-height: none; margin: 0; padding: 0 2px; color: var(--app-shell-text-muted-readable); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-semibold); line-height: 1.2; text-align: left; } .app-drawer .app-sidebar__item { display: flex; align-items: center; justify-content: flex-start; gap: var(--app-space-3); width: 100%; min-height: 52px; padding: var(--app-space-2) var(--app-space-3-5); border-radius: 14px; background: var(--app-shell-chip-bg); color: var(--app-shell-text); text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .app-drawer .app-sidebar__item:hover, .app-drawer .app-sidebar__item:focus-visible { background: var(--app-shell-hover-bg); } .app-drawer .app-sidebar__item[data-active="true"] { background: var(--app-ui-accent-soft); box-shadow: none; } .app-drawer .app-sidebar__nav[data-motion-highlight="true"] .app-sidebar__item[data-active="true"] { background: var(--app-shell-chip-bg); } .app-drawer .app-sidebar__motion-highlight { border-radius: 14px; } .app-drawer .app-sidebar__icon { width: 24px; height: 24px; border-radius: 0; background: transparent; color: var(--app-shell-text-soft); } .app-drawer .app-sidebar__icon svg { width: var(--app-icon-size-md); height: var(--app-icon-size-md); stroke-width: var(--app-icon-stroke); stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-drawer .app-sidebar__label { flex: 1 1 auto; display: inline; max-width: none; font-size: var(--app-type-body-size); font-weight: 540; } .app-drawer .app-sidebar__badge { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 28px; min-height: 24px; margin-left: auto; padding: 0 var(--app-space-2); border-radius: var(--app-radius-full); background: var(--app-shell-active-bg); color: var(--app-shell-text-soft); font-size: var(--app-type-caption-size); font-weight: var(--app-type-weight-semibold); line-height: 1; } .app-drawer .app-catalog-filters__alpha-btn, .app-drawer .app-catalog-filters__chip { min-height: 44px; } .app-drawer .app-catalog-filters__alpha-btn { min-width: 44px; } /* Header menu is outside .app-shell, so use drawer-local tones here. */ .app-drawer_variant_header-menu { --app-drawer-control-bg: var(--app-ui-surface-hover); --app-drawer-control-hover: var(--app-ui-surface-active); } .app-drawer-menu { display: grid; gap: var(--app-space-4); width: 100%; min-width: 0; } .app-drawer-menu__list { display: grid; gap: var(--app-space-2); min-width: 0; margin: 0; padding: 0; list-style: none; } .app-drawer-menu__item { min-width: 0; margin: 0; padding: 0; list-style: none; } .app-drawer-menu__link { display: flex; align-items: center; justify-content: flex-start; gap: var(--app-space-3); width: 100%; min-height: 52px; padding: var(--app-space-3) var(--app-space-4); border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); border-radius: var(--app-radius-md); background: var(--app-drawer-control-bg); } .app-drawer-menu__link:focus-visible, .app-drawer-menu__action:focus-visible { background: var(--app-drawer-control-hover); color: var(--app-drawer-title); } @media (hover: hover) and (pointer: fine) { .app-drawer-menu__link:hover, .app-drawer-menu__action:hover { background: var(--app-drawer-control-hover); color: var(--app-drawer-title); } } .app-drawer-menu__link:focus-visible, .app-drawer-menu__action:focus-visible { outline: 0; box-shadow: var(--app-interactive-focus-ring); } .app-drawer-menu__link:active, .app-drawer-menu__action:active { transform: scale(var(--app-interactive-press-scale)); } .app-drawer-menu__item-copy { display: grid; flex: 1 1 auto; gap: var(--app-space-1); min-width: 0; } .app-drawer-menu__item-title { color: inherit; font-size: var(--app-type-body-size); font-weight: 620; line-height: 1.25; overflow-wrap: anywhere; } .app-drawer-menu__arrow { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--app-drawer-muted); margin-left: auto; transition: transform var(--app-motion-fast), color var(--app-motion-fast); } .app-drawer-menu__arrow svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; } .app-drawer-menu__link:focus-visible .app-drawer-menu__arrow { transform: translateX(4px); } @media (hover: hover) and (pointer: fine) { .app-drawer-menu__link:hover .app-drawer-menu__arrow { transform: translateX(4px); } } .app-drawer-menu__footer { display: grid; gap: var(--app-space-2); padding-top: var(--app-space-2); } .app-drawer-menu__action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--app-space-4); border-radius: var(--app-radius-md); background: var(--app-drawer-control-bg); color: var(--app-drawer-title); font-size: var(--app-type-body-sm-size); font-weight: 620; line-height: 1.2; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--app-motion-fast), color var(--app-motion-fast), transform var(--app-duration-press) var(--app-ease-standard); } .app-drawer-menu__footer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-space-2); min-width: 0; } /* While a sheet is open: lift the whole dashboard above the sticky site header (z-index 30) so the sheet + backdrop are unambiguously the active layer — the header reads as dimmed context behind the backdrop, not a control above it — and stop the catalog scrolling behind the sheet. */ .app-shell[data-drawer-open="true"] { position: relative; z-index: 50; } .app-shell[data-drawer-open="true"] .app-shell__main { overflow: hidden; } @media (min-width: 960px) { .app-shell[data-drawer-open="true"] { z-index: auto; } .app-shell[data-drawer-open="true"] .app-shell__main { overflow-x: hidden; overflow-y: auto; } } @media (max-width: 1180px) { .app-shell.app-shell--has-rail { --app-shell-right-width: clamp(208px, 22vw, 240px); } .app-shell.app-shell--has-rail.app-shell--rail-collapsed { --app-shell-right-width: var(--app-shell-rail-collapsed-width); } } /* Mobile: aside + rail collapse into the tools layer; no horizontal strip. */ @media (max-width: 959px) { .app-shell { grid-template-areas: "tools" "main"; } .app-sidebar, .app-right-rail { display: none; } .app-mobile-tools { display: flex; } } @media (prefers-reduced-motion: reduce) { .app-shell, .app-sidebar, .app-sidebar__head, .app-sidebar__copy, .app-sidebar__toggle, .app-sidebar__toggle svg, .app-sidebar__nav, .app-sidebar__group-label, .app-sidebar__group-label::before, .app-sidebar__item, .app-sidebar__icon, .app-sidebar__icon svg, .app-sidebar__label, .app-sidebar__badge, .app-right-rail, .app-right-rail__head, .app-right-rail__copy, .app-right-rail__toggle, .app-right-rail__toggle svg, .app-right-rail__body, .app-right-rail__peek, .app-right-rail__peek-icon, .app-mobile-tools__button, .app-catalog-filters__reset, .app-catalog-filters__alpha-btn, .app-catalog-filters__chip, .app-drawer-menu__link, .app-drawer-menu__action { transition: none; } } } /* ============================================================================ 24 - Cookie consent and privacy settings Layout only. HeroUI owns component visuals, interaction states and motion. ============================================================================ */ @layer blocks { .app-cookie-consent { position: fixed; z-index: 900; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); left: auto; width: min(24rem, calc(100vw - 2rem)); } .app-cookie-consent[data-settings-open="true"] { z-index: 40; } .app-cookie-consent__surface { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--app-space-4); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; } .app-cookie-consent__copy { display: grid; gap: var(--app-space-2); min-width: 0; } .app-cookie-consent__policy { display: inline-flex; width: fit-content; min-height: 2rem; align-items: center; } .app-cookie-settings__policy { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; } .app-cookie-consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-space-2); min-width: 0; } .app-cookie-consent__actions > :last-child { grid-column: 1 / -1; } .app-cookie-settings__dialog { max-height: min(860px, calc(100dvh - 24px)); } .app-cookie-settings__close { min-width: 44px; min-height: 44px; } .app-cookie-settings__header { display: grid; gap: var(--app-space-2); min-width: 0; } .app-cookie-settings__body { min-height: 0; } .app-cookie-settings__categories { display: grid; gap: var(--app-space-2); min-width: 0; } .app-cookie-category__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--app-space-2); align-items: center; min-width: 0; } .app-cookie-category__header > :first-child { min-width: 0; } .app-cookie-category__status { white-space: nowrap; } .app-cookie-category__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--app-space-4); align-items: center; min-width: 0; } .app-cookie-category__switch { min-width: 44px; } .app-cookie-category__switch-content { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: flex-end; } .app-cookie-settings__gpc { margin: 0; } .app-cookie-settings__footer { display: flex; flex-wrap: wrap; gap: var(--app-space-3); align-items: center; justify-content: space-between; } .app-cookie-settings__footer-actions { display: flex; flex-wrap: wrap; gap: var(--app-space-2); margin-left: auto; } .app-footer__link_button { padding: 0; border: 0; background: none; font-family: inherit; text-align: start; cursor: pointer; } @media (max-width: 720px) { .app-cookie-consent { right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); width: min(24rem, calc(100vw - 1.5rem)); } .app-cookie-consent__surface { grid-template-columns: minmax(0, 1fr); gap: var(--app-space-4); } .app-cookie-consent__actions { grid-template-columns: minmax(0, 1fr); } .app-cookie-consent__actions > :last-child { grid-column: auto; } .app-cookie-category__header { grid-template-columns: minmax(0, 1fr); align-items: start; } .app-cookie-category__content { gap: var(--app-space-3); } .app-cookie-settings__footer { align-items: stretch; } .app-cookie-settings__footer-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin-left: 0; } .app-cookie-settings__footer-actions > * { width: 100%; } } } /* One landing-specific layout decision: keep the optional analytics switch below its explanation. All visual tokens still come from the project card and Switch components. */ .app-cookie-category:last-child .app-cookie-category__content { grid-template-columns: minmax(0, 1fr); align-items: start; } .app-cookie-category:last-child .app-cookie-category__switch, .app-cookie-category:last-child .app-cookie-category__switch-content { justify-self: start; justify-content: flex-start; } @media (max-width: 720px) { /* Keep the canonical cookie card and controls; only let its shell use both mobile safe-area insets instead of leaving unused space on the left. */ .landing-page .app-cookie-consent { right: max(0.75rem, env(safe-area-inset-right)); left: max(0.75rem, env(safe-area-inset-left)); width: auto; } } @media (max-width: 620px) { /* The canonical close control is independently positioned. Reserve its touch target inside the heading so text never runs beneath the button. */ .app-cookie-settings__dialog [data-slot="modal-heading"] { padding-inline-end: calc(44px + var(--app-space-2)); } } html, body, #root { inline-size: 100%; min-inline-size: 0; overflow-x: clip; } .landing-page { min-inline-size: 0; overflow: clip; } /* Explicit landing motion: geometry only. Surface, typography and control colors remain wholly owned by the canonical project AppHeader CSS and its tokens. */ .landing-page [data-landing-header] { position: fixed; z-index: 20; top: max(16px, env(safe-area-inset-top)); left: 50%; width: calc(100% - 32px); max-width: 1440px; min-height: 0; padding: 0; background: transparent; transform: translateX(-50%); transition: top var(--app-motion-base), width var(--app-motion-base), max-width var(--app-motion-base); } .landing-page [data-landing-header][data-compact="true"] { top: max(12px, env(safe-area-inset-top)); max-width: 900px; } .landing-page [data-landing-header] .app-header__inner { transition: min-height var(--app-motion-base), padding-inline var(--app-motion-base), border-radius var(--app-motion-base); } .landing-page [data-landing-header][data-compact="true"] .app-header__inner { min-height: 56px; padding-inline: var(--app-space-4); } /* Layout-only bridge: the canonical project BurgerMenu takes over at 959px. */ @media (max-width: 959px) { /* Matches the canonical mobile AppHeader grid from 06-app-shell-catalog.css. When the centre nav is hidden, the action group must remain in column 3. */ .landing-page [data-landing-header] .app-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; min-height: 56px; padding-inline: var(--app-space-3); border-radius: var(--app-radius-lg); } .landing-page .app-header__nav, [data-landing-header-cta] { display: none; } .landing-page [data-landing-header] .app-header__brand { grid-column: 1; } .landing-page [data-landing-header] .app-header__actions { grid-column: 3; justify-self: end; } } @media (max-width: 760px) { .landing-page [data-landing-header] { top: max(10px, env(safe-area-inset-top)); width: calc(100% - 24px); } .landing-page [data-landing-header][data-compact="true"] { top: max(8px, env(safe-area-inset-top)); max-width: none; } .landing-page [data-landing-header][data-compact="true"] .app-header__inner { min-height: 60px; } } @media (max-width: 660px) { .landing-page .app-footer__top { gap: var(--app-space-4); padding-bottom: var(--app-space-4); } .landing-page .app-footer__column { gap: var(--app-space-2); } .landing-page .app-footer__column:first-child .app-footer__link { min-height: 32px; padding-block: var(--app-space-1); } .landing-page .app-footer__bottom { margin-top: var(--app-space-4); } } /* Mirror next-themes' transition suppression during the root token swap. */ html[data-theme-transition="off"] *, html[data-theme-transition="off"] *::before, html[data-theme-transition="off"] *::after { transition-duration: 0s !important; transition-delay: 0s !important; } /* Reviews: three continuous reading streams. Motion pauses only over a review. */ .testimonials-section { overflow: hidden; background: var(--canvas); } .testimonials-heading-row { display: block; } .testimonials-heading-row .section-heading { max-width: 640px; } .testimonial-marquee { display: grid; width: 100%; gap: var(--app-space-4); margin-top: var(--app-space-10); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .testimonial-stream { width: 100%; padding-block: 2px; overflow: hidden; } .testimonial-stream__track { display: flex; align-items: flex-end; width: max-content; min-width: max-content; gap: var(--app-space-3); padding-inline-end: var(--app-space-3); will-change: transform; } .testimonial-stream[data-direction='left'] .testimonial-stream__track { animation: testimonial-stream-left 92s linear infinite; } .testimonial-stream[data-direction='right'] .testimonial-stream__track { animation: testimonial-stream-right 106s linear infinite; } .testimonial-marquee[data-running='false'] .testimonial-stream__track { animation-play-state: paused; } .testimonial-card, .testimonial-card[data-variant='rail'], .testimonial-card[data-variant='center'], .testimonial-card[data-variant='marquee'] { --testimonial-card-surface: var(--surface-muted); --testimonial-card-hover: color-mix(in srgb, var(--surface-muted) 80%, var(--scene-c)); --testimonial-card-text: var(--text); --testimonial-card-muted: var(--text-muted); display: flex; flex: 0 0 auto; flex-direction: column; width: 324px; min-width: 324px; min-height: 248px; gap: var(--app-space-4); padding: var(--app-space-5); overflow: hidden; border: 0; border-radius: var(--landing-card-radius); color: var(--testimonial-card-text); background: var(--testimonial-card-surface); box-shadow: none; transform: none; transition: background-color var(--app-duration-highlight) var(--app-ease-standard); } .testimonial-card[data-tone='paper'] { --testimonial-card-surface: var(--surface-muted); --testimonial-card-hover: color-mix(in srgb, var(--surface-muted) 78%, var(--scene-c)); } .testimonial-card[data-tone='mist'] { --testimonial-card-surface: color-mix(in srgb, var(--scene-d) 52%, var(--surface)); --testimonial-card-hover: color-mix(in srgb, var(--scene-d) 66%, var(--surface)); } .testimonial-card[data-tone='lilac'] { --testimonial-card-surface: color-mix(in srgb, var(--scene-a) 54%, var(--surface)); --testimonial-card-hover: color-mix(in srgb, var(--scene-a) 68%, var(--surface)); } .testimonial-card[data-tone='ink'] { --testimonial-card-surface: var(--scene-ink); --testimonial-card-hover: color-mix(in srgb, var(--scene-ink) 86%, #000); --testimonial-card-text: #f8f4f0; --testimonial-card-muted: rgb(248 244 240 / 72%); } .testimonial-card[data-length='short'] { width: 286px; min-width: 286px; min-height: 220px; } .testimonial-card[data-length='long'] { width: 374px; min-width: 374px; min-height: 272px; } .testimonial-card[data-expandable='true'] { cursor: pointer; } .testimonial-card[data-expandable='true']:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .testimonial-card__topline, .testimonial-card__footer { display: flex; align-items: center; } .testimonial-card__topline { justify-content: flex-start; min-height: 24px; } .testimonial-card__identity, .testimonial-detail-dialog__identity { display: inline-flex; align-items: center; min-width: 0; gap: var(--app-space-2); } .testimonial-card__avatar, .testimonial-card__avatar-fallback { inline-size: 24px; block-size: 24px; } .testimonial-card__avatar { flex: 0 0 24px; } .testimonial-card__avatar-fallback, .testimonial-detail-dialog__avatar-fallback { display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--testimonial-card-muted) !important; background: color-mix(in srgb, var(--testimonial-card-text) 11%, transparent) !important; } .testimonial-card[data-tone='ink'] .testimonial-card__avatar-fallback { color: #f8f4f0 !important; background: rgb(248 244 240 / 18%) !important; } .testimonial-card__label { margin: 0; color: var(--testimonial-card-muted) !important; font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .testimonial-card blockquote { display: block; flex: 1; max-width: none; margin: 0; overflow: hidden; } .testimonial-card__quote { display: -webkit-box; margin: 0; overflow: hidden; overflow-wrap: anywhere; color: var(--testimonial-card-text) !important; -webkit-box-orient: vertical; -webkit-line-clamp: 5; font-size: 1.05rem !important; font-weight: var(--app-type-weight-medium) !important; line-height: 1.38 !important; letter-spacing: 0 !important; } .testimonial-card[data-expandable='false'] .testimonial-card__quote { display: block; overflow: visible; -webkit-line-clamp: unset; } .testimonial-card__footer { justify-content: flex-end; min-height: 24px; margin-top: auto; padding-top: 0; border: 0; } .testimonial-card__actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--testimonial-card-text); font-size: 0.875rem; font-weight: 600; line-height: 1.35; } @media (hover: hover) and (pointer: fine) { .testimonial-card[data-expandable='true']:hover { background: var(--testimonial-card-hover); transform: none; } } .testimonial-detail-dialog { --testimonial-detail-inset: 24px; padding: 0 !important; border: 0; background: var(--surface); box-shadow: none; } .testimonial-detail-dialog__close { top: var(--testimonial-detail-inset); right: var(--testimonial-detail-inset); } .testimonial-detail-dialog__header { padding: var(--testimonial-detail-inset) var(--testimonial-detail-inset) 0; } .testimonial-detail-dialog__heading { display: grid; gap: var(--app-space-3); } .testimonial-detail-dialog__avatar, .testimonial-detail-dialog__avatar-fallback { inline-size: 28px; block-size: 28px; } .testimonial-detail-dialog__avatar { flex: 0 0 28px; } .testimonial-detail-dialog__label, .testimonial-detail-dialog__title, .testimonial-detail-dialog__copy { margin: 0; } .testimonial-detail-dialog__label { color: var(--text-muted) !important; font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .testimonial-detail-dialog__title { color: var(--text) !important; font-size: 1.25rem !important; font-weight: var(--app-type-weight-medium) !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .testimonial-detail-dialog__body { padding: var(--app-space-5) var(--testimonial-detail-inset) var(--testimonial-detail-inset); } .testimonial-detail-dialog__body blockquote, .testimonial-detail-dialog__body p { margin: 0; } .testimonial-detail-dialog__copy { overflow-wrap: anywhere; color: var(--text) !important; font-size: 1.05rem !important; font-weight: var(--app-type-weight-medium) !important; line-height: 1.38 !important; letter-spacing: 0 !important; } @keyframes testimonial-stream-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes testimonial-stream-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (max-width: 760px) { .testimonials-heading-row .section-heading { max-width: none; } .testimonial-marquee { gap: var(--app-space-3); margin-top: var(--app-space-8); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .testimonial-card, .testimonial-card[data-variant='rail'], .testimonial-card[data-variant='center'], .testimonial-card[data-variant='marquee'], .testimonial-card[data-length='short'], .testimonial-card[data-length='long'] { width: min(74vw, 300px); min-width: min(74vw, 300px); min-height: 224px; gap: var(--app-space-3); padding: 20px; } .testimonial-card[data-length='short'] { min-height: 204px; } .testimonial-card[data-length='long'] { min-height: 248px; } .testimonial-card__quote { font-size: 1rem !important; -webkit-line-clamp: 5; } .testimonial-detail-dialog { --testimonial-detail-inset: 20px; } } @media (prefers-reduced-motion: reduce) { .testimonial-marquee { padding-inline: var(--app-space-4); -webkit-mask-image: none; mask-image: none; } .testimonial-stream { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .testimonial-stream__track { animation: none !important; transform: none !important; will-change: auto; } .testimonial-card[data-duplicate='true'] { display: none; } .testimonial-card { scroll-snap-align: start; transition: none; } } /* * Help-map hover V5: * the active row receives the directional curtain; the fixed 16:9 photo frame * follows the pointer and changes through a quiet dissolve. */ .help-hover-preview.help-hover-preview--v5 { position: fixed; top: 0; left: 0; z-index: 80; width: clamp(248px, 22vw, 340px); aspect-ratio: 16 / 9; contain: paint; isolation: isolate; margin: 0; overflow: hidden; overflow: clip; border: 0; border-radius: var(--app-radius-md); outline: 0; background: transparent; box-shadow: none; filter: none; pointer-events: none; transform-origin: top left; } .help-hover-preview--v5 .help-hover-preview__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; outline: 0; object-fit: cover; box-shadow: none; user-select: none; -webkit-user-drag: none; } .help-hover-preview--v5 .help-hover-preview__image--base { z-index: 1; } .help-hover-preview--v5 .help-hover-preview__image--curtain { z-index: 2; will-change: opacity, transform; } @media (hover: hover) and (pointer: fine) and (min-width: 960px) { .landing-page .help-section .help-item { position: relative; isolation: isolate; background: var(--surface-muted); } .landing-page .help-section .help-item::before { position: absolute; z-index: 0; inset: 0; border-radius: var(--app-radius-md); background: color-mix(in srgb, var(--text) 90%, var(--scene-a) 10%); content: ""; pointer-events: none; transform: scaleX(0); transform-origin: right center; transition: transform 520ms cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; } .landing-page .help-section .help-item > * { position: relative; z-index: 1; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* * This is an actual inversion, not a second colour transition: the white * source blends with the pixels beneath it, so the text changes precisely * where the curtain reaches it. */ .landing-page .help-section .help-item > :is(span, h3, p, svg) { color: #fff; mix-blend-mode: difference; } .landing-page .help-section .help-item > h3 { opacity: 0.88; } .landing-page .help-section .help-item > :is(span, p, svg) { opacity: 0.72; } .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible)::before { transform: scaleX(1); transform-origin: left center; transition-duration: 620ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible) > svg { transform: translate3d(5px, 5px, 0); } .landing-page .help-section .help-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 32%, transparent); outline-offset: 4px; } } @media (hover: none), (pointer: coarse), (max-width: 959px) { .help-hover-preview.help-hover-preview--v5 { display: none; } } @media (prefers-reduced-motion: reduce) { .help-hover-preview.help-hover-preview--v5 { display: none; } .landing-page .help-section .help-item::before, .landing-page .help-section .help-item > * { transition-duration: 0.01ms !important; } .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible) > svg { transform: none; } } /* * Keep the curtain's origin stable. Changing it at the same moment as scaleX * makes the filled row appear to snap instead of reveal progressively. */ @media (hover: hover) and (pointer: fine) and (min-width: 960px) { .landing-page .help-section .help-item::before { transform-origin: left center; transition: transform 860ms cubic-bezier(0.22, 0.72, 0.24, 1); } .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible)::before { transform: scaleX(1); transform-origin: left center; transition-duration: 860ms; transition-timing-function: cubic-bezier(0.22, 0.72, 0.24, 1); } .landing-page .help-section .help-item > svg { align-self: center; justify-self: center; transform: translate3d(0, 0, 0); transform-origin: center; } .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible) > svg { transform: rotate(-45deg); } } @media (prefers-reduced-motion: reduce) { .landing-page .help-section .help-item::before, .landing-page .help-section .help-item > svg { transition-duration: 0.01ms !important; } .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible) > svg { transform: none; } }