:root { --n0: #ffffff; --n25: #eff0f3; --n50: #f4f5f8; --n100: #eaebef; --n200: #dcdee2; --n300: #d0d2d6; --n400: #a2a4aa; --n500: #898c92; --n600: #7c7f85; --n700: #61646b; --n800: #44484f; --n850: #353840; --n870: #2f333b; --n880: #2c2f37; --n900: #272b33; --n920: #1e2129; --n950: #12151d; --n980: #0c0f17; --n1000: #05070f; --greenSolid: #2b8449; --greenSolidHover: #20773f; --greenSolidActive: #166c36; --greenOnSolid: #ffffff; --amberSolid: #ad7300; --amberSolidHover: #bc7d00; --amberSolidActive: #cb8700; --amberOnSolid: #0c0f17; --redSolid: #c94545; --redSolidHover: #b93a3b; --redSolidActive: #ab3133; --redOnSolid: #ffffff; --cyanSolid: #007e9c; --cyanSolidHover: #00718d; --cyanSolidActive: #00667f; --cyanOnSolid: #ffffff; --orangeSolid: #f97316; --orangeOnSolid: #0c0f17; --magentaSolid: #c0167a; --magentaOnSolid: #ffffff; } :root, [data-theme='dark'] { color-scheme: dark; --surfaceSunken: #141821; --surfacePage: #0b0d12; --surfaceRaised: #1b1f29; --surfaceRaisedHover: #232833; --surfaceOverlay: #272c38; --surfaceActive: #2e3441; --surfaceFrame: #07090d; --textPrimary: var(--n25); --textSecondary: #c9cacf; --textMuted: var(--n400); --textDisabled: #75787f; --textPlaceholder: var(--textMuted); --borderSubtle: #2a2f3b; --borderControl: #82858b; --borderStrong: var(--n400); --scrollbarThumb: var(--accentRing); --scrollbarThumbHover: color-mix(in srgb, var(--accentRing) 90%, transparent); --scrollbarThumbActive: color-mix(in srgb, var(--accentRing) 90%, transparent); --brandMark: var(--accentRing); --greenText: #91dba3; --greenRing: #60b577; --greenSoft: #21342f; --amberText: #fdc16e; --amberRing: #d9972a; --amberSoft: #352e22; --redText: #ffbab5; --redRing: #fe7c77; --redSoft: #3c272d; --cyanText: #70d8fa; --cyanRing: #26b1d7; --cyanSoft: #19323e; --violetText: #e8baff; --violetRing: #d184f5; --violetSoft: #342943; --elevationHairline: inset 0 1px 0 rgb(255 255 255 / 0.09); --shadow1: 0 1px 2px rgb(0 0 0 / 0.45), 0 0.75rem 1.75rem -0.75rem rgb(0 0 0 / 0.6); --shadow2: 0 2px 6px rgb(0 0 0 / 0.45), 0 1.25rem 2.5rem -0.75rem rgb(0 0 0 / 0.65); --shadow3: 0 4px 12px rgb(0 0 0 / 0.5), 0 2rem 4rem -1rem rgb(0 0 0 / 0.7); --canvasPeak: color-mix(in srgb, var(--accentRing) 20%, var(--surfacePage)); --canvasLight: radial-gradient(70rem 30rem at 18% -12%, var(--canvasPeak), transparent 70%); --glowPrimary: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--accentSolid) 75%, transparent); --shadowInset: inset 0 1px 2px rgb(0 0 0 / 0.35); --backdrop: rgb(5 7 15 / 0.68); --backdropBlur: blur(2px); --scrim: rgb(5 7 15 / 0.78); --textOnScrim: var(--n0); } [data-theme='light'] { color-scheme: light; --surfaceSunken: #f6f7f9; --surfacePage: #edeff3; --surfaceRaised: var(--n0); --surfaceRaisedHover: #f1f2f6; --surfaceOverlay: var(--n0); --surfaceActive: #e3e4e8; --surfaceFrame: #e2e5ea; --textPrimary: #13161e; --textSecondary: var(--n800); --textMuted: var(--n700); --textDisabled: var(--n500); --textPlaceholder: var(--textMuted); --borderSubtle: var(--n200); --borderControl: var(--n600); --borderStrong: var(--n700); --scrollbarThumb: var(--accentRing); --scrollbarThumbHover: color-mix(in srgb, var(--accentRing) 90%, transparent); --scrollbarThumbActive: color-mix(in srgb, var(--accentRing) 90%, transparent); --greenText: #005325; --greenRing: #1b723b; --greenSoft: #e4f0e8; --amberText: #654100; --amberRing: #8a5a00; --amberSoft: #f2ebde; --redText: #8b1d22; --redRing: #b33638; --redSoft: #f7e6e6; --cyanText: #004f63; --cyanRing: #006d87; --cyanSoft: #deeff3; --violetText: #6b2887; --violetRing: #8e41af; --violetSoft: #f2e8f6; --elevationHairline: inset 0 0 0 transparent; --shadow1: 0 1px 2px rgb(19 22 30 / 0.06), 0 0.5rem 1.5rem -0.5rem rgb(19 22 30 / 0.14); --shadow2: 0 2px 4px rgb(19 22 30 / 0.06), 0 1rem 2rem -0.5rem rgb(19 22 30 / 0.16); --shadow3: 0 4px 8px rgb(19 22 30 / 0.08), 0 1.75rem 3.5rem -1rem rgb(19 22 30 / 0.22); --canvasPeak: color-mix(in srgb, var(--accentRing) 8%, var(--surfacePage)); --canvasLight: radial-gradient(70rem 30rem at 18% -12%, var(--canvasPeak), transparent 70%); --glowPrimary: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--accentSolid) 60%, transparent); --shadowInset: inset 0 1px 2px rgb(19 22 30 / 0.08); --backdrop: rgb(19 22 30 / 0.44); } :root, [data-theme='dark'] { --accMidnightText: #a9cdff; --accMidnightRing: #7ca7e3; --accMidnightSoft: #263041; --accOceanText: #7fdad0; --accOceanRing: #45b4a9; --accOceanSoft: #193338; --accSunsetText: #ffbaa4; --accSunsetRing: #ff7f56; --accSunsetSoft: #3c2724; --accForestText: #93daa5; --accForestRing: #63b47a; --accForestSoft: #223430; --accVioletText: #cec4ff; --accVioletRing: #ac94ff; --accVioletSoft: #2f2b48; --accRoseText: #ffb8b9; --accRoseRing: #ff7a83; --accRoseSoft: #3d252f; --accSkyText: #96d1ff; --accSkyRing: #57ace9; --accSkySoft: #1d3143; --accAmberText: #ffbd8b; --accAmberRing: #ec8c36; --accAmberSoft: #382c22; --accCandrecoviaText: #71e18d; --accCandrecoviaRing: #2abb5c; --accCandrecoviaSoft: #19342d; } [data-theme='light'] { --accMidnightText: #274977; --accMidnightRing: #3e659c; --accMidnightSoft: #e8edf5; --accOceanText: #00524c; --accOceanRing: #007069; --accOceanSoft: #deefee; --accSunsetText: #852700; --accSunsetRing: #b53800; --accSunsetSoft: #f7e7e0; --accForestText: #075428; --accForestRing: #20713d; --accForestSoft: #e4f0e8; --accVioletText: #53339a; --accVioletRing: #6f4dc3; --accVioletSoft: #eee9f9; --accRoseText: #8f102b; --accRoseRing: #ba2d42; --accRoseSoft: #f8e5e8; --accSkyText: #004c77; --accSkyRing: #0369a1; --accSkySoft: #e1eef6; --accAmberText: #703a00; --accAmberRing: #995100; --accAmberSoft: #f4eade; --accCandrecoviaText: #005422; --accCandrecoviaRing: #007432; --accCandrecoviaSoft: #def0e6; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --surfaceSunken: #f6f7f9; --surfacePage: #edeff3; --surfaceRaised: var(--n0); --surfaceRaisedHover: #f1f2f6; --surfaceOverlay: var(--n0); --surfaceActive: #e3e4e8; --surfaceFrame: #e2e5ea; --textPrimary: #13161e; --textSecondary: var(--n800); --textMuted: var(--n700); --textDisabled: var(--n500); --textPlaceholder: var(--textMuted); --borderSubtle: var(--n200); --borderControl: var(--n600); --borderStrong: var(--n700); --scrollbarThumb: var(--accentRing); --scrollbarThumbHover: color-mix(in srgb, var(--accentRing) 90%, transparent); --scrollbarThumbActive: color-mix(in srgb, var(--accentRing) 90%, transparent); --greenText: #005325; --greenRing: #1b723b; --greenSoft: #e4f0e8; --amberText: #654100; --amberRing: #8a5a00; --amberSoft: #f2ebde; --redText: #8b1d22; --redRing: #b33638; --redSoft: #f7e6e6; --cyanText: #004f63; --cyanRing: #006d87; --cyanSoft: #deeff3; --violetText: #6b2887; --violetRing: #8e41af; --violetSoft: #f2e8f6; --elevationHairline: inset 0 0 0 transparent; --shadow1: 0 1px 2px rgb(19 22 30 / 0.06), 0 0.5rem 1.5rem -0.5rem rgb(19 22 30 / 0.14); --shadow2: 0 2px 4px rgb(19 22 30 / 0.06), 0 1rem 2rem -0.5rem rgb(19 22 30 / 0.16); --shadow3: 0 4px 8px rgb(19 22 30 / 0.08), 0 1.75rem 3.5rem -1rem rgb(19 22 30 / 0.22); --canvasPeak: color-mix(in srgb, var(--accentRing) 8%, var(--surfacePage)); --canvasLight: radial-gradient(70rem 30rem at 18% -12%, var(--canvasPeak), transparent 70%); --glowPrimary: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--accentSolid) 60%, transparent); --shadowInset: inset 0 1px 2px rgb(19 22 30 / 0.08); --backdrop: rgb(19 22 30 / 0.44); } :root:not([data-theme]) { --accMidnightText: #274977; --accMidnightRing: #3e659c; --accMidnightSoft: #e8edf5; --accOceanText: #00524c; --accOceanRing: #007069; --accOceanSoft: #deefee; --accSunsetText: #852700; --accSunsetRing: #b53800; --accSunsetSoft: #f7e7e0; --accForestText: #075428; --accForestRing: #20713d; --accForestSoft: #e4f0e8; --accVioletText: #53339a; --accVioletRing: #6f4dc3; --accVioletSoft: #eee9f9; --accRoseText: #8f102b; --accRoseRing: #ba2d42; --accRoseSoft: #f8e5e8; --accSkyText: #004c77; --accSkyRing: #0369a1; --accSkySoft: #e1eef6; --accAmberText: #703a00; --accAmberRing: #995100; --accAmberSoft: #f4eade; --accCandrecoviaText: #005422; --accCandrecoviaRing: #007432; --accCandrecoviaSoft: #def0e6; } } :root { --accMidnightSolid: #586474; --accMidnightSolidHover: #4d5868; --accMidnightSolidActive: #434e5e; --accMidnightOnSolid: #ffffff; --accOceanSolid: #0f766e; --accOceanSolidHover: #116962; --accOceanSolidActive: #0e5e57; --accOceanOnSolid: #ffffff; --accSunsetSolid: #c2410c; --accSunsetSolidHover: #ae3c11; --accSunsetSolidActive: #9d360e; --accSunsetOnSolid: #ffffff; --accForestSolid: #24703e; --accForestSolidHover: #146433; --accForestSolidActive: #0c592b; --accForestOnSolid: #ffffff; --accVioletSolid: #7737e6; --accVioletSolidHover: #6c26d8; --accVioletSolidActive: #6217c9; --accVioletOnSolid: #ffffff; --accRoseSolid: #e11d48; --accRoseSolidHover: #cc1b41; --accRoseSolidActive: #ba183b; --accRoseOnSolid: #ffffff; --accSkySolid: #0369a1; --accSkySolidHover: #0f5d8d; --accSkySolidActive: #0c537e; --accSkyOnSolid: #ffffff; --accAmberSolid: #d97706; --accAmberSolidHover: #e78422; --accAmberSolidActive: #f38f32; --accAmberOnSolid: #0c0f17; --accCandrecoviaSolid: #25d366; --accCandrecoviaSolidHover: #3ce073; --accCandrecoviaSolidActive: #4ced7e; --accCandrecoviaOnSolid: #0c0f17; } :root { --accentText: var(--accCandrecoviaText); --accentRing: var(--accCandrecoviaRing); --accentSoft: var(--accCandrecoviaSoft); --accentSolid: var(--accCandrecoviaSolid); --accentSolidHover: var(--accCandrecoviaSolidHover); --accentSolidActive: var(--accCandrecoviaSolidActive); --accentOnSolid: var(--accCandrecoviaOnSolid); } [data-accent='candrecovia'] { --accentText: var(--accCandrecoviaText); --accentRing: var(--accCandrecoviaRing); --accentSoft: var(--accCandrecoviaSoft); --accentSolid: var(--accCandrecoviaSolid); --accentSolidHover: var(--accCandrecoviaSolidHover); --accentSolidActive: var(--accCandrecoviaSolidActive); --accentOnSolid: var(--accCandrecoviaOnSolid); } [data-accent='midnight'] { --accentText: var(--accMidnightText); --accentRing: var(--accMidnightRing); --accentSoft: var(--accMidnightSoft); --accentSolid: var(--accMidnightSolid); --accentSolidHover: var(--accMidnightSolidHover); --accentSolidActive: var(--accMidnightSolidActive); --accentOnSolid: var(--accMidnightOnSolid); } [data-accent='ocean'] { --accentText: var(--accOceanText); --accentRing: var(--accOceanRing); --accentSoft: var(--accOceanSoft); --accentSolid: var(--accOceanSolid); --accentSolidHover: var(--accOceanSolidHover); --accentSolidActive: var(--accOceanSolidActive); --accentOnSolid: var(--accOceanOnSolid); } [data-accent='sunset'] { --accentText: var(--accSunsetText); --accentRing: var(--accSunsetRing); --accentSoft: var(--accSunsetSoft); --accentSolid: var(--accSunsetSolid); --accentSolidHover: var(--accSunsetSolidHover); --accentSolidActive: var(--accSunsetSolidActive); --accentOnSolid: var(--accSunsetOnSolid); } [data-accent='forest'] { --accentText: var(--accForestText); --accentRing: var(--accForestRing); --accentSoft: var(--accForestSoft); --accentSolid: var(--accForestSolid); --accentSolidHover: var(--accForestSolidHover); --accentSolidActive: var(--accForestSolidActive); --accentOnSolid: var(--accForestOnSolid); } [data-accent='violet'] { --accentText: var(--accVioletText); --accentRing: var(--accVioletRing); --accentSoft: var(--accVioletSoft); --accentSolid: var(--accVioletSolid); --accentSolidHover: var(--accVioletSolidHover); --accentSolidActive: var(--accVioletSolidActive); --accentOnSolid: var(--accVioletOnSolid); } [data-accent='rose'] { --accentText: var(--accRoseText); --accentRing: var(--accRoseRing); --accentSoft: var(--accRoseSoft); --accentSolid: var(--accRoseSolid); --accentSolidHover: var(--accRoseSolidHover); --accentSolidActive: var(--accRoseSolidActive); --accentOnSolid: var(--accRoseOnSolid); } [data-accent='sky'] { --accentText: var(--accSkyText); --accentRing: var(--accSkyRing); --accentSoft: var(--accSkySoft); --accentSolid: var(--accSkySolid); --accentSolidHover: var(--accSkySolidHover); --accentSolidActive: var(--accSkySolidActive); --accentOnSolid: var(--accSkyOnSolid); } [data-accent='amber'] { --accentText: var(--accAmberText); --accentRing: var(--accAmberRing); --accentSoft: var(--accAmberSoft); --accentSolid: var(--accAmberSolid); --accentSolidHover: var(--accAmberSolidHover); --accentSolidActive: var(--accAmberSolidActive); --accentOnSolid: var(--accAmberOnSolid); } :root, [data-theme], [data-accent] { --linkActive: color-mix(in oklab, var(--accentText) 33%, var(--textPrimary)); --accentSoftActive: color-mix(in srgb, var(--accentRing) 18%, var(--accentSoft)); } :root { --successText: var(--greenText); --successRing: var(--greenRing); --successSoft: var(--greenSoft); --successSolid: var(--greenSolid); --successOnSolid: var(--greenOnSolid); --warningText: var(--amberText); --warningRing: var(--amberRing); --warningSoft: var(--amberSoft); --warningSolid: var(--amberSolid); --warningOnSolid: var(--amberOnSolid); --dangerText: var(--redText); --dangerRing: var(--redRing); --dangerSoft: var(--redSoft); --dangerSolid: var(--redSolid); --dangerSolidHover: var(--redSolidHover); --dangerSolidActive: var(--redSolidActive); --dangerOnSolid: var(--redOnSolid); --infoText: var(--cyanText); --infoRing: var(--cyanRing); --infoSoft: var(--cyanSoft); --infoSolid: var(--cyanSolid); --infoOnSolid: var(--cyanOnSolid); --neutralText: var(--textSecondary); --neutralRing: var(--borderStrong); --neutralSoft: var(--surfaceSunken); --progressText: var(--violetText); --progressRing: var(--violetRing); --progressSoft: var(--violetSoft); } :root { --sevDebugText: var(--textMuted); --sevDebugSoft: var(--surfaceSunken); --sevDebugRing: var(--borderControl); --sevInfoText: var(--infoText); --sevInfoSoft: var(--infoSoft); --sevInfoRing: var(--infoRing); --sevNoticeText: var(--violetText); --sevNoticeSoft: var(--violetSoft); --sevNoticeRing: var(--violetRing); --sevWarningText: var(--warningText); --sevWarningSoft: var(--warningSoft); --sevWarningRing: var(--warningRing); --sevErrorText: var(--dangerText); --sevErrorSoft: var(--dangerSoft); --sevErrorRing: var(--dangerRing); --sevCriticalSolid: var(--orangeSolid); --sevCriticalOnSolid: var(--orangeOnSolid); --sevAlertSolid: var(--dangerSolid); --sevAlertOnSolid: var(--dangerOnSolid); --sevEmergencySolid: var(--magentaSolid); --sevEmergencyOnSolid: var(--magentaOnSolid); } :root { --fontSans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fontMono: ui-monospace, 'Cascadia Mono', 'SF Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace; --text2xs: 0.6875rem; --textXs: 0.75rem; --textSm: 0.8125rem; --textMd: 0.875rem; --textBase:0.9375rem; --textLg: 1.0625rem; --textXl: 1.25rem; --text2xl: 1.75rem; --text3xl: 1.875rem; --text4xl: 2.25rem; --weightNormal: 400; --weightMedium: 500; --weightSemibold: 600; --weightBold: 700; --leadingNone: 1; --leadingDisplay: 1.1; --leadingTight: 1.25; --leadingSnug: 1.4; --leadingNormal: 1.55; --leadingRelaxed: 1.7; --trackingTight: -0.02em; --trackingNormal: 0; --trackingWide: 0.02em; --trackingCaps: 0.06em; --measure: 68ch; --textareaMinH: 18rem; } @media (pointer: coarse) { :root { --textMd: 1rem; --textBase: 1rem; } } :root { --space0: 0; --space2: 0.125rem; --space4: 0.25rem; --space6: 0.375rem; --space8: 0.5rem; --space12: 0.75rem; --space16: 1rem; --space20: 1.25rem; --space24: 1.5rem; --space32: 2rem; --space40: 2.5rem; --space48: 3rem; --space64: 4rem; --space80: 5rem; --space96: 6rem; --padNudge: 0.125rem; --panelPad: calc(var(--space24) + var(--padNudge)); --controlHeightSm: 1.75rem; --controlHeightMd: 2.125rem; --controlHeightLg: 2.5rem; --affixPadStart: calc(var(--space12) + 1rem + var(--space8)); --searchMeasure: 27ch; --searchBoxMin: calc(var(--searchMeasure) + var(--affixPadStart) + var(--space12) + 2 * var(--borderWidth)); --touchTarget: 2.75rem; --tipMeasure: 20rem; --tipMeasureMin: 12rem; --countdownBarH: 0.1875rem; --chartPlotH: 13.75rem; --chartPlotHCompact: 7.5rem; --chartColGap: var(--space4); --chartBarFloor: 0.125rem; --uptimeBarH: 2.25rem; --uptimeGap: var(--space2); --uptimeSwatch: 0.625rem; --reportFilterW: 18rem; --reportStatMin: 14rem; --fieldLabelMin: 9rem; --fieldLabelMax: 14rem; --fieldHorizontalMin: calc(var(--fieldLabelMin) + var(--space16) + 12rem); --comboEntryMin: 4rem; } :root { --radiusNone: 0; --radiusSm: 0.25rem; --radiusMd: 0.5rem; --radiusLg: 0.875rem; --radiusXl: 1.125rem; --radiusFull: 999rem; } :root { --borderWidth: 1px; --borderWidthStrong: 2px; --focusRingWidth: 2px; --focusRingOffset: 2px; --focusRingColor: var(--accentRing); --focusRing: var(--focusRingWidth) solid var(--focusRingColor); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } @media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focusRingWidth) solid CanvasText; } } :root { --durationInstant: 80ms; --durationFast: 140ms; --durationBase: 200ms; --durationSlow: 240ms; --durationExit: 160ms; --durationCount: 700ms; --delayReshow: 300ms; --delayBusy: 300ms; --staggerStep: 40ms; --motionRise: var(--space8); --motionNudge: var(--space4); --enterScale: 0.98; --pressScale: 0.97; --durationSpin: 700ms; --durationPulse: 1400ms; --durationSweep: 1300ms; --durationBlink: 1060ms; --easeOut: cubic-bezier(0.2, 0, 0, 1); --easeIn: cubic-bezier(0.4, 0, 1, 1); --easeInOut: cubic-bezier(0.4, 0, 0.2, 1); } @keyframes enterRise { from { opacity: 0; transform: translateY(var(--motionRise)); } } @keyframes enterFade { from { opacity: 0; } } @keyframes enterPop { from { opacity: 0; transform: scale(0.6); } } @keyframes meterDraw { from { transform: scaleX(0); } } @keyframes exitFade { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { :root { --durationInstant: 1ms; --durationFast: 1ms; --durationBase: 1ms; --durationSlow: 1ms; --durationExit: 1ms; --durationCount: 1ms; --delayReshow: 0ms; --delayBusy: 0ms; --staggerStep: 0ms; --motionRise: 0; --motionNudge: 0; --enterScale: 1; --pressScale: 1; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } .appShellMain { view-transition-name: page; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-group(page) { animation-duration: var(--durationBase); } ::view-transition-old(page) { animation: exitFade var(--durationExit) var(--easeIn) both; } ::view-transition-new(page) { animation: enterFade var(--durationBase) var(--easeOut) both; } :root[data-theme-changing]::view-transition-old(root) { animation: exitFade var(--durationExit) var(--easeIn) both; } :root[data-theme-changing]::view-transition-new(root) { animation: enterFade var(--durationBase) var(--easeOut) both; } :root { --zBase: 0; --zSticky: 100; --zDropdown: 200; --zBackdrop: 300; --zModal: 400; --zDrawer: 400; --zPopover: 500; --zToast: 600; --zTooltip: 700; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; } :root { --scrollbarSize: 0.625rem; --scrollbarThumbThickness: 2px; --scrollbarTrack: transparent; } @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scrollbarThumb) var(--scrollbarTrack); } } @supports selector(::-webkit-scrollbar) { *::-webkit-scrollbar { width: var(--scrollbarSize); height: var(--scrollbarSize); } *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: var(--scrollbarTrack); } *::-webkit-scrollbar-thumb { background-color: var(--scrollbarThumb); border-radius: var(--radiusFull); border: calc((var(--scrollbarSize) - var(--scrollbarThumbThickness)) / 2) solid transparent; background-clip: padding-box; } @media (hover: hover) and (pointer: fine) { *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbarThumbHover); } } *::-webkit-scrollbar-thumb:active { background-color: var(--scrollbarThumbActive); } } @media (forced-colors: active) { @supports selector(::-webkit-scrollbar) { *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: revert; } } } .noScrollbar { scrollbar-width: none; -ms-overflow-style: none; } .noScrollbar::-webkit-scrollbar { width: 0; height: 0; } :where(html) { block-size: 100dvh; inline-size: 100dvw; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :where(body) { block-size: 100dvh; inline-size: 100dvw; overflow: hidden; background: var(--surfacePage); color: var(--textPrimary); font-family: var(--fontSans); font-size: var(--textBase); line-height: var(--leadingNormal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .scrollArea { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; min-block-size: 0; scrollbar-gutter: stable; } .scrollAreaX { overflow-x: auto; overflow-y: hidden; } .scrollAreaBoth { overflow: auto; } :where(h1, h2, h3, h4, h5, h6) { font-weight: var(--weightSemibold); line-height: var(--leadingTight); letter-spacing: var(--trackingTight); color: var(--textPrimary); } :where(button, input, select, textarea) { font: inherit; color: inherit; background: none; } :where(code, kbd, samp, pre) { font-family: var(--fontMono); font-size: 0.92em; } :where(table) { border-collapse: collapse; font-variant-numeric: tabular-nums; } :where(img, svg, video) { display: block; max-inline-size: 100%; } [hidden] { display: none !important; } :where(ul, ol) { list-style: none; } .visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html { text-wrap: pretty; } textarea, [contenteditable]:not([contenteditable='false']) { text-wrap-style: auto; } .titleHero { font-size: var(--text4xl); font-weight: var(--weightBold); line-height: var(--leadingDisplay); letter-spacing: var(--trackingTight); } .titleXl { font-size: var(--text3xl); font-weight: var(--weightSemibold); line-height: var(--leadingTight); letter-spacing: var(--trackingTight); } .titleLg { font-size: var(--text2xl); font-weight: var(--weightBold); line-height: var(--leadingTight); letter-spacing: var(--trackingTight); } .titleMd { font-size: var(--textXl); font-weight: var(--weightSemibold); line-height: var(--leadingTight); letter-spacing: var(--trackingTight); } .titleSm { font-size: var(--textLg); font-weight: var(--weightSemibold); line-height: var(--leadingTight); } .titleXs { font-size: var(--textBase);font-weight: var(--weightSemibold); line-height: var(--leadingSnug); } :is(.titleHero, .titleXl, .titleLg, .titleMd, .titleSm) { text-wrap: balance; } .titleEyebrow { font-size: var(--text2xs); font-weight: var(--weightSemibold); text-transform: uppercase; letter-spacing: var(--trackingCaps); color: var(--textMuted); line-height: var(--leadingSnug); } .titleGroup { display: grid; gap: var(--space6); } .text { font-size: var(--textBase); line-height: var(--leadingNormal); color: var(--textSecondary); } .textUi { font-size: var(--textMd); line-height: var(--leadingSnug); color: var(--textPrimary); } .textSm { font-size: var(--textSm); line-height: var(--leadingSnug); color: var(--textSecondary); } .textCaption{ font-size: var(--textXs); line-height: var(--leadingSnug); color: var(--textMuted); } :where(p):is(.textSm, .textCaption) { line-height: var(--leadingNormal); } .textPrimary { color: var(--textPrimary); } .textSecondary { color: var(--textSecondary); } .textMuted { color: var(--textMuted); } .textDisabled { color: var(--textDisabled); } .textAccent { color: var(--accentText); } .textSuccess { color: var(--successText); } .textWarning { color: var(--warningText); } .textDanger { color: var(--dangerText); } .textInfo { color: var(--infoText); } .weightNormal { font-weight: var(--weightNormal); } .weightMedium { font-weight: var(--weightMedium); } .weightSemibold { font-weight: var(--weightSemibold); } .weightBold { font-weight: var(--weightBold); } .prose { color: var(--textSecondary); font-size: var(--textBase); line-height: var(--leadingNormal); overflow-wrap: anywhere; } .proseReading { max-inline-size: var(--measure); } .textTyped { white-space: pre-line; overflow-wrap: anywhere; unicode-bidi: plaintext; } .prose > * + * { margin-top: var(--space16); } .prose h2 { font-size: var(--textXl); margin-top: var(--space32); } .prose h3 { font-size: var(--textLg); margin-top: var(--space24); } .prose ul, .prose ol { padding-left: var(--space24); display: grid; gap: var(--space6); } .prose li { list-style: revert; } .prose strong { color: var(--textPrimary); font-weight: var(--weightSemibold); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .truncateMiddle { display: flex; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; white-space: nowrap; } .truncateMiddleStart { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } .truncateMiddleEnd { flex: none; } .link, .prose a:not([class]) { color: var(--accentText); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; border-radius: var(--radiusSm); transition: text-decoration-thickness var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .link:hover, .prose a:not([class]):hover { text-decoration-thickness: 2px; color: color-mix(in oklab, var(--accentText) 67%, var(--textPrimary)); } } .link:active, .prose a:not([class]):active { text-decoration-thickness: 2px; color: var(--linkActive); } .linkQuiet { text-decoration: none; color: inherit; } @media (hover: hover) and (pointer: fine) { .linkQuiet:hover { text-decoration: underline; } } :root { --brandLinkBleed: var(--space4); --brandLinkHover: var(--surfaceRaisedHover); --brandLinkActive: var(--surfaceActive); } [data-theme='light'] .brandLink { --brandLinkHover: var(--surfaceRaised); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .brandLink { --brandLinkHover: var(--surfaceRaised); } } .brandLink { display: inline-flex; border-radius: var(--radiusSm); transition: background var(--durationInstant) var(--easeOut), box-shadow var(--durationInstant) var(--easeOut), transform var(--durationFast) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .brandLink:hover { background: var(--brandLinkHover); box-shadow: 0 0 0 var(--brandLinkBleed) var(--brandLinkHover); } } .brandLink:active { background: var(--brandLinkActive); box-shadow: 0 0 0 var(--brandLinkBleed) var(--brandLinkActive); transform: scale(var(--pressScale)); } :root { --iconExternal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); } .linkExternal::after { content: ''; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.25em; background: currentColor; mask-image: var(--iconExternal); mask-repeat: no-repeat; } @media (forced-colors: active) { .linkExternal::after { forced-color-adjust: none; background: LinkText; } } .mono { font-family: var(--fontMono); font-variant-numeric: tabular-nums; } .code { font-family: var(--fontMono); font-size: 0.92em; padding: 0.1em 0.35em; border-radius: var(--radiusSm); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); color: var(--textPrimary); tab-size: 4; overflow-wrap: anywhere; } .codeBlock { font-family: var(--fontMono); tab-size: 4; font-size: var(--textSm); line-height: var(--leadingSnug); padding: var(--space16); border-radius: var(--radiusMd); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); color: var(--textPrimary); overflow-x: auto; white-space: pre; margin: 0; } .codeBlock:focus-visible { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .codeBlockWrap { white-space: pre-wrap; overflow-wrap: anywhere; } .copyable { display: flex; align-items: center; gap: var(--space8); padding: var(--space6) var(--space6) var(--space6) var(--space12); border-radius: var(--radiusMd); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textSm); } .copyableValue { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--fontMono); } .kbd { display: inline-block; font-family: var(--fontMono); font-size: var(--textXs); line-height: 1.5; padding: 0.1em var(--space6); border: var(--borderWidth) solid var(--borderControl); border-bottom-width: 2px; border-radius: var(--radiusSm); background: var(--surfaceSunken); color: var(--textSecondary); white-space: nowrap; } .listPlain { list-style: none; margin: 0; padding: 0; } .listBullet { margin: 0; padding-left: var(--space20); display: grid; gap: var(--space6); color: var(--textSecondary); } .listBullet li { list-style: disc; } .listNumber { margin: 0; padding-left: var(--space20); display: grid; gap: var(--space6); color: var(--textSecondary); } .listNumber li { list-style: decimal; } .listCheck { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space8); } .listCheck li { display: flex; align-items: flex-start; gap: var(--space8); } .listCheck .icon { margin-top: 0.15em; } .divider { height: var(--borderWidth); background: var(--borderSubtle); border: 0; margin: var(--space24) 0; } .dividerVertical { width: var(--borderWidth); height: auto; align-self: stretch; margin: 0 var(--space8); } .dividerLabelled { display: flex; align-items: center; gap: var(--space12); color: var(--textMuted); font-size: var(--textXs); text-transform: uppercase; letter-spacing: var(--trackingCaps); font-weight: var(--weightSemibold); } .dividerLabelled::before, .dividerLabelled::after { content: ''; flex: 1; height: var(--borderWidth); background: var(--borderSubtle); } .quote { margin: 0; padding: var(--space12) var(--space16); border-left: 3px solid var(--accentRing); background: var(--surfaceSunken); border-radius: 0 var(--radiusMd) var(--radiusMd) 0; color: var(--textSecondary); max-width: var(--measure); } .quoteCite { display: block; margin-top: var(--space8); font-size: var(--textSm); color: var(--textMuted); font-style: normal; } .stack, .stack4, .stack6, .stack8, .stack12, .stack16, .stack20, .stack24, .stack32, .stack48 { grid-template-columns: minmax(0, 1fr); } .stack { display: grid; gap: var(--space16); } .stack4 { display: grid; gap: var(--space4); } .stack6 { display: grid; gap: var(--space6); } .stack8 { display: grid; gap: var(--space8); } .stack12 { display: grid; gap: var(--space12); } .stack16 { display: grid; gap: var(--space16); } .stack20 { display: grid; gap: var(--space20); } .stack24 { display: grid; gap: var(--space24); } .stack32 { display: grid; gap: var(--space32); } .stack48 { display: grid; gap: var(--space48); } .stack.stack > *, .stack4.stack4 > *, .stack6.stack6 > *, .stack8.stack8 > *, .stack12.stack12 > *, .stack16.stack16 > *, .stack20.stack20 > *, .stack24.stack24 > *, .stack32.stack32 > *, .stack48.stack48 > * { margin-block: 0; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space12); } .cluster8 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8); } .clusterEnd { justify-content: flex-end; } .clusterBetween { justify-content: space-between; } .clusterCenter { justify-content: center; } .clusterBottom { align-items: flex-end; } .autoGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--autoGridMin, 16rem), 100%), 1fr)); gap: var(--space16); } .sidebarLayout { display: grid; grid-template-columns: var(--sidebarWidth, 16rem) 1fr; gap: var(--space32); align-items: start; } @media (max-width: 60rem) { .sidebarLayout { grid-template-columns: 1fr; gap: var(--space20); } } .spacer { flex: 1; } .center { display: grid; place-items: center; } .field { display: grid; gap: var(--space12); } .fieldLabel { display: inline-flex; align-items: center; gap: var(--space6); font-size: var(--textSm); font-weight: var(--weightMedium); color: var(--textSecondary); line-height: var(--leadingSnug); position: relative; width: fit-content; } .fieldName { display: contents; } .fieldRequired { color: var(--dangerRing); font-weight: var(--weightNormal); } .labelIcon, .fieldInfo, .fieldStatus { flex: none; inline-size: 1em; block-size: 1em; vertical-align: -0.15em; } .labelIcon.icon, .fieldInfo > .icon, .fieldStatus > .icon { inline-size: 1em; block-size: 1em; } .fieldInfo { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--textMuted); cursor: help; border-radius: var(--radiusFull); transition: color var(--durationInstant) var(--easeOut); position: relative; } .fieldInfo::after { content: ''; position: absolute; inset: calc((var(--touchTarget) - 1em) / -2); } @media (hover: hover) and (pointer: fine) { .fieldInfo:hover { color: var(--accentText); } } .fieldInfo:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); color: var(--accentText); } :root { --tipSurface: var(--surfaceOverlay); --tipBorder: var(--borderSubtle); --tipRadius: var(--radiusMd); --tipPad: var(--space8) var(--space12); --tipShadow: var(--shadow2); } .fieldTip { position: absolute; bottom: calc(100% + var(--space8)); left: 0; z-index: var(--zTooltip); width: max-content; min-width: min(var(--tipMeasureMin), var(--fieldTipRoom, 100vw), calc(100vw - var(--space32))); max-width: min(var(--tipMeasure), var(--fieldTipRoom, 100vw), calc(100vw - var(--space32))); padding: var(--tipPad); border-radius: var(--tipRadius); background: var(--tipSurface); border: var(--borderWidth) solid var(--tipBorder); box-shadow: var(--tipShadow); font-family: var(--fontSans); font-size: var(--textSm); font-weight: var(--weightNormal); font-style: normal; font-variant-numeric: normal; line-height: var(--leadingSnug); letter-spacing: 0; word-spacing: normal; text-align: start; text-transform: none; text-indent: 0; text-shadow: none; white-space: normal; word-break: normal; hyphens: manual; cursor: default; color: var(--textPrimary); overflow-wrap: break-word; text-wrap: pretty; pointer-events: none; display: none; opacity: 0; visibility: hidden; transform: translateY(var(--motionNudge)); transition: opacity var(--durationInstant) var(--easeIn), transform var(--durationInstant) var(--easeIn), visibility var(--durationInstant), overlay var(--durationInstant) allow-discrete, display var(--durationInstant) allow-discrete; } .fieldTip[popover] { position: fixed; inset: auto; margin: 0; } .fieldTip:not([popover])[data-placement='below'] { bottom: auto; top: calc(100% + var(--space8)); } .fieldTip[data-placement='below'] { transform: translateY(calc(var(--motionNudge) * -1)); } .fieldInfo:focus + .fieldTip, .fieldStatus:focus + .fieldTip, .fieldTip:popover-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--durationFast) var(--easeOut), transform var(--durationFast) var(--easeOut), visibility var(--durationFast), overlay var(--durationFast) allow-discrete, display var(--durationFast) allow-discrete; } @media (hover: hover) and (pointer: fine) { .fieldInfo:hover + .fieldTip, .fieldStatus:hover + .fieldTip { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--durationFast) var(--easeOut), transform var(--durationFast) var(--easeOut), visibility var(--durationFast), overlay var(--durationFast) allow-discrete, display var(--durationFast) allow-discrete; } } .fieldInfo:focus + .fieldTip:not([popover]), .fieldStatus:focus + .fieldTip:not([popover]), .fieldTip:popover-open { display: block; } @media (hover: hover) and (pointer: fine) { .fieldInfo:hover + .fieldTip:not([popover]), .fieldStatus:hover + .fieldTip:not([popover]) { display: block; } } @starting-style { .fieldInfo:focus + .fieldTip:not([popover]), .fieldStatus:focus + .fieldTip:not([popover]), .fieldTip:popover-open { opacity: 0; transform: translateY(var(--motionNudge)); } .fieldTip[data-placement='below']:popover-open { transform: translateY(calc(var(--motionNudge) * -1)); } } @media (hover: hover) and (pointer: fine) { @starting-style { .fieldInfo:hover + .fieldTip:not([popover]), .fieldStatus:hover + .fieldTip:not([popover]) { opacity: 0; transform: translateY(var(--motionNudge)); } } } .fieldTip[data-instant], .fieldTip[data-instant]:popover-open, :is(.fieldInfo, .fieldStatus):focus + .fieldTip[data-instant] { transition: none; } @media (hover: hover) and (pointer: fine) { :is(.fieldInfo, .fieldStatus):hover + .fieldTip[data-instant] { transition: none; } } .fieldStatus { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: help; border-radius: var(--radiusFull); position: relative; } .fieldStatus::after { content: ''; position: absolute; inset: calc((var(--touchTarget) - 1em) / -2); } .fieldStatus { animation: enterPop var(--durationFast) var(--easeOut); } .fieldStatus[data-status='error'] { color: var(--dangerText); } .fieldStatus[data-status='success'] { color: var(--successText); } .fieldStatus[data-status='warning'] { color: var(--warningText); } .fieldStatus[data-status='info'] { color: var(--accentText); } .fieldTipError { border-color: color-mix(in srgb, var(--dangerRing) 45%, transparent); background: var(--dangerSoft); color: var(--dangerText); } .fieldTipSuccess { border-color: color-mix(in srgb, var(--successRing) 45%, transparent); background: var(--successSoft); color: var(--successText); } .fieldTipWarning { border-color: color-mix(in srgb, var(--warningRing) 45%, transparent); background: var(--warningSoft); color: var(--warningText); } .fieldTipInfo { border-color: color-mix(in srgb, var(--accentRing) 45%, transparent); background: var(--accentSoft); color: var(--accentText); } .fieldError { display: flex; align-items: flex-start; gap: var(--space6); font-size: var(--textSm); line-height: var(--leadingSnug); color: var(--dangerText); } .fieldControl { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8) var(--space12); } .fieldHint { margin: 0; font-size: var(--textSm); line-height: var(--leadingSnug); color: var(--textMuted); } .fieldControl > .fieldHint { flex: 1 1 0; max-inline-size: max-content; } .fieldControl > .inputGroup:not(:has(> .input:is([inputmode='numeric'], [inputmode='decimal']))):has(~ .fieldHint) { --controlBesideHint: 18rem; flex-basis: var(--controlBesideHint); } .fieldControl > .inputGroup:not(:has(> .input:is([inputmode='numeric'], [inputmode='decimal']))) ~ .fieldHint { flex: 0 0 auto; max-inline-size: 100%; } .fieldError .icon { flex: none; margin-top: 0.125em; } .fieldError + .fieldError { margin-top: calc(var(--space6) * -1); } .fieldHorizontal { grid-template-columns: minmax(var(--fieldLabelMin), var(--fieldLabelMax)) 1fr; align-items: start; gap: var(--space16); } .fieldHorizontal .fieldLabel { padding-top: var(--space8); } .fieldHorizontal > .switch, .fieldHorizontal .fieldControl > .switch { min-block-size: var(--controlHeightMd); } .panelBody { container-type: inline-size; container-name: panel-body; } @container panel-body (max-width: 30rem) { .fieldHorizontal { grid-template-columns: 1fr; gap: var(--space12); } .fieldHorizontal .fieldLabel { padding-top: 0; } .fieldHorizontal > .switch, .fieldHorizontal .fieldControl > .switch { min-block-size: 0; } } @supports not (container-type: inline-size) { .fieldHorizontal { grid-template-columns: 1fr; } .fieldHorizontal .fieldLabel { padding-top: 0; } } .fieldRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--fieldHorizontalMin), 100%), 1fr)); column-gap: var(--space24); row-gap: var(--space24); } .fieldGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--fieldMin, 16rem), 100%), 1fr)); grid-auto-rows: auto; column-gap: var(--space16); row-gap: var(--space24); } .fieldGrid > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space12); } .fieldGrid > .fieldFull { grid-column: 1 / -1; } .fieldGridSplit { grid-template-columns: minmax(0, var(--fieldLead, 12rem)) minmax(0, 1fr); } @container panel-body (max-width: 30rem) { .fieldGridSplit { grid-template-columns: minmax(0, 1fr); } } @supports not (container-type: inline-size) { .fieldGridSplit { grid-template-columns: minmax(0, 1fr); } } .fieldGrid > .field > :last-child:not(.fieldError) { margin-bottom: 0; } @supports not (grid-template-rows: subgrid) { .fieldGrid > .field { grid-row: auto; grid-template-rows: none; gap: var(--space12); } .fieldGrid > .field::after { content: ''; display: block; min-height: 1.15rem; } .fieldGrid > .field:has(.fieldError)::after { display: none; } } .input, .textarea, .select { min-inline-size: 0; width: 100%; min-width: 0; min-block-size: var(--controlHeightMd); padding: 0 var(--space12); font-size: var(--textMd); line-height: var(--leadingSnug); color: var(--textPrimary); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderControl); border-radius: var(--radiusMd); transition: border-color var(--durationInstant) var(--easeOut), background var(--durationInstant) var(--easeOut); } .textarea, textarea { height: auto; min-height: var(--textareaMinH); padding: var(--space8) var(--space12); resize: none; font-family: inherit; } .textareaProse { min-height: calc(5lh + 2 * var(--space8) + 2 * var(--borderWidth)); max-height: var(--textareaMinH); field-sizing: content; } .segmented { display: inline-flex; border: var(--borderWidth) solid var(--borderControl); border-radius: var(--radiusMd); overflow: hidden; } .segmented button, .segmentedOption span { display: flex; align-items: center; gap: var(--space6); padding: var(--space6) var(--space8); border: 0; background: transparent; color: var(--textSecondary); font: inherit; font-size: var(--textSm); cursor: pointer; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (pointer: coarse) { .segmented button, .segmentedOption span { min-block-size: var(--touchTarget); } } .segmented > button + button, .segmented > .segmentedOption + .segmentedOption { border-inline-start: var(--borderWidth) solid var(--borderControl); } .segmented > :first-child, .segmented > :first-child > span { border-start-start-radius: calc(var(--radiusMd) - var(--borderWidth)); border-end-start-radius: calc(var(--radiusMd) - var(--borderWidth)); } .segmented > :last-child, .segmented > :last-child > span { border-start-end-radius: calc(var(--radiusMd) - var(--borderWidth)); border-end-end-radius: calc(var(--radiusMd) - var(--borderWidth)); } .segmented .icon { font-size: var(--textMd); } @media (hover: hover) and (pointer: fine) { .segmented button:hover:not([aria-pressed='true'], :disabled, [aria-disabled='true']), .segmentedOption input:hover:not(:checked, :disabled, [aria-disabled='true']) + span { background: var(--surfaceRaised); } } .segmented button:active:not([aria-pressed='true'], :disabled, [aria-disabled='true']), .segmentedOption input:active:not(:checked, :disabled, [aria-disabled='true']) + span, .segmentedOption:active input:not(:checked, :disabled, [aria-disabled='true']) + span { background: var(--surfaceActive); } .segmented button[aria-pressed='true'], .segmentedOption input:checked + span { background: var(--accentSoft); color: var(--accentText); box-shadow: inset 0 0 0 var(--borderWidth) var(--accentRing); } @media (forced-colors: active) { .segmented button[aria-pressed='true'], .segmentedOption input:checked + span { outline: var(--borderWidthStrong) solid Highlight; outline-offset: calc(var(--borderWidthStrong) * -1); } } .segmented button:disabled, .segmented button[aria-disabled='true'], .segmentedOption input:is(:disabled, [aria-disabled='true']) + span { color: var(--textDisabled); cursor: not-allowed; } .input::placeholder, .textarea::placeholder { color: var(--textPlaceholder); opacity: 1; } .input[type='search'] { text-overflow: ellipsis; } .inputGroup:has(> .input[type='search']), :is(.field, .fieldControl > *):has(.inputGroup > .input[type='search']) { min-inline-size: min(100%, var(--searchBoxMin)); } .input:is([inputmode='numeric'], [inputmode='decimal']) { flex: none; inline-size: calc( 9ch + var(--inputPadStart, var(--space12)) + var(--inputPadEnd, var(--space12)) + 2 * var(--borderWidth) ); max-inline-size: 100%; } .inputGroup:has(> .input:is([inputmode='numeric'], [inputmode='decimal'])) { flex: none; max-inline-size: 100%; } @media (hover: hover) and (pointer: fine) { .input:hover:not(:disabled, [aria-disabled='true']):not([readonly]), .textarea:hover:not(:disabled, [aria-disabled='true']):not([readonly]), .select:hover:not(:disabled, [aria-disabled='true']) { border-color: var(--borderStrong); } } .input[aria-invalid='true'], .textarea[aria-invalid='true'], .select[aria-invalid='true'], .input[data-status='error'] { border-color: var(--dangerRing); background-image: linear-gradient(var(--dangerSoft), var(--dangerSoft)); } .input[data-status='success'], .textarea[data-status='success'], .select[data-status='success'] { border-color: var(--successRing); background-image: linear-gradient(var(--successSoft), var(--successSoft)); } .input[data-status='warning'], .textarea[data-status='warning'], .select[data-status='warning'] { border-color: var(--warningRing); background-image: linear-gradient(var(--warningSoft), var(--warningSoft)); } .input[data-status='success']:focus-visible { outline-color: var(--successRing); } .input[data-status='warning']:focus-visible { outline-color: var(--warningRing); } .input[aria-invalid='true']:focus-visible, .textarea[aria-invalid='true']:focus-visible, .select[aria-invalid='true']:focus-visible { outline-color: var(--dangerRing); } .input:disabled, .textarea:disabled, .select:disabled { color: var(--textDisabled); background: var(--surfaceRaised); border-color: var(--borderSubtle); cursor: not-allowed; } .input[readonly], .textarea[readonly] { background: var(--surfaceRaised); border-color: var(--borderControl); border-style: dashed; color: var(--textSecondary); cursor: default; } .inputSm, .selectSm { min-block-size: var(--controlHeightSm); font-size: var(--textSm); padding-inline: var(--space8); } .inputLg, .selectLg { min-block-size: var(--controlHeightLg); font-size: var(--textBase); } @media (pointer: coarse) { .inputSm, .selectSm { font-size: var(--textMd); } } .colorField { display: flex; gap: var(--space8); align-items: center; min-inline-size: 0; } .colorField .input { flex: 1; min-inline-size: 0; font-family: var(--fontMono); } .colorField input[type='color'] { flex: none; inline-size: var(--controlHeightMd); block-size: var(--controlHeightMd); padding: var(--space4); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderControl); border-radius: var(--radiusMd); cursor: pointer; } .colorField input[type='color']::-webkit-color-swatch-wrapper { padding: 0; } .colorField input[type='color']::-webkit-color-swatch { border: 0; border-radius: var(--radiusSm); } .colorField input[type='color']::-moz-color-swatch { border: 0; border-radius: var(--radiusSm); } @media (hover: hover) and (pointer: fine) { .colorField input[type='color']:hover { border-color: var(--borderStrong); } } .colorField input[type='color']:active:not(:disabled, [aria-disabled='true']) { border-color: var(--borderStrong); background: var(--surfaceActive); } .colorField input[type='color']:focus-visible { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .inputGroup { min-inline-size: 0; position: relative; display: flex; align-items: center; flex: 1 1 auto; } .inputGroup .input { padding-left: var(--inputPadStart, var(--space12)); padding-right: var(--inputPadEnd, var(--space12)); } .inputGroup:has(.inputGroupAffixStart) .input { padding-left: var(--inputPadStart, var(--affixPadStart)); } .inputGroup:has(.inputGroupAffixEnd) .input { padding-right: var(--inputPadEnd, var(--affixPadStart)); } .inputGroupAffix { position: absolute; display: inline-flex; align-items: center; gap: var(--space4); color: var(--textMuted); font-size: var(--textSm); pointer-events: none; } .inputGroupAffixStart { left: var(--space12); } .inputGroupAffixEnd { right: var(--space12); } .inputGroupButton { --revealSize: 1.75rem; --revealTarget: var(--touchTarget); position: absolute; right: var(--space4); display: inline-flex; align-items: center; justify-content: center; width: var(--revealSize); height: var(--revealSize); padding: 0; border: 0; border-radius: var(--radiusSm); background: none; color: var(--textMuted); cursor: pointer; pointer-events: auto; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } .inputGroupButton::after { content: ''; position: absolute; inset: calc((var(--revealTarget) - var(--revealSize)) / -2); } @media (hover: hover) and (pointer: fine) { .inputGroupButton:hover { color: var(--textPrimary); background: var(--surfaceRaisedHover); } } .inputGroupButton:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .inputGroup:has(.input:placeholder-shown) .inputGroupClear, .inputGroup:has(.input:disabled) .inputGroupClear { display: none; } .inputGroup:has(.inputGroupClear):not(:has(.input:placeholder-shown)) .input { padding-right: var(--inputPadEnd, var(--affixPadStart)); } .select { appearance: none; padding-right: var(--space32); cursor: pointer; } .selectWrap { position: relative; display: block; } .selectWrap::after { content: ''; position: absolute; right: var(--space12); top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.35em; border-right: 2px solid var(--textMuted); border-bottom: 2px solid var(--textMuted); transform: rotate(45deg); pointer-events: none; } .select option { background: var(--surfaceOverlay); color: var(--textPrimary); } .input[data-loading='true'], .select[data-loading='true'] { padding-right: var(--space32); } .inputGroupSpinner { position: absolute; right: var(--space12); pointer-events: none; } .durationInput { --durationUnitMeasure: 8ch; min-inline-size: 0; display: flex; align-items: center; gap: var(--space8); flex: none; max-inline-size: 100%; } .durationInput > .combo { flex: none; inline-size: calc( max(var(--durationUnitMeasure), var(--comboEntryMin)) + 2 * var(--space8) + 2 * var(--borderWidth) ); } .durationInput > .input:is([inputmode='numeric'], [inputmode='decimal']) { flex: 0 1 auto; min-inline-size: 0; } .tagInput, .comboControl { --chipGap: var(--space4); width: 100%; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--chipGap); min-height: var(--controlHeightMd); padding: var(--space4) var(--space8); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderControl); border-radius: var(--radiusMd); cursor: text; transition: border-color var(--durationInstant) var(--easeOut), background var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .tagInput:hover, .comboControl:not(:has(.comboInput:disabled)):hover { border-color: var(--borderStrong); } } .comboControl:has(.comboInput:disabled) { background: var(--surfaceRaised); border-color: var(--borderSubtle); cursor: not-allowed; } .comboInput:disabled { color: var(--textDisabled); cursor: not-allowed; } .tagInput:focus-within, .comboControl:focus-within { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .tagInput[data-status='error'] { border-color: var(--dangerRing); background-image: linear-gradient(var(--dangerSoft), var(--dangerSoft)); } .tagInput[data-status='error']:focus-within { outline-color: var(--dangerRing); } .tagInput[data-disabled='true'] { background: var(--surfaceRaised); border-color: var(--borderSubtle); cursor: not-allowed; } .tagInputEntry, .comboInput { flex: 1; min-width: var(--comboEntryMin); border: 0; background: none; color: var(--textPrimary); font-size: var(--textMd); padding: 0; height: 1.5rem; } .tagInputEntry:focus-visible, .comboInput:focus-visible { outline: none; } .tagInputEntry::placeholder, .comboInput::placeholder { color: var(--textPlaceholder); } .tagInput .tagRemove { --tagRemove: 1.25rem; --tagRemoveTarget: var(--touchTarget); width: var(--tagRemove); height: auto; align-self: stretch; } .tagInput .tagRemove::after { inset-block: calc((var(--space2) + var(--borderWidth)) * -1); inset-inline: calc((var(--tagRemoveTarget) - var(--tagRemove)) / -2); } @media (pointer: coarse) { .tagInput .tag { min-height: var(--touchTarget); } } .check { display: inline-flex; align-items: flex-start; gap: var(--space8); cursor: pointer; font-size: var(--textMd); line-height: var(--leadingSnug); position: relative; } .check input[type='checkbox'], .check input[type='radio'], .swatchCard input[type='radio'] { appearance: none; flex: none; width: 1.0625rem; height: 1.0625rem; margin: 0; margin-top: 0.1em; border: var(--borderWidthStrong) solid var(--borderControl); background: var(--surfaceSunken); cursor: pointer; transition: background var(--durationFast) var(--easeOut), border-color var(--durationFast) var(--easeOut); } .check input[type='checkbox'] { border-radius: var(--radiusSm); } .check input[type='radio'], .swatchCard input[type='radio'] { border-radius: var(--radiusFull); } .swatchCard input[type='radio'] { margin-top: 0; } @media (hover: hover) and (pointer: fine) { .check:hover input:not(:disabled, [aria-disabled='true']), .swatchCard:hover input:not(:disabled, [aria-disabled='true']) { border-color: var(--borderStrong); } } .check:active:not(:has(a:active, button:active)) input:not(:checked, :indeterminate, :disabled, [aria-disabled='true']) { background: var(--surfaceActive); border-color: var(--borderStrong); } .check:active:not(:has(a:active, button:active)) input[type='checkbox']:is(:checked, :indeterminate):not(:disabled, [aria-disabled='true']) { background: var(--accentSolidActive); border-color: var(--accentSolidActive); } .check input:checked, .check input:indeterminate, .swatchCard input:checked { background: var(--accentSolid); border-color: var(--accentSolid); } .check input[type='checkbox']:checked::after, .check input[type='checkbox']:indeterminate::after { content: ''; display: block; width: 100%; height: 100%; background: var(--accentOnSolid); mask-position: center; mask-repeat: no-repeat; mask-size: 0.75rem; animation: enterPop var(--durationFast) var(--easeOut); } .check input[type='checkbox']:checked::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); } .check input[type='checkbox']:indeterminate::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } .check input[type='radio']:checked::after, .swatchCard input[type='radio']:checked::after { content: ''; display: block; width: 100%; height: 100%; border-radius: var(--radiusFull); background: var(--accentOnSolid); transform: scale(0.42); } .check input:disabled, .swatchCard input:disabled { border-color: var(--borderSubtle); background: var(--surfaceRaised); cursor: not-allowed; } .check input:disabled:checked, .swatchCard input:disabled:checked { background: var(--textDisabled); border-color: var(--textDisabled); } .check:has(input:disabled) { color: var(--textDisabled); cursor: not-allowed; } .checkText { display: grid; gap: var(--space2); } .checkHint { font-size: var(--textSm); color: var(--textMuted); } .switch { display: inline-flex; align-items: center; gap: var(--space8); cursor: pointer; font-size: var(--textMd); background: none; border: 0; padding: 0; color: inherit; text-align: left; } .switchTrack { --switchW: 2.25rem; --switchH: 1.25rem; --switchInset: 0.125rem; --switchThumb: 0.75rem; flex: none; position: relative; width: var(--switchW); height: var(--switchH); border-radius: var(--radiusFull); background: var(--surfaceSunken); border: var(--borderWidthStrong) solid var(--borderControl); transition: background var(--durationFast) var(--easeOut), border-color var(--durationFast) var(--easeOut); } .switchThumb { position: absolute; inset-block: 0; margin-block: auto; inset-inline-start: var(--switchInset); width: var(--switchThumb); height: var(--switchThumb); border-radius: var(--radiusFull); background: var(--borderControl); transition: transform var(--durationFast) var(--easeOut), scale var(--durationFast) var(--easeOut), background var(--durationFast) var(--easeOut); } .switch[aria-checked='true'] .switchTrack { background: var(--accentSolid); border-color: var(--accentSolid); } .switch[aria-invalid='true'] .switchTrack { border-color: var(--dangerRing); background-image: linear-gradient(var(--dangerSoft), var(--dangerSoft)); } .switch[aria-invalid='true']:focus-visible { outline-color: var(--dangerRing); } .switch[aria-checked='true'] .switchThumb { transform: translateX(calc( var(--switchW) - 2 * var(--borderWidthStrong) - 2 * var(--switchInset) - var(--switchThumb) )); background: var(--accentOnSolid); } @media (hover: hover) and (pointer: fine) { .switch:hover:not(:disabled, [aria-disabled='true']) .switchTrack { border-color: var(--borderStrong); } .switch[aria-checked='true']:hover:not(:disabled, [aria-disabled='true']) .switchTrack { background: var(--accentSolidHover); border-color: var(--accentSolidHover); } } .switch:active:not(:disabled, [aria-disabled='true']) .switchTrack { background: var(--surfaceActive); border-color: var(--borderStrong); } .switch[aria-checked='true']:active:not(:disabled, [aria-disabled='true']) .switchTrack { background: var(--accentSolidActive); border-color: var(--accentSolidActive); } .switch:active:not(:disabled, [aria-disabled='true']) .switchThumb { scale: var(--pressScale); } .switch:disabled { cursor: not-allowed; color: var(--textDisabled); } .switch:disabled .switchTrack { border-color: var(--borderSubtle); background: var(--surfaceRaised); } .switch:disabled .switchThumb { background: var(--textDisabled); } @media (forced-colors: active) { .switch[aria-checked='true'] .switchTrack { background: Highlight; } .check input:checked, .swatchCard input:checked { background: Highlight; border-color: Highlight; } .switch[aria-checked='true']:active:not(:disabled, [aria-disabled='true']) .switchTrack, .check:active:not(:has(a:active, button:active)) input[type='checkbox']:is(:checked, :indeterminate):not(:disabled, [aria-disabled='true']) { background: Highlight; border-color: Highlight; } } .slider { appearance: none; width: 100%; height: var(--controlHeightMd); background: none; cursor: pointer; } .slider::-webkit-slider-runnable-track { height: 0.375rem; border-radius: var(--radiusFull); background: linear-gradient(to right, var(--accentSolid) var(--sliderFill, 50%), var(--surfaceSunken) var(--sliderFill, 50%)); border: var(--borderWidth) solid var(--borderControl); } .slider::-moz-range-track { height: 0.375rem; border-radius: var(--radiusFull); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderControl); } .slider::-moz-range-progress { height: 0.375rem; border-radius: var(--radiusFull); background: var(--accentSolid); } .slider::-webkit-slider-thumb { appearance: none; width: 1.125rem; height: 1.125rem; margin-top: -0.4375rem; border-radius: var(--radiusFull); background: var(--accentSolid); border: var(--borderWidthStrong) solid var(--accentOnSolid); box-shadow: var(--shadow1); transition: background var(--durationInstant) var(--easeOut); } .slider::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: var(--radiusFull); background: var(--accentSolid); border: var(--borderWidthStrong) solid var(--accentOnSolid); transition: background var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .slider:hover:not(:disabled, [aria-disabled='true'])::-webkit-slider-thumb { background: var(--accentSolidHover); } .slider:hover:not(:disabled, [aria-disabled='true'])::-moz-range-thumb { background: var(--accentSolidHover); } } .slider:active:not(:disabled, [aria-disabled='true'])::-webkit-slider-thumb { background: var(--accentSolidActive); } .slider:active:not(:disabled, [aria-disabled='true'])::-moz-range-thumb { background: var(--accentSolidActive); } .slider:disabled { cursor: not-allowed; } .slider:disabled::-webkit-slider-thumb { background: var(--textDisabled); } .slider:disabled::-moz-range-thumb { background: var(--textDisabled); } .sliderRow { display: grid; grid-template-columns: 1fr auto; gap: var(--space16); align-items: center; } .sliderRowValue { min-width: 3.5rem; text-align: right; font-family: var(--fontMono); font-size: var(--textSm); font-variant-numeric: tabular-nums; color: var(--textSecondary); } .dropzone { display: grid; place-items: center; gap: var(--space8); padding: var(--space32) var(--space24); min-block-size: 7.5rem; text-align: center; border: var(--borderWidthStrong) dashed var(--borderControl); border-radius: var(--radiusLg); background: var(--surfaceSunken); color: var(--textSecondary); cursor: pointer; transition: border-color var(--durationFast) var(--easeOut), background var(--durationFast) var(--easeOut); } .dropzone:focus-within { border-color: var(--accentRing); background: var(--accentSoft); } @media (hover: hover) and (pointer: fine) { .dropzone:hover { border-color: var(--accentRing); background: var(--accentSoft); } } .dropzone:not(:has(input[type='file']:disabled)):active { border-color: var(--accentRing); background: var(--accentSoftActive); } .dropzone:has(input[type='file']:focus-visible) { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .dropzone:has(input[type='file'][aria-invalid='true']) { border-color: var(--dangerRing); background-image: linear-gradient(var(--dangerSoft), var(--dangerSoft)); } .dropzone:has(input[type='file'][aria-invalid='true']:focus-visible) { outline-color: var(--dangerRing); } .dropzone[data-dragging='true'] { border-color: var(--accentRing); border-style: solid; background: var(--accentSoft); } .dropzone:has(input[type='file']:disabled) { cursor: not-allowed; } .dropzone:has(input[type='file']:disabled):active { border-color: var(--borderControl); background: var(--surfaceSunken); } @media (hover: hover) and (pointer: fine) { .dropzone:has(input[type='file']:disabled):hover { border-color: var(--borderControl); background: var(--surfaceSunken); } } .dropzone:has(input[type='file']:disabled) .dropzoneTitle { color: var(--textMuted); } .dropzoneOverlay { display: grid; place-items: center; gap: var(--space8); } .dropzonePreview { max-inline-size: 100%; } .dropzone[data-preview='true'] { position: relative; padding: var(--space16); } .dropzone[data-preview='true'] .dropzoneOverlay { position: absolute; inset: 0; padding: var(--space16); background: var(--scrim); color: var(--textOnScrim); border-radius: calc(var(--radiusLg) - var(--borderWidthStrong)); opacity: 0; transition: opacity var(--durationFast) var(--easeOut); } .dropzone[data-preview='true']:focus-within .dropzoneOverlay, .dropzone[data-preview='true'][data-dragging='true'] .dropzoneOverlay { opacity: 1; } @media (hover: hover) and (pointer: fine) { .dropzone[data-preview='true']:hover .dropzoneOverlay { opacity: 1; } } .dropzone[data-preview='true'] .dropzonePreview { transition: opacity var(--durationFast) var(--easeOut); } .dropzone[data-preview='true']:focus-within .dropzonePreview, .dropzone[data-preview='true'][data-dragging='true'] .dropzonePreview { opacity: 0.15; } @media (hover: hover) and (pointer: fine) { .dropzone[data-preview='true']:hover .dropzonePreview { opacity: 0.15; } } .dropzone[data-preview='true'] .dropzoneTitle { color: var(--textOnScrim); } @media not all and (hover: hover) and (pointer: fine) { .dropzone[data-preview='true'] .dropzoneOverlay { opacity: 1; inset: auto 0 0 0; padding: var(--space8); border-radius: 0 0 calc(var(--radiusLg) - var(--borderWidthStrong)) calc(var(--radiusLg) - var(--borderWidthStrong)); } } .dropzone input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; } .dropzoneTitle { font-weight: var(--weightMedium); color: var(--textPrimary); } .dropzoneHint { font-size: var(--textSm); color: var(--textMuted); } .fileItem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space12); padding: var(--space8) var(--space12); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); background: var(--surfaceRaised); font-size: var(--textMd); } .fileItemName { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fileItemSize { color: var(--textMuted); font-size: var(--textSm); font-variant-numeric: tabular-nums; } .combo { position: relative; flex: 1 1 auto; min-inline-size: 0; } .comboChips { display: contents; } .comboList { position: fixed; inset: auto; margin: 0; z-index: var(--zDropdown); max-height: 15rem; overflow-y: auto; padding: var(--space4); list-style: none; background: var(--surfaceOverlay); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); box-shadow: var(--shadow2); transition: opacity var(--durationInstant) var(--easeIn), transform var(--durationInstant) var(--easeIn), overlay var(--durationInstant) allow-discrete, display var(--durationInstant) allow-discrete; } .comboList[hidden] { display: none; } .comboList[popover]:not(:popover-open) { opacity: 0; transform: translateY(calc(var(--motionNudge) * -1)); } .comboList:popover-open { transition: opacity var(--durationFast) var(--easeOut), transform var(--durationFast) var(--easeOut), overlay var(--durationInstant) allow-discrete, display var(--durationInstant) allow-discrete; } @starting-style { .comboList:popover-open { opacity: 0; transform: translateY(calc(var(--motionNudge) * -1)); } } .comboOption { display: flex; align-items: center; gap: var(--space8); padding: var(--space6) var(--space8); border-radius: var(--radiusSm); font-size: var(--textMd); cursor: pointer; color: var(--textPrimary); } .comboOption[data-active='true'] { background: var(--accentSoft); color: var(--accentText); } @media (forced-colors: active) { .comboOption[data-active='true'] { forced-color-adjust: none; background: Highlight; color: HighlightText; } } @media (pointer: coarse) { .comboOption { min-block-size: var(--touchTarget); } } .comboOption[aria-selected='true'] { font-weight: var(--weightMedium); } .comboOption[aria-selected='true']::after { content: ''; margin-left: auto; } .comboEmpty { padding: var(--space12); font-size: var(--textSm); color: var(--textMuted); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space6); min-height: var(--controlHeightMd); min-inline-size: fit-content; max-inline-size: 100%; padding: 0 var(--space16); border: var(--borderWidth) solid transparent; border-radius: var(--radiusMd); font-size: var(--textMd); font-weight: var(--weightMedium); line-height: var(--leadingSnug); cursor: pointer; position: relative; text-decoration: none; transition: background var(--durationInstant) var(--easeOut), border-color var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut), transform var(--durationFast) var(--easeOut); } .btn:active:not(:disabled, [aria-disabled='true']):not(.btnChromeless) { transform: scale(var(--pressScale)); } .btn::before { content: ''; position: absolute; inset: calc((var(--touchTarget) - var(--controlHeightMd)) / -2 - var(--borderWidth)) 0; } .btnSm { min-height: var(--controlHeightSm); padding: 0 var(--space12); font-size: var(--textSm); } .btnSm::before { inset: calc((var(--touchTarget) - var(--controlHeightSm)) / -2 - var(--borderWidth)) 0; } .btnLg { min-height: var(--controlHeightLg); padding: 0 var(--space24); font-size: var(--textBase); } .btnLg::before { inset: calc((var(--touchTarget) - var(--controlHeightLg)) / -2 - var(--borderWidth)) 0; } @media (pointer: coarse) { :is(.alertActions, .cluster, .cluster8, .pageHeaderActions, .panelFooterActions, .drawerFooterActions, .threadActions, .tableRowActions, .calendarPresets):has(> .btnSm) { row-gap: calc(var(--touchTarget) - var(--controlHeightSm)); } :is(.alertActions, .cluster8, .pageHeaderActions, .threadActions, .tableRowActions):has(> .btn:not(.btnSm, .btnLg)) { row-gap: calc(var(--touchTarget) - var(--controlHeightMd)); } :is(.alertActions, .cluster8, .pageHeaderActions, .threadActions, .tableRowActions):has(> .btnSm):has(> .btn:not(.btnSm, .btnLg)) { row-gap: calc(var(--touchTarget) - var(--controlHeightSm)); } } .btnPrimary { background: var(--accentSolid); color: var(--accentOnSolid); } .btnPrimary:not(:disabled, [aria-disabled='true']) { box-shadow: var(--glowPrimary); } @media (hover: hover) and (pointer: fine) { .btnPrimary:hover:not(:disabled, [aria-disabled='true']) { background: var(--accentSolidHover); } } .btnPrimary:active:not(:disabled, [aria-disabled='true']) { background: var(--accentSolidActive); } .btnSecondary { background: var(--surfaceRaised); color: var(--textPrimary); border-color: var(--borderControl); } @media (hover: hover) and (pointer: fine) { .btnSecondary:hover:not(:disabled, [aria-disabled='true']) { background: var(--surfaceRaisedHover); border-color: var(--borderStrong); } } .btnSecondary:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .btnSubtle { background: none; color: var(--textSecondary); border-color: var(--borderControl); } @media (hover: hover) and (pointer: fine) { .btnSubtle:hover:not(:disabled, [aria-disabled='true']) { background: var(--surfaceRaisedHover); color: var(--textPrimary); border-color: var(--borderStrong); } } .btnSubtle:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .btnDanger { background: var(--dangerSolid); color: var(--dangerOnSolid); } @media (hover: hover) and (pointer: fine) { .btnDanger:hover:not(:disabled, [aria-disabled='true']) { background: var(--dangerSolidHover); } } .btnDanger:active:not(:disabled, [aria-disabled='true']) { background: var(--dangerSolidActive); } .btn:disabled, .btn[aria-disabled='true'] { background: var(--surfaceSunken); color: var(--textDisabled); border-color: var(--borderControl); cursor: not-allowed; } .btnChromeless { border-color: transparent; background: none; } @media (hover: hover) and (pointer: fine) { .btnChromeless:hover:not(:disabled, [aria-disabled='true']) { background: none; border-color: transparent; } } .btnChromeless:active:not(:disabled, [aria-disabled='true']) { background: none; border-color: transparent; } .btnChromeless:focus-visible { border-color: transparent; } .btnChromeless:disabled { background: none; border-color: transparent; } .btnChromeless .icon { width: 1.35em; height: 1.35em; } @media (hover: hover) and (pointer: fine) { .btnChromeless:hover:not(:disabled, [aria-disabled='true']) .avatar { filter: brightness(1.18); } } .btnRound { border-radius: var(--radiusFull); } .btnIcon { width: var(--controlHeightMd); height: var(--controlHeightMd); padding: 0; } .btnIcon.btnSm { width: var(--controlHeightSm); height: var(--controlHeightSm); } .btnIcon.btnLg { width: var(--controlHeightLg); height: var(--controlHeightLg); } .btnBlock { width: 100%; } .btn[data-loading='true'] { color: transparent; pointer-events: none; transition: background var(--durationInstant) var(--easeOut), border-color var(--durationInstant) var(--easeOut), color var(--durationFast) var(--easeOut) var(--delayBusy), transform var(--durationFast) var(--easeOut); } .btnPrimary[data-loading='true'] { background: var(--accentSolid); border-color: transparent; box-shadow: var(--glowPrimary); } .btnDanger[data-loading='true'] { background: var(--dangerSolid); border-color: transparent; } .btnSecondary[data-loading='true'] { background: var(--surfaceRaised); border-color: var(--borderControl); } .btnSubtle[data-loading='true'] { background: none; border-color: var(--borderControl); } .btn[data-loading='true'] .btnSpinner { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accentOnSolid); animation: enterFade var(--durationFast) var(--easeOut) var(--delayBusy) backwards; } .btnSecondary[data-loading='true'] .btnSpinner, .btnSubtle[data-loading='true'] .btnSpinner { color: var(--accentText); } .btnSpinner { display: none; } .btnGroup { display: inline-flex; } .btnGroup .btn { border-radius: 0; margin-left: calc(var(--borderWidth) * -1); } .btnGroup .btn:first-child { border-start-start-radius: var(--radiusMd); border-end-start-radius: var(--radiusMd); margin-left: 0; } .btnGroup .btn:last-child { border-start-end-radius: var(--radiusMd); border-end-end-radius: var(--radiusMd); } .btnGroup .btn:focus-visible { z-index: 1; } @media (hover: hover) and (pointer: fine) { .btnGroup .btn:hover { z-index: 1; } } .segmentedOption { position: relative; display: flex; } .segmentedOption input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .segmentedOption span { inline-size: 100%; text-align: center; } .segmented > button:focus-visible { outline-offset: calc(var(--focusRingWidth) * -1); } .segmentedOption input:focus-visible + span { outline: var(--focusRing); outline-offset: calc(var(--focusRingWidth) * -1); } .icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .iconSm { width: 1em; height: 1em; } .iconLg { width: 1.4em; height: 1.4em; } .segmentedFull { display: flex; inline-size: 100%; } .segmentedFull > * { flex: 1; min-inline-size: 0; } .segmentedFull button, .segmentedFull .segmentedOption span { justify-content: center; } .rep { border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); background: var(--surfaceRaised); overflow: hidden; } .repLegend, .repRow { display: grid; gap: var(--space8); align-items: start; padding: var(--space8) var(--space12); grid-template-columns: var(--repCols, 1fr 1.8fr var(--touchTarget)); } .repPair { --repCols: 1fr 1.8fr var(--touchTarget); } .repTyped { --repCols: 10rem 1fr 1.6fr var(--touchTarget); } .repLegend { align-items: center; background: var(--surfaceSunken); border-block-end: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textXs); font-weight: var(--weightSemibold); letter-spacing: var(--trackingNormal); color: var(--textMuted); } .repRow + .repRow { border-block-start: var(--borderWidth) solid var(--borderSubtle); } .repRow .input, .repRow .combo { inline-size: 100%; min-inline-size: 0; } .repRow > * { min-inline-size: 0; } .repFoot { padding: var(--space8) var(--space12); border-block-start: var(--borderWidth) solid var(--borderSubtle); background: var(--surfaceSunken); } .repRemove { display: flex; align-items: center; min-block-size: var(--controlHeightMd); } .repRemove .btn { position: relative; } .repRemove .btn::after { content: ''; position: absolute; inset: 50% auto auto 50%; inline-size: var(--touchTarget); block-size: var(--touchTarget); translate: -50% -50%; } .repEmpty { padding: var(--space16) var(--space12); font-size: var(--textSm); color: var(--textMuted); } .repMsg { grid-column: 1 / -1; min-block-size: 1rem; font-size: var(--textXs); line-height: var(--leadingTight); color: var(--dangerText); } .repMsgNote { color: var(--textMuted); } .repLabel { display: none; font-size: var(--textXs); font-weight: var(--weightMedium); color: var(--textMuted); margin-block-end: var(--space4); } @media (max-width: 45rem) { .repLegend { display: none; } .repRow { grid-template-columns: 1fr; } .repRow .repLabel { display: block; } .repRow > .repRemove { justify-self: end; } } .otp { --otpSlot: var(--touchTarget); --otpGap: var(--space8); position: relative; display: block; inline-size: fit-content; max-inline-size: 100%; min-inline-size: 0; margin-inline: auto; } .otpSlots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--otpSlot)); gap: var(--otpGap); } .otpGrouped { --otpGroupGap: var(--space20); } .otpGrouped .otpSlots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--otpGroupGap); } .otpGroup { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--otpSlot)); gap: var(--otpGap); min-inline-size: 0; } .otpSlot { display: grid; place-items: center; block-size: var(--otpSlot); min-inline-size: 0; font-family: var(--fontMono); font-size: var(--textXl); line-height: 1; color: var(--textPrimary); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderControl); border-radius: var(--radiusMd); transition: border-color var(--durationInstant) var(--easeOut), background var(--durationInstant) var(--easeOut); } .otpSlot[data-filled='true'] { border-color: var(--borderStrong); } .otpInput { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: center; color: transparent; caret-color: transparent; cursor: text; } .otpInput:focus, .otpInput:focus-visible { outline: none; } .otpInput::selection { background-color: transparent; } .otpResendClock { display: inline-block; font-variant-numeric: tabular-nums; min-inline-size: calc(var(--otpResendChars, 4) * 1ch); text-align: end; } .otp:focus-within .otpSlot[data-active='true'] { border-color: var(--accentRing); outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .otp:focus-within .otpSlot[data-active='true']:not([data-filled='true'])::after { content: ''; inline-size: var(--borderWidthStrong); block-size: 1.15em; border-radius: var(--radiusFull); background: var(--textPrimary); animation: otpCaret var(--durationBlink) steps(1, end) infinite; } @keyframes otpCaret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .otp:focus-within .otpSlot[data-active='true']:not([data-filled='true'])::after { animation: none; } } .otp[data-invalid='true'] .otpSlot { border-color: var(--dangerRing); background-image: linear-gradient(var(--dangerSoft), var(--dangerSoft)); } .otp[data-disabled='true'] .otpSlot { color: var(--textDisabled); background: var(--surfaceRaised); border-color: var(--borderSubtle); } .otp[data-disabled='true'] .otpInput { cursor: not-allowed; } @media (forced-colors: active) { .otpInput { forced-color-adjust: none; } .otpSlot[data-filled='true'] { border-color: Highlight; } .otp:focus-within .otpSlot[data-active='true'] { border-color: Highlight; outline-color: Highlight; } .otp:focus-within .otpSlot[data-active='true']:not([data-filled='true'])::after { background: Highlight; } } .alert { display: grid; min-inline-size: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--space8) var(--space12); padding: var(--space12) var(--space16); border-radius: var(--radiusMd); border: var(--borderWidth) solid transparent; font-size: var(--textMd); line-height: var(--leadingSnug); } .alertIcon { grid-row: span 2; margin-top: 0.1em; } .alertTitle { font-weight: var(--weightSemibold); color: var(--textPrimary); overflow-wrap: anywhere; } .alertBody { color: var(--textSecondary); overflow-wrap: anywhere; } .alertBody p + p { margin-top: var(--space8); } .alertActions { display: flex; flex-wrap: wrap; gap: var(--space8); margin-top: var(--space4); } .alert:has(.alertClose) { grid-template-columns: auto minmax(0, 1fr) auto; } .alertClose { grid-row: 1; grid-column: 3; margin: -0.25rem -0.25rem 0 0; } .alert:has(> .alertIcon) > :is(.alertTitle, .alertBody, .alertActions) { grid-column: 2; } .alertInfo { background: var(--infoSoft); border-color: color-mix(in srgb, var(--infoRing) 34%, transparent); color: var(--infoText); } .alertSuccess { background: var(--successSoft); border-color: color-mix(in srgb, var(--successRing) 34%, transparent); color: var(--successText); } .alertWarning { background: var(--warningSoft); border-color: color-mix(in srgb, var(--warningRing) 34%, transparent); color: var(--warningText); } .alertDanger { background: var(--dangerSoft); border-color: color-mix(in srgb, var(--dangerRing) 34%, transparent); color: var(--dangerText); } .alertNeutral { background: var(--surfaceSunken); border-color: var(--borderSubtle); color: var(--textSecondary); } .checkList { display: grid; gap: var(--space8); } .checkRow { display: grid; min-inline-size: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--space4) var(--space12); padding: var(--space12); border-radius: var(--radiusMd); border: var(--borderWidth) solid var(--borderSubtle); background: var(--surfaceRaised); } .checkRowIcon { grid-row: span 3; margin-top: 0.15em; } .checkRowLabel { font-weight: var(--weightMedium); overflow-wrap: anywhere; } .checkRowDetail { font-size: var(--textSm); color: var(--textMuted); font-family: var(--fontMono); overflow-wrap: anywhere; } .checkRowRemedy { font-size: var(--textSm); color: var(--textSecondary); overflow-wrap: anywhere; } .checkRow[data-status='pass'] .checkRowIcon { color: var(--successText); } .checkRow[data-status='warn'] .checkRowIcon { color: var(--warningText); } .checkRow[data-status='fail'] .checkRowIcon { color: var(--dangerText); } .checkRow[data-status='warn'] { border-color: color-mix(in srgb, var(--warningRing) 34%, transparent); } .checkRow[data-status='fail'] { border-color: color-mix(in srgb, var(--dangerRing) 34%, transparent); } .toastRegion { position: fixed; z-index: var(--zToast); display: flex; flex-direction: column; gap: var(--space8); width: min(24rem, calc(100vw - var(--space32))); padding: var(--space16); pointer-events: none; } .toastRegion .toast { pointer-events: auto; } .toastRegionLive { display: contents; } .toastRegion[data-position^='top'] { top: var(--toastRegionTop, 0); } .toastRegion[data-position^='bottom'] { bottom: 0; flex-direction: column-reverse; } .toastRegion[data-position$='_left'] { left: 0; align-items: flex-start; } .toastRegion[data-position$='_right'] { right: 0; align-items: flex-end; } .toastRegion[data-position$='_center'] { left: 50%; transform: translateX(-50%); align-items: center; } @media (max-width: 37.5em) { .toastRegion { width: 100%; } } .toastRegion[data-position$='_left'] .toast, .toastRegion[data-position$='_right'] .toast { touch-action: none; } .toastRegion[data-position$='_center'] .toast { touch-action: pan-x; } .toastRegionMore { order: 1; padding: var(--space2) var(--space12); border-radius: var(--radiusFull); background: var(--surfaceOverlay); border: var(--borderWidth) solid var(--borderSubtle); box-shadow: var(--shadow2); font-size: var(--textSm); color: var(--textSecondary); } .toast { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space4) var(--space12); padding: var(--space12) var(--space16); padding-bottom: var(--space16); border-radius: var(--radiusLg); background: var(--surfaceOverlay); border: var(--borderWidth) solid var(--borderSubtle); box-shadow: var(--shadow3); overflow: hidden; } .toastRegion[data-position^='top'] .toast { animation: toastInTop var(--durationBase) var(--easeOut); } .toastRegion[data-position^='bottom'] .toast { animation: toastInBottom var(--durationBase) var(--easeOut); } @keyframes toastInTop { from { opacity: 0; transform: translateY(calc(var(--motionRise) * -1)) scale(var(--enterScale)); } } @keyframes toastInBottom { from { opacity: 0; transform: translateY(var(--motionRise)) scale(var(--enterScale)); } } .toastRegion[data-position] .toast[data-leaving='true'] { animation: toastOut var(--durationExit) var(--easeIn) forwards; } @keyframes toastOut { to { opacity: 0; transform: scale(var(--enterScale)); } } .toastIcon { margin-top: 0.15em; } .toastTitle { font-weight: var(--weightSemibold); font-size: var(--textMd); color: var(--textPrimary); } .toastBody { grid-column: 2; font-size: var(--textSm); color: var(--textSecondary); line-height: var(--leadingSnug); } .toastActions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space8); margin-top: var(--space6); } .toastEnd { display: flex; align-items: center; gap: var(--space6); } .toastCount { padding: 0 var(--space6); border-radius: var(--radiusFull); background: var(--surfaceSunken); font-size: var(--textXs); font-weight: var(--weightSemibold); font-variant-numeric: tabular-nums; color: var(--textSecondary); } .toastInfo .toastIcon { color: var(--infoText); } .toastSuccess .toastIcon { color: var(--successText); } .toastWarning .toastIcon { color: var(--warningText); } .toastDanger .toastIcon { color: var(--dangerText); } .toastNeutral .toastIcon { color: var(--neutralText); } .toastTimer { position: absolute; left: 0; bottom: 0; height: var(--countdownBarH); width: 100%; transform-origin: left; background: var(--accentRing); animation: toastTimerDrain var(--toastDuration, 10000ms) linear forwards; } .toastDanger .toastTimer { background: var(--dangerRing); } .toastSuccess .toastTimer { background: var(--successRing); } .toastWarning .toastTimer { background: var(--warningRing); } .toastInfo .toastTimer { background: var(--infoRing); } .toastNeutral .toastTimer { background: var(--neutralRing); } @keyframes toastTimerDrain { to { transform: scaleX(0); } } .toastRegion:focus-within .toastTimer, .toastRegion[data-page-hidden] .toastTimer { animation-play-state: paused; } @media (hover: hover) and (pointer: fine) { .toastRegion:hover .toastTimer { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .toastTimer { animation-duration: var(--toastDuration, 10000ms) !important; } } .countdown { display: inline-flex; align-items: center; gap: var(--space8); } .countdownMeter { inline-size: 3rem; block-size: var(--countdownBarH); border-radius: var(--radiusFull); background: var(--surfaceSunken); overflow: hidden; flex: 0 1 auto; } .countdownFill { display: block; block-size: 100%; inline-size: 100%; transform: scaleX(var(--countdownValue, 1)); transform-origin: left; background: var(--warningRing); border-radius: inherit; } .countdownCount { font-size: var(--textSm); font-variant-numeric: tabular-nums; min-inline-size: 2ch; text-align: right; color: var(--textSecondary); } .pendingAction { display: inline-flex; align-items: center; gap: var(--space8); outline: none; } .pendingAction:focus-visible:not(:has(:focus-visible)) { outline: var(--focusRing); outline-offset: var(--space2); border-radius: var(--radiusSm); } .pendingActionState { font-size: var(--textSm); color: var(--textMuted); white-space: nowrap; } .pendingActionFailed .pendingActionState { color: var(--dangerText); } .spinner { display: inline-block; width: 1.15em; height: 1.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radiusFull); animation: spin var(--durationSpin) linear infinite; vertical-align: -0.15em; } .spinnerLg { width: 2rem; height: 2rem; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: spinnerPulse var(--durationPulse) var(--easeInOut) infinite !important; border-right-color: currentColor; } @keyframes spinnerPulse { 50% { opacity: 0.25; } } } .loadingBlock { display: grid; justify-items: center; gap: var(--space12); padding: var(--space48); color: var(--textMuted); } .progress { height: 0.5rem; border-radius: var(--radiusFull); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); overflow: hidden; } .progressBar { height: 100%; width: var(--progressValue, 0%); background: var(--accentSolid); border-radius: inherit; transition: width var(--durationBase) var(--easeOut); transform-origin: left center; animation: meterDraw var(--durationSlow) var(--easeOut) backwards; } .progressBar:dir(rtl) { transform-origin: right center; } .progressRow:nth-child(2) .progressBar { animation-delay: calc(var(--staggerStep) * 1); } .progressRow:nth-child(3) .progressBar { animation-delay: calc(var(--staggerStep) * 2); } .progressRow:nth-child(4) .progressBar { animation-delay: calc(var(--staggerStep) * 3); } .progressRow:nth-child(5) .progressBar { animation-delay: calc(var(--staggerStep) * 4); } .progressRow:nth-child(6) .progressBar { animation-delay: calc(var(--staggerStep) * 5); } .progressRow:nth-child(7) .progressBar { animation-delay: calc(var(--staggerStep) * 6); } .progressRow:nth-child(n + 8) .progressBar { animation-delay: calc(var(--staggerStep) * 7); } .progressDanger .progressBar { background: var(--dangerSolid); } .progressSuccess .progressBar { background: var(--successSolid); } .progressWarning .progressBar { background: var(--warningSolid); } .progress[data-indeterminate='true'] .progressBar { width: 35%; animation: progressSlide var(--durationSweep) var(--easeInOut) infinite; } @keyframes progressSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } .progressRow { display: grid; gap: var(--space6); } .progressRowMeta { display: flex; justify-content: space-between; font-size: var(--textSm); color: var(--textMuted); font-variant-numeric: tabular-nums; } .skeleton { position: relative; overflow: hidden; background: var(--surfaceSunken); border-radius: var(--radiusSm); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--surfaceRaisedHover) 85%, var(--surfaceSunken)) 50%, transparent 100%); transform: translateX(-100%); animation: skeletonShimmer var(--durationPulse) var(--easeInOut) infinite; } @keyframes skeletonShimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none !important; display: none; } } .skeletonText { height: 0.75em; margin: 0.3em 0; } .skeletonTitle { height: 1.15em; width: 40%; margin-bottom: var(--space12); } .skeletonCircle { border-radius: var(--radiusFull); } .skeletonControl { height: var(--controlHeightMd); } .skeletonBlock { height: 5.5rem; } .skeletonUptime { height: var(--uptimeBarH); } .empty { display: grid; justify-items: center; gap: var(--space12); padding: var(--space64) var(--space24); text-align: center; animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .emptyIcon { --emptyRing: 1rem; --emptyDisc: var(--accentSoft); --emptyEdge: color-mix(in srgb, var(--accentRing) 35%, transparent); position: relative; isolation: isolate; display: grid; place-items: center; width: calc(3.5rem + var(--emptyRing) * 2); height: calc(3.5rem + var(--emptyRing) * 2); color: var(--accentText); } .emptyIcon::before { content: ''; position: absolute; inset: var(--emptyRing); z-index: -1; border-radius: var(--radiusFull); background: var(--emptyDisc); border: var(--borderWidth) solid var(--emptyEdge); box-shadow: 0 0 0 calc(var(--emptyRing) / 2) color-mix(in srgb, var(--emptyDisc) 55%, transparent), 0 0 0 var(--emptyRing) color-mix(in srgb, var(--emptyDisc) 25%, transparent); } .emptyDanger .emptyIcon { --emptyDisc: var(--dangerSoft); --emptyEdge: color-mix(in srgb, var(--dangerRing) 34%, transparent); color: var(--dangerText); } .emptyTitle { font-size: var(--textLg); font-weight: var(--weightSemibold); line-height: inherit; letter-spacing: inherit; color: inherit; } .emptyBody { color: var(--textSecondary); } .emptyActions { display: flex; gap: var(--space8); margin-top: var(--space4); flex-wrap: wrap; justify-content: center; } .emptySm { padding: var(--space32) var(--space16); } .result { border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); background: var(--surfaceRaised); overflow: hidden; } .resultHead { display: flex; align-items: center; gap: var(--space8); flex-wrap: wrap; padding: var(--space12); border-block-end: var(--borderWidth) solid var(--borderSubtle); background: var(--surfaceSunken); font-size: var(--textSm); } .resultFact { color: var(--textMuted); font-size: var(--textXs); } .resultBody { padding: var(--space12); display: grid; gap: var(--space12); } .resultMiss .resultHead { background: var(--warningSoft); border-block-end-color: color-mix(in srgb, var(--warningRing) 40%, transparent); } .resultAnswer { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--textSm); line-height: var(--leadingRelaxed); color: var(--textPrimary); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); padding: var(--space12); margin: 0; } .resultUsage { display: flex; flex-wrap: wrap; gap: var(--space8); } .resultCell { flex: 1 1 7rem; min-inline-size: 0; border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); padding: var(--space8) var(--space12); } .resultKey { display: block; font-size: var(--text2xs); letter-spacing: var(--trackingCaps); text-transform: uppercase; color: var(--textMuted); font-weight: var(--weightSemibold); } .resultValue { display: block; font-size: var(--textMd); font-weight: var(--weightSemibold); margin-block-start: var(--space2); overflow-wrap: anywhere; } .resultValueUnknown { color: var(--textMuted); font-weight: var(--weightNormal); font-size: var(--textBase); } .resultRaw > summary { cursor: pointer; font-size: var(--textSm); font-weight: var(--weightMedium); color: var(--textSecondary); padding: var(--space4) 0; transition: color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .resultRaw > summary:hover { color: var(--textPrimary); } } .resultRaw > summary:active { color: var(--linkActive); } .resultRaw > summary:focus-visible { outline: var(--focusRing); outline-offset: var(--focusRingOffset); border-radius: var(--radiusSm); } .resultRaw .codeBlock { margin-block-start: var(--space8); max-block-size: 18rem; overflow: auto; } .popupAlert[popover] { position: fixed; inset: auto; margin: 0; inset-block-end: var(--space24); inset-inline-start: var(--space24); inline-size: min(26rem, calc(100vw - var(--space32))); padding: 0; display: grid; gap: var(--space12); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceOverlay); color: var(--textPrimary); box-shadow: var(--shadow3); opacity: 0; translate: 0 var(--motionRise); transition: opacity var(--durationExit) var(--easeIn), translate var(--durationExit) var(--easeIn), overlay var(--durationExit) allow-discrete, display var(--durationExit) allow-discrete; } .popupAlert[popover]:popover-open { opacity: 1; translate: 0 0; transition: opacity var(--durationBase) var(--easeOut), translate var(--durationBase) var(--easeOut), overlay var(--durationBase) allow-discrete, display var(--durationBase) allow-discrete; } .popupAlert[popover]:not(:popover-open) { display: none; } @starting-style { .popupAlert[popover]:popover-open { opacity: 0; translate: 0 var(--motionRise); } } .popupAlert[popover]:focus { outline: none; } .popupAlertHead { display: flex; align-items: flex-start; gap: var(--space8); padding: var(--space16) var(--space16) 0; } .popupAlertIcon { flex: none; inline-size: 1em; block-size: 1em; margin-block-start: 0.15em; color: var(--accentText); } .popupAlertTitle { margin: 0; min-inline-size: 0; font-size: var(--textMd); font-weight: var(--weightSemibold); line-height: var(--leadingSnug); overflow-wrap: break-word; } .popupAlertBody { margin: 0; padding-inline: var(--space16); color: var(--textSecondary); font-size: var(--textSm); line-height: var(--leadingNormal); max-block-size: 14rem; overflow: auto; overflow-wrap: break-word; white-space: pre-line; } .popupAlertActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space8); padding: 0 var(--space16) var(--space16); } @media (max-width: 40rem) { .popupAlert[popover] { inset-inline: var(--space12); inset-block-end: var(--space12); inline-size: auto; } } .card { background: var(--surfaceRaised); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); box-shadow: var(--shadow1), var(--elevationHairline); padding: var(--panelPad); } .cardFlush { padding: 0; overflow: hidden; } .cardSunken { background: var(--surfaceSunken); box-shadow: none; } .recordCardLead { --recordLeadMin: 12rem; flex: 1 1 var(--recordLeadMin); min-inline-size: 0; } .recordCardTitle { min-inline-size: 0; overflow-wrap: anywhere; } .panel, .card { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .pageScreen { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .pageScreen :is(.panel, .card, .empty) { animation: none; } :is(.panel, .card):nth-child(2) { animation-delay: calc(var(--staggerStep) * 1); } :is(.panel, .card):nth-child(3) { animation-delay: calc(var(--staggerStep) * 2); } :is(.panel, .card):nth-child(4) { animation-delay: calc(var(--staggerStep) * 3); } :is(.panel, .card):nth-child(5) { animation-delay: calc(var(--staggerStep) * 4); } :is(.panel, .card):nth-child(6) { animation-delay: calc(var(--staggerStep) * 5); } :is(.panel, .card):nth-child(7) { animation-delay: calc(var(--staggerStep) * 6); } :is(.panel, .card):nth-child(n + 8) { animation-delay: calc(var(--staggerStep) * 7); } .pageScreen [data-arrives] { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .pageScreen [data-arrives='2'] { animation-delay: calc(var(--staggerStep) * 1); } .pageScreen [data-arrives='3'] { animation-delay: calc(var(--staggerStep) * 2); } .cardInteractive { cursor: pointer; text-align: left; width: 100%; display: block; color: inherit; text-decoration: none; position: relative; transition: border-color var(--durationFast) var(--easeOut), background var(--durationFast) var(--easeOut); } .cardInteractive::after { content: ''; position: absolute; inset: calc(var(--borderWidth) * -1); border-radius: inherit; box-shadow: var(--shadow2); opacity: 0; pointer-events: none; transition: opacity var(--durationFast) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .cardInteractive:hover { border-color: var(--borderControl); background: var(--surfaceRaisedHover); } } .cardInteractive:active { background: var(--surfaceActive); } @media (hover: hover) and (pointer: fine) { .cardInteractive:hover::after { opacity: 1; } } .cardInteractive[aria-current='true'] { border-color: var(--accentRing); } .panel { background: var(--surfaceRaised); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); box-shadow: var(--shadow1), var(--elevationHairline); } .panelHeader { display: flex; align-items: flex-start; gap: var(--space16); padding: var(--space20) var(--panelPad); border-bottom: var(--borderWidth) solid var(--borderSubtle); } .panelHeading { flex: 1; min-width: 0; display: grid; gap: var(--space6); } .panelTitle { font-size: var(--textXl); font-weight: var(--weightSemibold); } .panelLead { color: var(--textSecondary); font-size: var(--textBase); overflow-wrap: anywhere; } .panelHeaderActions { display: flex; gap: var(--space8); flex: none; } .panelBody { padding: var(--panelPad); } .panelBodyFlush { padding: 0; overflow: hidden; } .panelBodyFlush:first-child { border-start-start-radius: calc(var(--radiusLg) - var(--borderWidth)); border-start-end-radius: calc(var(--radiusLg) - var(--borderWidth)); } .panelBodyFlush:last-child { border-end-start-radius: calc(var(--radiusLg) - var(--borderWidth)); border-end-end-radius: calc(var(--radiusLg) - var(--borderWidth)); } .panelFooter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space12); padding: var(--space16) var(--panelPad); border-top: var(--borderWidth) solid var(--borderSubtle); background: color-mix(in srgb, var(--surfaceRaised) 75%, var(--surfacePage)); border-end-start-radius: calc(var(--radiusLg) - var(--borderWidth)); border-end-end-radius: calc(var(--radiusLg) - var(--borderWidth)); } .panelFooterSpacer { flex: 1; } .panelFooterActions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space12); margin-inline-start: auto; min-inline-size: 0; } .panelFooterNote { min-inline-size: 0; font-size: var(--textXs); line-height: var(--leadingSnug); color: var(--textMuted); } .sectionHeading { display: grid; gap: var(--space4); margin-bottom: var(--space16); } .sectionHeadingTitle { display: flex; align-items: center; gap: var(--space8); font-size: var(--textLg); font-weight: var(--weightSemibold); } .sectionHeadingNote { font-size: var(--textSm); color: var(--textMuted); } .modal { width: min(34rem, calc(100dvw - var(--space32))); max-height: min(42rem, calc(100dvh - var(--space64))); padding: 0; border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusXl); background: var(--surfaceOverlay); color: var(--textPrimary); box-shadow: var(--shadow3); overflow: hidden; margin: auto; } .modalSm { width: min(24rem, calc(100dvw - var(--space32))); } .modalLg { width: min(52rem, calc(100dvw - var(--space32))); } .modal::backdrop { background: var(--backdrop); backdrop-filter: var(--backdropBlur); } .modal, .modal::backdrop { transition: opacity var(--durationExit) var(--easeIn), transform var(--durationExit) var(--easeIn), overlay var(--durationExit) allow-discrete, display var(--durationExit) allow-discrete; opacity: 0; } .modal[open], .modal[open]::backdrop { transition: opacity var(--durationSlow) var(--easeOut), transform var(--durationSlow) var(--easeOut), overlay var(--durationSlow) allow-discrete, display var(--durationSlow) allow-discrete; } .modal { transform: translateY(var(--motionRise)) scale(var(--enterScale)); transform-origin: center; } .modal[open] { opacity: 1; transform: none; display: flex; flex-direction: column; } .modal[open]::backdrop { opacity: 1; } @starting-style { .modal[open] { opacity: 0; transform: translateY(var(--motionRise)) scale(var(--enterScale)); } .modal[open]::backdrop { opacity: 0; } } .modalHeader { display: flex; align-items: flex-start; gap: var(--space16); padding: var(--space20) var(--panelPad) var(--space12); } .modalTitle { flex: 1; font-size: var(--textLg); font-weight: var(--weightSemibold); } .modalBody { padding: 0 var(--panelPad) var(--space20); overflow-y: auto; overscroll-behavior: contain; min-height: 0; color: var(--textSecondary); } .modalBody > * + * { margin-top: var(--space16); } .modal { timeline-scope: --modal-body; } .modalBody { scroll-timeline: --modal-body block; } .modalHeader { position: relative; z-index: calc(var(--zBase) + 1); } @supports (animation-timeline: scroll()) { .modalHeader { animation: modalHeaderEdge linear both; animation-timeline: --modal-body; animation-range: 0 var(--space4); } } @keyframes modalHeaderEdge { to { box-shadow: 0 var(--borderWidth) 0 var(--borderSubtle); } } .modalFooter { display: flex; align-items: center; gap: var(--space8); padding: var(--space16) var(--panelPad); border-top: var(--borderWidth) solid var(--borderSubtle); background: var(--surfaceRaised); } .modalFooterSpacer { flex: 1; } .modalFooterActions, .drawerFooterActions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space8); margin-inline-start: auto; min-inline-size: 0; } @media (pointer: coarse) { .modalFooterActions, .drawerFooterActions { row-gap: var(--space12); } } .modalDestructive .modalTitle { color: var(--dangerText); } .drawer { width: min(30rem, calc(100dvw - var(--space48))); max-width: none; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: var(--borderWidth) solid var(--borderSubtle); border-radius: 0; background: var(--surfaceOverlay); color: var(--textPrimary); box-shadow: var(--shadow3); flex-direction: column; margin: 0 0 0 auto; display: none; } .drawer[open] { display: flex; } .drawerLeft { margin: 0 auto 0 0; border-left: 0; border-right: var(--borderWidth) solid var(--borderSubtle); } .drawer::backdrop { background: var(--backdrop); backdrop-filter: var(--backdropBlur); } .drawer, .drawer::backdrop { transition: opacity var(--durationExit) var(--easeIn), translate var(--durationExit) var(--easeIn), overlay var(--durationExit) allow-discrete, display var(--durationExit) allow-discrete; opacity: 0; } .drawer[open], .drawer[open]::backdrop { transition: opacity var(--durationSlow) var(--easeOut), translate var(--durationSlow) var(--easeOut), overlay var(--durationSlow) allow-discrete, display var(--durationSlow) allow-discrete; } .drawer { translate: 100% 0; } .drawerLeft { translate: -100% 0; } .drawer[open] { opacity: 1; translate: 0 0; } .drawer[open]::backdrop { opacity: 1; } @starting-style { .drawer[open] { opacity: 0; translate: 100% 0; } .drawerLeft[open] { translate: -100% 0; } .drawer[open]::backdrop { opacity: 0; } } .drawerHeader { display: flex; align-items: flex-start; gap: var(--space16); padding: var(--space20) var(--panelPad); border-bottom: var(--borderWidth) solid var(--borderSubtle); } .drawerTitle { flex: 1; font-size: var(--textLg); font-weight: var(--weightSemibold); } .drawerBody { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--panelPad); } .drawerFooter { display: flex; gap: var(--space8); padding: var(--space16) var(--panelPad); border-top: var(--borderWidth) solid var(--borderSubtle); background: var(--surfaceRaised); } .popover { position: absolute; margin: 0; padding: var(--space16); width: max-content; max-width: 22rem; border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceOverlay); color: var(--textPrimary); box-shadow: var(--shadow2); position-anchor: --trigger; top: anchor(bottom); right: anchor(right); left: auto; bottom: auto; margin-top: var(--space4); max-block-size: calc(100svh - 2 * var(--space16)); overflow-y: auto; position-try-fallbacks: flip-block, flip-inline, --popover-in-view; } @position-try --popover-in-view { top: var(--space16); bottom: auto; margin-top: 0; } .popoverTrigger { anchor-name: --trigger; } .menuAccount { width: 22rem; padding: var(--space8); } .menuProfile { display: flex; align-items: center; gap: var(--space12); padding: var(--space12); border-radius: var(--radiusMd); color: inherit; text-decoration: none; transition: background var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .menuProfile:hover { background: var(--surfaceRaised); } } .menuProfile:active { background: var(--surfaceActive); } .menuIdentity { flex: 1; min-inline-size: 0; display: grid; } .menuName { font-weight: var(--weightSemibold); font-size: var(--textSm); color: var(--textPrimary); } .menuEmail { font-size: var(--textXs); color: var(--textMuted); } .menuName, .menuEmail { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menuChevron { flex: 0 0 auto; color: var(--textMuted); transition: transform var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .menuProfile:hover .menuChevron { color: var(--accentText); transform: translateX(0.125rem); } } .menuSection { padding: var(--space12) var(--space16); } .menuSectionLabel { display: flex; align-items: center; gap: var(--space8); margin-block-end: var(--space8); font-size: var(--textXs); font-weight: var(--weightBold); color: var(--textMuted); } .menuAccount .menuGroup { border-block-end: 0; margin-block-end: 0; } .menuAccount .menuItem:focus-visible { background: var(--surfaceRaised); } @media (hover: hover) and (pointer: fine) { .menuAccount .menuItem:hover:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceRaised); } } .menuAccount .menuItem:active:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceActive); } .menuAccount .menuGroup { padding-block: var(--space12); } .menuAccount > .menuItem { padding-block: var(--space12); } .menuAccount .swatchRow { max-inline-size: none; gap: var(--space8); padding: var(--space4) var(--space16) var(--space12); } .menuFeed { width: 24rem; padding: var(--space8); grid-template-rows: minmax(0, 1fr) auto auto; max-block-size: min(28rem, 70svh); } .popover.menuFeed:popover-open { display: grid; } .menuFeed .menuList { list-style: none; margin: 0; padding: 0; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; } .menuFeed .menuEmail { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .menuFeed .menuItem { text-align: start; padding-block: var(--space12); } .menuFeed .menuItem:focus-visible { background: var(--surfaceRaised); } @media (hover: hover) and (pointer: fine) { .menuFeed .menuItem:hover:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceRaised); } } .menuFeed .menuItem:active:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceActive); } .menuFeed .menuRow { display: flex; align-items: center; gap: var(--space4); } .menuFeed .menuRow > .menuItem { flex: 1; min-inline-size: 0; } .menuFeed .menuRow > .menuItem::before { content: ''; flex: none; align-self: start; inline-size: var(--space8); block-size: var(--space8); font-size: var(--textSm); margin-block-start: calc((1lh - var(--space8)) / 2); border-radius: var(--radiusFull); background: var(--accentSolid); } .menuFeed .menuRow[data-read='true'] > .menuItem::before { background: transparent; } .menuFeed .menuRow[data-read='false'] .menuName { font-weight: var(--weightSemibold); } .menuFeed .menuRow[data-read='true'] .menuName { font-weight: var(--weightNormal); color: var(--textSecondary); } .menuFeed .menuIdentity > .timestamp { justify-self: start; font-size: var(--textXs); } .menuFeed .menuRow > .pendingAction { flex: none; } .menuFeed .menuRow:is([data-pending='pending'], [data-pending='sending']) .menuIdentity { text-decoration-line: line-through; } .menuFooter { display: flex; padding: var(--space8) var(--space8) var(--space4); } @supports not (anchor-name: --probe) { .popover { position: fixed; inset: auto var(--space16) auto auto; top: 3.25rem; } } .popover:popover-open { display: block; } .popover { transition: opacity var(--durationExit) var(--easeIn), transform var(--durationExit) var(--easeIn), overlay var(--durationExit) allow-discrete, display var(--durationExit) allow-discrete; } .popover:popover-open { transition: opacity var(--durationBase) var(--easeOut), transform var(--durationBase) var(--easeOut), overlay var(--durationBase) allow-discrete, display var(--durationBase) allow-discrete; } .popover { opacity: 0; transform: translateY(calc(var(--motionNudge) * -1)) scale(var(--enterScale)); transform-origin: top right; } .popover:popover-open { opacity: 1; transform: none; } @starting-style { .popover:popover-open { opacity: 0; transform: translateY(calc(var(--motionNudge) * -1)) scale(var(--enterScale)); } } .popoverTitle { font-weight: var(--weightSemibold); margin-bottom: var(--space8); } .popoverBody { font-size: var(--textMd); color: var(--textSecondary); } .menu { padding: var(--space4); min-width: 12rem; max-width: none; } .menuItem { display: flex; align-items: center; gap: var(--space8); width: 100%; padding: var(--space6) var(--space8); border: 0; border-radius: var(--radiusSm); background: none; color: var(--textPrimary); font-size: var(--textMd); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } .menuItem:focus-visible { background: var(--surfaceRaisedHover); } @media (hover: hover) and (pointer: fine) { .menuItem:hover:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceRaisedHover); } } .menuItem:active:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceActive); } .menuItem[data-danger='true'] { color: var(--dangerText); } @media (hover: hover) and (pointer: fine) { .menuItem[data-danger='true']:hover:where(:not(:disabled, [aria-disabled='true'])) { background: var(--dangerSoft); } } .menuItem:disabled, .menuItem[aria-disabled='true'] { color: var(--textDisabled); cursor: not-allowed; } .menuItem kbd { margin-left: auto; } @media (pointer: coarse) { .menuItem { min-block-size: var(--touchTarget); } } .menuSeparator { height: var(--borderWidth); margin: var(--space4) 0; background: var(--borderSubtle); border: 0; } .menuLabel { padding: var(--space6) var(--space8) var(--space2); font-size: var(--text2xs); text-transform: uppercase; letter-spacing: var(--trackingCaps); color: var(--textMuted); font-weight: var(--weightSemibold); } .menuGroup { padding-block-end: var(--space4); border-block-end: 1px solid var(--borderSubtle); margin-block-end: var(--space4); } .menuNote { padding: var(--space2) var(--space8) var(--space6); font-size: var(--textXs); line-height: var(--leadingNormal); color: var(--textMuted); max-inline-size: 15rem; } .check.menuCheck { display: flex; inline-size: 100%; padding: var(--space6) var(--space8); border-radius: var(--radiusSm); transition: background var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .check.menuCheck:hover:not(:has(input:disabled)) { background: var(--surfaceRaisedHover); } } .check.menuCheck:active:not(:has(input:disabled)) { background: var(--surfaceActive); } .columnChooser { anchor-scope: --trigger; } .swatchRow { display: flex; flex-wrap: wrap; gap: var(--space4); padding: var(--space2) var(--space8) var(--space6); max-inline-size: 15rem; } .swatchChip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space4); min-block-size: var(--space24); padding-inline: var(--space8); border: 1px solid var(--borderControl); border-radius: var(--radiusSm); background: var(--surfaceRaised); color: var(--textSecondary); font-size: var(--textXs); font-weight: var(--weightMedium); cursor: pointer; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .swatchChip:hover:not(:disabled, [aria-disabled='true']) { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .swatchChip:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .swatchChip:disabled, .swatchChip[aria-disabled='true'], .swatchChip[aria-pressed='true']:disabled, .swatchChip[aria-pressed='true'][aria-disabled='true'] { cursor: not-allowed; background: var(--surfaceSunken); color: var(--textDisabled); } .swatchChip:is(:disabled, [aria-disabled='true']) .swatchChipDot { filter: saturate(0.25); } .swatchChip[aria-pressed='true'] { border-color: var(--accentRing); color: var(--textPrimary); background: var(--accentSoft); } .swatchChipAccent { inline-size: var(--space24); min-inline-size: var(--space24); padding-inline: 0; } .swatchRow:has(.swatchChipAccent) { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); } .swatchRow:has(.swatchChipAccent) .swatchChipAccent { inline-size: auto; min-inline-size: 0; } @media (pointer: coarse) { .swatchRow { gap: var(--space8); } .swatchChip { min-block-size: var(--touchTarget); min-inline-size: var(--touchTarget); } .swatchRow:has(.swatchChipAccent) { grid-template-columns: repeat(3, var(--touchTarget)); } .swatchRow:has(.swatchChipAccent) .swatchChipAccent { min-inline-size: var(--touchTarget); } } .swatchChipDot { inline-size: var(--space12); block-size: var(--space12); border-radius: var(--radiusFull); background: var(--accentRing); } .swatchCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(8.5rem, (100% - 2 * var(--space8)) / 3), 1fr)); gap: var(--space8); min-inline-size: 0; inline-size: 100%; } .swatchCard { display: flex; align-items: center; gap: var(--space8); min-block-size: var(--touchTarget); min-inline-size: 0; padding-inline: var(--space12); border: 1px solid var(--borderControl); border-radius: var(--radiusMd); background: var(--surfaceRaised); color: var(--textSecondary); font-size: var(--textSm); font-weight: var(--weightMedium); cursor: pointer; transition: border-color var(--durationFast) var(--easeOut), background var(--durationFast) var(--easeOut), color var(--durationFast) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .swatchCard:hover:not(:has(input:disabled)) { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .swatchCard:active:not(:has(input:disabled)) { background: var(--surfaceActive); } .swatchCard:has(input:checked) { border-color: var(--accentRing); background: var(--accentSoft); color: var(--textPrimary); } .swatchCard:has(input:focus-visible) { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .swatchCard input:focus-visible { outline: none; } .swatchCard:has(input:disabled), .swatchCard:has(input:checked:disabled), .swatchCard:has(input:disabled) .swatchCardDesc, .swatchCard:has(input:checked:disabled) .swatchCardDesc { cursor: not-allowed; color: var(--textDisabled); } .swatchCardSwatch { flex: none; inline-size: var(--space20); block-size: var(--space20); border-radius: var(--radiusSm); background: var(--accentSolid); box-shadow: inset 0 0 0 var(--borderWidthStrong) var(--accentRing); } .swatchCardSwatchEmpty { background: none; box-shadow: inset 0 0 0 var(--borderWidth) var(--borderStrong); } .swatchCardName { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swatchGroups { display: grid; gap: var(--space20); min-inline-size: 0; } .swatchGroup { display: grid; gap: var(--space8); min-inline-size: 0; } .swatchGroupLabel { margin: 0; color: var(--textPrimary); font-size: var(--textSm); font-weight: var(--weightSemibold); line-height: var(--leadingSnug); } .swatchGroupHint { display: block; margin-block-start: var(--space4); color: var(--textMuted); font-weight: var(--weightNormal); } .swatchCardsDescribed { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16rem, (100% - var(--space8)) / 2)), 1fr)); } .swatchCardDescribed { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space8); row-gap: var(--space2); align-content: center; padding-block: var(--space12); } .swatchCardDescribed > input { grid-area: 1 / 1 / 3 / 2; align-self: center; } .swatchCardDescribed > .swatchCardName { grid-area: 1 / 2; } .swatchCardDescribed > .swatchCardDesc { grid-area: 2 / 2; } .swatchCardDesc { min-inline-size: 0; color: var(--textMuted); font-size: var(--textXs); font-weight: var(--weightNormal); line-height: var(--leadingSnug); white-space: normal; } .swatchCard:has(input:checked) .swatchCardDesc { color: var(--textSecondary); } @media (forced-colors: active) { .swatchCard:has(input:checked) { border-color: Highlight; } .swatchCardSwatch { forced-color-adjust: none; } } .tipWrap { position: relative; display: inline-flex; } .tipWrap:has(> .truncateMiddle) { display: flex; min-inline-size: 0; max-inline-size: 100%; } .tip { position: absolute; bottom: calc(100% + var(--space6)); left: 0; z-index: var(--zTooltip); width: max-content; max-width: min(var(--tipMeasure), var(--fieldTipRoom, 100vw), calc(100vw - var(--space32))); padding: var(--tipPad); border-radius: var(--tipRadius); background: var(--tipSurface); border: var(--borderWidth) solid var(--tipBorder); color: var(--textPrimary); font-family: var(--fontSans); font-size: var(--textSm); font-weight: var(--weightNormal); font-style: normal; font-variant-numeric: normal; line-height: var(--leadingSnug); letter-spacing: 0; text-align: start; text-transform: none; white-space: normal; overflow-wrap: break-word; cursor: default; box-shadow: var(--tipShadow); pointer-events: none; display: none; opacity: 0; visibility: hidden; transition: opacity var(--durationInstant) var(--easeIn), visibility var(--durationInstant), overlay var(--durationInstant) allow-discrete, display var(--durationInstant) allow-discrete; } .tip[popover] { position: fixed; inset: auto; margin: 0; } .tipWrap:focus-within .tip, .tip:popover-open { opacity: 1; visibility: visible; transition: opacity var(--durationFast) var(--easeOut), visibility var(--durationFast), overlay var(--durationFast) allow-discrete, display var(--durationFast) allow-discrete; } @media (hover: hover) and (pointer: fine) { .tipWrap:hover .tip { opacity: 1; visibility: visible; transition: opacity var(--durationFast) var(--easeOut), visibility var(--durationFast), overlay var(--durationFast) allow-discrete, display var(--durationFast) allow-discrete; } } .tipWrap:focus-within .tip:not([popover]), .tip:popover-open { display: block; } @media (hover: hover) and (pointer: fine) { .tipWrap:hover .tip:not([popover]) { display: block; } } @starting-style { .tipWrap:focus-within .tip:not([popover]), .tip:popover-open { opacity: 0; } } @media (hover: hover) and (pointer: fine) { @starting-style { .tipWrap:hover .tip:not([popover]) { opacity: 0; } } } .tip[data-instant], .tip[data-instant]:popover-open, .tipWrap:focus-within .tip[data-instant] { transition: none; } @media (hover: hover) and (pointer: fine) { .tipWrap:hover .tip[data-instant] { transition: none; } } .accordion { border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); overflow: hidden; background: var(--surfaceRaised); } .accordionItem + .accordionItem { border-top: var(--borderWidth) solid var(--borderSubtle); } .accordionItem summary { display: flex; align-items: center; gap: var(--space12); padding: var(--space16) var(--space20); font-weight: var(--weightMedium); cursor: pointer; list-style: none; transition: background var(--durationInstant) var(--easeOut); } .accordionItem summary::-webkit-details-marker { display: none; } @media (hover: hover) and (pointer: fine) { .accordionItem summary:hover { background: var(--surfaceRaisedHover); } } .accordionItem summary:active { background: var(--surfaceActive); } .accordionChevron { margin-left: auto; color: var(--textMuted); transition: transform var(--durationFast) var(--easeOut); } .accordionItem[open] > summary .accordionChevron { transform: rotate(180deg); } .accordionPanel { padding: 0 var(--space20) var(--space16); color: var(--textSecondary); } .accordionItem[open] > .accordionPanel { animation: enterRise var(--durationBase) var(--easeOut) backwards; } .tabs { display: grid; gap: var(--space20); } .tablist { display: flex; gap: var(--space4); border-bottom: var(--borderWidth) solid var(--borderSubtle); overflow-x: auto; overflow-y: hidden; } .tab { position: relative; padding: var(--space8) var(--space12); border: 0; background: none; color: var(--textMuted); font-size: var(--textMd); font-weight: var(--weightMedium); cursor: pointer; white-space: nowrap; border-radius: var(--radiusSm) var(--radiusSm) 0 0; transition: color var(--durationInstant) var(--easeOut), background var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .tab:hover:where(:not(:disabled, [aria-disabled='true'])) { color: var(--textPrimary); background: var(--surfaceRaisedHover); } } .tab:active:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceActive); } .tab:disabled, .tab[aria-disabled='true'] { color: var(--textDisabled); cursor: not-allowed; } .tab[aria-selected='true'] { color: var(--accentText); } .tab::after { content: ''; position: absolute; left: var(--space8); right: var(--space8); bottom: calc(var(--borderWidth) * -1); height: var(--borderWidthStrong); background: var(--accentSolid); border-radius: var(--radiusFull) var(--radiusFull) 0 0; transform: scaleX(0); transition: transform var(--durationFast) var(--easeOut); } .tab[aria-selected='true']::after { transform: scaleX(1); } @media (forced-colors: active) { .tab::after { forced-color-adjust: none; background: Highlight; } } .tabBadge { margin-left: var(--space6); font-size: var(--textXs); padding: 0 var(--space4); border-radius: var(--radiusFull); background: var(--surfaceActive); color: var(--textSecondary); } .tabpanel:focus-visible { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .stepper { display: grid; gap: var(--space2); list-style: none; margin: 0; padding: 0; } .stepperItem { display: flex; align-items: flex-start; gap: var(--space12); position: relative; } .stepperLink { display: flex; align-items: flex-start; gap: var(--space12); width: 100%; padding: var(--space8) var(--space12); border: 0; border-radius: var(--radiusMd); background: none; color: var(--textSecondary); text-align: left; font-size: var(--textMd); cursor: pointer; text-decoration: none; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .stepperLink:hover:not([aria-disabled='true']) { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .stepperLink:active:not([aria-disabled='true']) { background: var(--surfaceActive); } .stepperLink[aria-disabled='true'] { color: var(--textDisabled); cursor: not-allowed; } .stepperMarker { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--radiusFull); border: var(--borderWidthStrong) solid var(--borderControl); font-size: var(--textXs); font-variant-numeric: tabular-nums; color: var(--textMuted); background: var(--surfacePage); z-index: 1; transition: background var(--durationFast) var(--easeOut), border-color var(--durationFast) var(--easeOut), color var(--durationFast) var(--easeOut); } .stepperItem[data-state='done'] .stepperMarker { background: var(--successSolid); border-color: var(--successSolid); color: var(--successOnSolid); } .stepperItem[data-state='current'] .stepperMarker { border-color: var(--accentSolid); color: var(--accentText); } .stepperItem[data-state='current'] .stepperLink { color: var(--textPrimary); font-weight: var(--weightMedium); } .stepperItem:not(:last-child)::before, .stepperItem:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--space12) + 0.75rem - var(--borderWidthStrong) / 2); top: 2rem; bottom: -0.25rem; width: var(--borderWidthStrong); } .stepperItem:not(:last-child)::before { background: var(--borderSubtle); } .stepperItem:not(:last-child)::after { background: var(--successSolid); transform: scaleY(0); transform-origin: top; transition: transform var(--durationSlow) var(--easeOut); } .stepperItem[data-state='done']:not(:last-child)::after { transform: none; } .stepperText { display: grid; gap: var(--space2); padding-top: 0.1em; } .stepperState { font-size: var(--textXs); color: var(--textMuted); } .stepperHorizontal { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space8); } .stepperHorizontal .stepperItem { flex-direction: column; text-align: center; } .stepperHorizontal .stepperLink { flex-direction: column; align-items: center; text-align: center; } .stepperHorizontal .stepperItem:not(:last-child)::before, .stepperHorizontal .stepperItem:not(:last-child)::after { left: 60%; right: -40%; top: 1.5rem; bottom: auto; width: auto; height: var(--borderWidthStrong); } .stepperHorizontal .stepperItem:not(:last-child)::after { transform: scaleX(0); transform-origin: left; } .stepperHorizontal .stepperItem[data-state='done']:not(:last-child)::after { transform: none; } .menuAccount .swatchRow { padding-block: 0; } .menuAccount .menuGroup { display: grid; gap: var(--space8); padding-block: var(--space12); } .menuAccount .menuGroup > * { margin-block: 0; } .menuAccount .menuSectionLabel { margin-block-end: 0; } .menuAccount .menuItem { padding-block: var(--space12); } .menuAccount .menuSeparator { margin-block: var(--space12); background: var(--borderControl); } .menuAccount .menuGroup { padding-block: 0; } .menuAccount .menuGroup .menuItem { background: var(--surfaceSunken); } .menuAccount .menuGroup > .menuItem { margin-block-start: var(--space8); } .menuAccount .menuGroup .menuItem:focus-visible { background: var(--surfaceSunken); } @media (hover: hover) and (pointer: fine) { .menuAccount .menuGroup .menuItem:hover:where(:not(:disabled, [aria-disabled='true'])) { background: var(--surfaceSunken); } } .thread { display: grid; gap: var(--space24); min-inline-size: 0; container-type: inline-size; } .threadList { display: grid; gap: var(--space16); margin: 0; padding: 0; list-style: none; min-inline-size: 0; } .threadMessage { display: grid; gap: var(--space6); justify-self: start; justify-items: start; min-inline-size: 0; max-inline-size: 85%; } .threadMessage[data-side='mine'] { justify-self: end; justify-items: end; } .threadMessage[data-new] { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .threadHistory { min-inline-size: 0; } .threadMore { position: sticky; inset-block-end: var(--space16); z-index: var(--zSticky); display: flex; justify-content: center; align-items: flex-end; block-size: 0; } .threadMore .btn { animation: enterRise var(--durationBase) var(--easeOut) backwards; } @container (max-width: 30rem) { .threadMessage { max-inline-size: 100%; } } .threadMeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space4) var(--space8); margin: 0; font-size: var(--textSm); line-height: var(--leadingSnug); color: var(--textMuted); } .threadAuthor { font-weight: var(--weightMedium); color: var(--textSecondary); } .threadTime { font-variant-numeric: tabular-nums; } .threadBubble { display: grid; gap: var(--space12); min-inline-size: 0; max-inline-size: 100%; padding: var(--space12) var(--space16); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceSunken); color: var(--textPrimary); } .threadMessage[data-side='mine'] .threadBubble { border-color: transparent; background: var(--accentSoft); } .threadBody { margin: 0; font-size: var(--textBase); line-height: var(--leadingNormal); } .threadFiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space8); margin: 0; padding: 0; list-style: none; min-inline-size: 0; } .threadCompose { display: grid; gap: var(--space24); min-inline-size: 0; } .threadActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space8); } .pricing { --pricingPlanMin: 16rem; --pricingLeadLines: 3; display: grid; gap: var(--space24); min-inline-size: 0; position: relative; } .pricingPeriod { justify-self: start; } .pricingPlans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--pricingPlanMin), 100%), 1fr)); gap: var(--space24) var(--space16); min-inline-size: 0; } .pricingPlans > .empty { grid-column: 1 / -1; } .pricingCard { position: relative; display: grid; gap: var(--space16); min-inline-size: 0; } .pricingCardHighlighted { border-color: var(--accentRing); box-shadow: 0 0 0 var(--borderWidth) var(--accentRing), var(--shadow1), var(--elevationHairline); } .pricingCardFlag { position: absolute; inset-block-start: 0; inset-inline-start: var(--panelPad); translate: 0 -50%; } .pricingCardName { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pricingCardLead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--pricingLeadLines); line-clamp: var(--pricingLeadLines); overflow: hidden; min-block-size: calc(var(--pricingLeadLines) * 1lh); margin: 0; font-size: var(--textSm); line-height: var(--leadingSnug); color: var(--textSecondary); } .pricingCardPrice { display: grid; gap: var(--space4); margin: 0; } .pricingCardFigure { display: flex; align-items: baseline; gap: var(--space6); min-inline-size: 0; white-space: nowrap; } .pricingCardAmount { font-size: var(--text3xl); font-weight: var(--weightBold); line-height: var(--leadingTight); letter-spacing: var(--trackingTight); color: var(--textPrimary); font-variant-numeric: tabular-nums; } .pricingCardPeriod { font-size: var(--textSm); color: var(--textMuted); } .pricingCardNote { min-block-size: 1lh; margin: 0; font-size: var(--textXs); line-height: var(--leadingSnug); color: var(--textMuted); } .pricingCardNote[data-saving] { color: var(--successText); font-weight: var(--weightMedium); } .pricingCardFeatures { display: grid; gap: var(--space8); align-content: start; margin: 0; padding: 0; list-style: none; font-size: var(--textSm); line-height: var(--leadingSnug); } .pricingFeature { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space8); min-block-size: 1lh; } .pricingFeatureName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--textSecondary); } .pricingFeatureValue { white-space: nowrap; font-weight: var(--weightMedium); color: var(--textPrimary); font-variant-numeric: tabular-nums; } .icon.pricingMark { inline-size: 1em; block-size: 1em; flex: none; } .pricingMarkYes { color: var(--successText); } .pricingMarkNo { color: var(--textMuted); } .pricingCardAction { justify-self: stretch; } .pricingCardName.skeleton { inline-size: 45%; } .pricingCardAmount.skeleton { inline-size: 5ch; } @media (scripting: none) { .pricingPlans:has(> [data-skeleton]), .pricingPeriod, .pricing > [data-pricing-compare], [data-pricing-status] { display: none; } } .pricingTable thead th:not(:first-child), .pricingTable td { text-align: center; } .pricingTable td { position: relative; white-space: nowrap; } .pricingTable .pricingMark { display: inline-block; vertical-align: middle; } .tableWrap { border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceRaised); overflow-x: auto; overflow-y: hidden; } .tableWrap[data-fits]:not(.tableWrapBounded) { overflow: clip; } .tableWrapBounded { max-block-size: var(--tableMaxHeight, 22rem); overflow-y: auto; scroll-padding-block-start: calc(3 * var(--space8) + var(--textXs) * var(--leadingNormal)); } .tableWrap { display: flex; position: relative; isolation: isolate; --tableEdgeShade: light-dark( color-mix(in srgb, color-mix(in oklab, var(--surfaceSunken), black 45%) 55%, transparent), color-mix(in srgb, color-mix(in oklab, var(--surfaceSunken), black 70%) 85%, transparent) ); --tableEdgeSize: 0.75rem; } .tableWrap > table { flex: none; align-self: flex-start; inline-size: 100%; } .tableWrap::before, .tableWrap::after { content: ''; flex: none; position: sticky; inset-block-start: 0; z-index: calc(var(--zSticky) + 2); inline-size: var(--tableEdgeSize); pointer-events: none; opacity: 0; transition: opacity var(--durationBase) var(--easeOut); } .tableWrap::before { margin-inline-end: calc(-1 * var(--tableEdgeSize)); inset-inline-start: var(--tablePinInline, 0); background: linear-gradient(to right, var(--tableEdgeShade), transparent); } .tableWrap::after { margin-inline-start: calc(-1 * var(--tableEdgeSize)); inset-inline-end: 0; background: linear-gradient(to left, var(--tableEdgeShade), transparent); } .tableWrap[data-more-start]::before, .tableWrap[data-more-end]::after { opacity: 1; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--textMd); font-variant-numeric: tabular-nums; --tableFillPending: color-mix(in srgb, var(--warningSoft) 55%, transparent); --tableFillZebra: color-mix(in srgb, var(--surfaceSunken) 45%, transparent); --tablePinMax: 45vw; } .table thead th { position: sticky; top: 0; z-index: var(--zSticky); text-align: left; vertical-align: bottom; padding: var(--space8) var(--space12); font-size: var(--textXs); font-weight: var(--weightSemibold); letter-spacing: var(--trackingNormal); color: var(--textMuted); background: var(--surfaceRaised); box-shadow: inset 0 -1px 0 var(--borderSubtle); white-space: nowrap; } .table tbody td, .table tbody th { padding: var(--space12); border-bottom: var(--borderWidth) solid var(--borderSubtle); color: var(--textSecondary); vertical-align: middle; text-align: left; } .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; } .table tbody tr { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .table tbody tr:nth-child(2) { animation-delay: calc(var(--staggerStep) * 1); } .table tbody tr:nth-child(3) { animation-delay: calc(var(--staggerStep) * 2); } .table tbody tr:nth-child(4) { animation-delay: calc(var(--staggerStep) * 3); } .table tbody tr:nth-child(5) { animation-delay: calc(var(--staggerStep) * 4); } .table tbody tr:nth-child(6) { animation-delay: calc(var(--staggerStep) * 5); } .table tbody tr:nth-child(7) { animation-delay: calc(var(--staggerStep) * 6); } .table tbody tr:nth-child(n + 8) { animation-delay: calc(var(--staggerStep) * 7); } .table[data-reordered] tbody tr { animation: none; } @media (hover: hover) and (pointer: fine) { .table tbody tr:hover td, .table tbody tr:hover th { background: var(--surfaceRaisedHover); } } .table tbody tr[aria-selected='true'] td, .table tbody tr[aria-selected='true'] th { background: var(--accentSoft); } .table tbody tr[data-pending='pending'] td, .table tbody tr[data-pending='pending'] th, .table tbody tr[data-pending='sending'] td, .table tbody tr[data-pending='sending'] th { background: var(--tableFillPending); color: var(--textMuted); text-decoration-line: line-through; text-decoration-color: var(--textMuted); } .table tbody tr[data-pending='settled'] td, .table tbody tr[data-pending='settled'] th { color: var(--textMuted); text-decoration-line: line-through; text-decoration-color: var(--textMuted); } .table tbody tr:is([data-pending='pending'], [data-pending='sending'], [data-pending='settled']) :is(td, th) { transition: background var(--durationFast) var(--easeOut), color var(--durationFast) var(--easeOut), opacity var(--durationBase) var(--easeOut); } .table tbody tr[data-pending] .pendingAction, .table tbody tr[data-pending] .btn { text-decoration-line: none; } .table td.isPrimary, .table th[scope='row'] { color: var(--textPrimary); font-weight: var(--weightMedium); } .tableZebra tbody tr:nth-child(even) td, .tableZebra tbody tr:nth-child(even) th { background: var(--tableFillZebra); } .table tbody th[scope='row']:first-child, .table:has(> tbody > tr > th[scope='row']:first-child) > thead > tr > th:first-child { position: sticky; inset-inline-start: 0; max-inline-size: var(--tablePinMax); } .table tbody th[scope='row']:first-child { z-index: calc(var(--zBase) + 1); overflow-wrap: break-word; } .table:has(> tbody > tr > th[scope='row']:first-child) > thead > tr > th:first-child { z-index: calc(var(--zSticky) + 1); } @supports (animation-timeline: scroll()) { .table tbody th[scope='row']:first-child { animation: tablePinEdge linear both; animation-timeline: scroll(nearest inline); animation-range: 0 var(--space4); } .table:has(> tbody > tr > th[scope='row']:first-child) > thead > tr > th:first-child { animation: tablePinEdgeCorner linear both; animation-timeline: scroll(nearest inline); animation-range: 0 var(--space4); } } :where(.table tbody th[scope='row']:first-child) { background-color: var(--surfaceRaised); } .table tbody tr[data-pending='pending'] th[scope='row']:first-child, .table tbody tr[data-pending='sending'] th[scope='row']:first-child { background: linear-gradient(var(--tableFillPending), var(--tableFillPending)) var(--surfaceRaised); } .tableZebra tbody tr:nth-child(even) th[scope='row']:first-child { background: linear-gradient(var(--tableFillZebra), var(--tableFillZebra)) var(--surfaceRaised); } @keyframes tablePinEdge { to { box-shadow: inset calc(-1 * var(--borderWidth)) 0 0 var(--borderSubtle); } } @keyframes tablePinEdgeCorner { to { box-shadow: inset 0 calc(-1 * var(--borderWidth)) 0 var(--borderSubtle), inset calc(-1 * var(--borderWidth)) 0 0 var(--borderSubtle); } } .tableWrap { container: table-wrap / inline-size; } .table { --tableActionsMax: min(18rem, 40cqi); } @container table-wrap (min-width: 30rem) { .table:has(> tbody > tr > td.tableActions:last-child) { --tablePinMax: min(45vw, 55cqi); } .table tbody td.tableActions:last-child, .table thead th.tableActions:last-child { position: sticky; inset-inline-end: 0; } .table tbody td.tableActions:last-child { z-index: calc(var(--zBase) + 1); } .table thead th.tableActions:last-child { z-index: calc(var(--zSticky) + 1); } .table td.tableActions:last-child > .tableRowActions { flex-wrap: wrap; justify-content: flex-end; inline-size: max-content; max-inline-size: var(--tableActionsMax); } :where(.table tbody td.tableActions:last-child) { background-color: var(--surfaceRaised); } .table tbody tr[data-pending='pending'] td.tableActions:last-child, .table tbody tr[data-pending='sending'] td.tableActions:last-child { background: linear-gradient(var(--tableFillPending), var(--tableFillPending)) var(--surfaceRaised); } .tableZebra tbody tr:nth-child(even) td.tableActions:last-child { background: linear-gradient(var(--tableFillZebra), var(--tableFillZebra)) var(--surfaceRaised); } .tableWrap[data-more-end] > .table tbody td.tableActions:last-child { box-shadow: inset var(--borderWidth) 0 0 var(--borderSubtle); } .tableWrap[data-more-end] > .table thead th.tableActions:last-child { box-shadow: inset 0 calc(-1 * var(--borderWidth)) 0 var(--borderSubtle), inset var(--borderWidth) 0 0 var(--borderSubtle); } .tableWrap:has(> .table > tbody > tr > td.tableActions:last-child)::after { display: none; } } .table td.truncate, .table th.truncate { max-width: 0; } .tableNum { text-align: right; font-variant-numeric: tabular-nums; } .table thead th.tableNum { text-align: right; } .table tbody :is(td, th).tableNum { text-align: right; } .tableActions { width: 1%; white-space: nowrap; text-align: right; } .tableSelect { width: 1%; padding-right: 0; } .tableSort { display: inline-flex; align-items: center; gap: var(--space4); border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; border-radius: var(--radiusSm); transition: color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .tableSort:hover { color: var(--textPrimary); } } .tableSort:active:not(:disabled, [aria-disabled='true']) { color: var(--linkActive); } .table th[aria-sort] .tableSort { color: var(--accentText); } .table th[aria-sort] .tableSort:active:not(:disabled, [aria-disabled='true']) { color: var(--linkActive); } .tableSortIcon { transition: transform var(--durationFast) var(--easeInOut); } .table th[aria-sort='descending'] .tableSortIconDir { transform: rotate(180deg); } .table th[aria-sort] .tableSortIconIdle, .table th:not([aria-sort]) .tableSortIconDir { display: none; } .tableRowActions { display: inline-flex; gap: var(--space4); vertical-align: middle; } .reorder { display: inline-flex; gap: var(--space4); } @media (pointer: coarse) { .reorder > .btn.btnIcon, .reorder > .tipWrap > .btn.btnIcon { width: var(--touchTarget); height: var(--touchTarget); } } @media (pointer: coarse) { .tableRowActions, .reorder { gap: var(--space8); } } .tableRowActions .btnSubtle[data-danger='true']:not(:disabled, [aria-disabled='true']) { color: var(--dangerText); } @media (hover: hover) and (pointer: fine) { .tableRowActions .btnSubtle[data-danger='true']:hover:not(:disabled, [aria-disabled='true']) { color: var(--dangerText); } } .tableEmpty td, .tableLoading td { padding: 0; border-bottom: 0; } .table .textTyped { overflow-wrap: break-word; } .table :is(th, td) :is(.stack, .stack4, .stack6, .stack8, .stack12, .stack16) { grid-template-columns: minmax(min-content, 1fr); } .pagination { display: flex; align-items: center; gap: var(--space12); flex-wrap: wrap; } .paginationList { display: flex; align-items: center; gap: var(--space2); list-style: none; margin: 0; padding: 0; } .paginationLink { display: grid; place-items: center; min-width: var(--controlHeightSm); height: var(--controlHeightSm); padding: 0 var(--space8); border: var(--borderWidth) solid transparent; border-radius: var(--radiusSm); background: none; color: var(--textSecondary); font-size: var(--textSm); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .paginationLink:hover:not([aria-disabled='true']) { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .paginationLink:active:not([aria-disabled='true']) { background: var(--surfaceActive); } .paginationLink[aria-current='page'] { background: var(--accentSolid); color: var(--accentOnSolid); font-weight: var(--weightMedium); } .paginationLink[aria-disabled='true'] { color: var(--textDisabled); cursor: not-allowed; } .paginationGap { padding: 0 var(--space4); color: var(--textMuted); } .paginationSummary { font-size: var(--textSm); color: var(--textMuted); font-variant-numeric: tabular-nums; } .pageSize { display: flex; align-items: center; gap: var(--space8); font-size: var(--textSm); color: var(--textMuted); } .pageSize .select { width: auto; } .listFoot { position: relative; display: grid; justify-items: center; gap: var(--space12); padding-block: calc((var(--touchTarget) - var(--controlHeightSm)) / 2); } .listFootSkeleton { display: grid; gap: var(--space8); justify-self: stretch; min-inline-size: 0; } .listFootEnd { margin: 0; font-size: var(--textSm); color: var(--textMuted); text-align: center; } .listFootSentinel { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; } .filterBar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8); padding: var(--space12) var(--space16); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceRaised); } .filterBarSearch { flex: 1; min-width: min(var(--searchBoxMin), 100%); } .panel .card:has(> .tableWrap), .panel .filterBar { background: transparent; border-color: transparent; box-shadow: none; padding: 0; } .panel .tableWrap { background: transparent; } .filterChips { display: flex; flex-wrap: wrap; gap: var(--space6); } .filterChip { display: inline-flex; align-items: center; gap: var(--space6); padding: var(--space2) var(--space4) var(--space2) var(--space8); border-radius: var(--radiusFull); background: var(--accentSoft); color: var(--accentText); font-size: var(--textSm); border: var(--borderWidth) solid color-mix(in srgb, var(--accentRing) 34%, transparent); white-space: nowrap; max-inline-size: 100%; } .filterChipRemove { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border: 0; border-radius: var(--radiusFull); background: none; color: inherit; cursor: pointer; position: relative; transition: background var(--durationInstant) var(--easeOut); } .filterChipRemove::after { content: ''; position: absolute; inset: -0.8rem; } @media (hover: hover) and (pointer: fine) { .filterChipRemove:hover { background: color-mix(in srgb, var(--accentRing) 30%, transparent); } } .filterChipRemove:active:not(:disabled, [aria-disabled='true']) { background: color-mix(in srgb, var(--accentRing) 50%, transparent); } .badge { --badgeDot: 0.4375rem; display: inline-flex; align-items: center; gap: var(--space6); padding: 0 var(--space8); height: 1.375rem; border-radius: var(--radiusFull); font-size: var(--textXs); font-weight: var(--weightMedium); white-space: nowrap; border: var(--borderWidth) solid transparent; } .badge { justify-self: start; } .badgeNeutral { background: var(--surfaceSunken); color: var(--textMuted); border-color: var(--borderControl); } .badgeAccent { background: var(--accentSoft); color: var(--accentText); border-color: color-mix(in srgb, var(--accentRing) 34%, transparent); } .badgeSuccess { background: var(--successSoft); color: var(--successText); border-color: color-mix(in srgb, var(--successRing) 34%, transparent); } .badgeWarning { background: var(--warningSoft); color: var(--warningText); border-color: color-mix(in srgb, var(--warningRing) 34%, transparent); } .badgeDanger { background: var(--dangerSoft); color: var(--dangerText); border-color: color-mix(in srgb, var(--dangerRing) 34%, transparent); } .badgeInfo { background: var(--infoSoft); color: var(--infoText); border-color: color-mix(in srgb, var(--infoRing) 34%, transparent); } .badgeSolid.badgeAccent { background: var(--accentSolid); color: var(--accentOnSolid); border-color: transparent; } .badgeSolid.badgeSuccess { background: var(--successSolid); color: var(--successOnSolid); border-color: transparent; } .badgeSolid.badgeWarning { background: var(--warningSolid); color: var(--warningOnSolid); border-color: transparent; } .badgeSolid.badgeDanger { background: var(--dangerSolid); color: var(--dangerOnSolid); border-color: transparent; } .badgeDot { width: var(--badgeDot); height: var(--badgeDot); border-radius: var(--radiusFull); background: currentColor; flex: none; } .badgeSevDebug { background: var(--sevDebugSoft); color: var(--sevDebugText); border-color: var(--sevDebugRing); } .badgeSevInfo { background: var(--sevInfoSoft); color: var(--sevInfoText); border-color: color-mix(in srgb, var(--sevInfoRing) 34%, transparent); } .badgeSevNotice { background: var(--sevNoticeSoft); color: var(--sevNoticeText); border-color: color-mix(in srgb, var(--sevNoticeRing) 34%, transparent); } .badgeSevWarning { background: var(--sevWarningSoft); color: var(--sevWarningText); border-color: color-mix(in srgb, var(--sevWarningRing) 34%, transparent); } .badgeSevError { background: var(--sevErrorSoft); color: var(--sevErrorText); border-color: color-mix(in srgb, var(--sevErrorRing) 34%, transparent); } .badgeSevCritical { background: var(--sevCriticalSolid); color: var(--sevCriticalOnSolid); border-color: transparent; } .badgeSevAlert { background: var(--sevAlertSolid); color: var(--sevAlertOnSolid); border-color: transparent; } .badgeSevEmergency { background: var(--sevEmergencySolid); color: var(--sevEmergencyOnSolid); border-color: transparent; } .badgeProgress { background: var(--progressSoft); color: var(--progressText); border-color: color-mix(in srgb, var(--progressRing) 34%, transparent); } .badgeSized { display: inline-grid; justify-items: center; } .badgeSized > .badgeValue { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space6); } .badgeSized::after { content: attr(data-sizer); grid-area: 1 / 1; white-space: pre; block-size: 0; line-height: 0; overflow: clip; visibility: hidden; padding-inline-start: calc(var(--badgeDot) + var(--space6)); } .badgeCount { min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space4); justify-content: center; border-radius: var(--radiusFull); font-variant-numeric: tabular-nums; } .tag { display: inline-flex; align-items: center; gap: var(--space6); padding: var(--space2) var(--space8); border-radius: var(--radiusSm); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); color: var(--textSecondary); font-size: var(--textSm); white-space: nowrap; max-inline-size: 100%; } .tagRemovable { padding-right: var(--space2); } .tagRemove { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border: 0; border-radius: var(--radiusSm); background: none; color: var(--textMuted); cursor: pointer; position: relative; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } .tagRemove::after { content: ''; position: absolute; inset: -0.8rem; } @media (hover: hover) and (pointer: fine) { .tagRemove:hover { background: var(--dangerSoft); color: var(--dangerText); } } .tagRemove:active:not(:disabled, [aria-disabled='true']) { background: color-mix(in srgb, var(--dangerRing) 30%, transparent); color: var(--dangerText); } .tagScored { position: relative; overflow: hidden; padding-bottom: var(--space4); } .tagScore { position: absolute; left: 0; bottom: 0; height: 0.125rem; background: var(--accentSolid); width: var(--score, 0%); } .avatar { display: inline-grid; place-items: center; flex: none; width: var(--avatarSize, 2rem); height: var(--avatarSize, 2rem); border-radius: var(--radiusFull); background: var(--accentSoft); color: var(--accentText); font-size: max(var(--textXs), calc(var(--avatarSize, 2rem) * 0.4)); font-weight: var(--weightSemibold); overflow: hidden; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatarXs { --avatarSize: 1.5rem; } .avatarSm { --avatarSize: 1.75rem; } .avatarLg { --avatarSize: 2.5rem; } .avatarXl { --avatarSize: 4rem; } .avatarSquare { border-radius: var(--radiusMd); } .avatarAnonymous { background: var(--surfaceSunken); color: var(--textMuted); border: var(--borderWidth) dashed var(--borderControl); } .avatarGroup { display: flex; } .avatarGroup .avatar { margin-left: -0.5rem; border: 2px solid var(--surfaceRaised); } .avatarGroup .avatar:first-child { margin-left: 0; } .avatarGroupMore { position: relative; overflow: visible; padding: 0; font-family: inherit; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .avatarGroupMore:hover { filter: brightness(1.18); } } .avatarGroupMore:active:not(:disabled, [aria-disabled='true']) { filter: brightness(1.36); } .avatarGroupMore::after { content: ''; position: absolute; inset: calc((var(--touchTarget) - 100%) / -2); } .avatarRow { display: flex; align-items: center; gap: var(--space8); min-width: 0; } .avatarRowText { display: grid; gap: 0; min-width: 0; } .avatarRowName { font-size: var(--textMd); font-weight: var(--weightMedium); color: var(--textPrimary); } .avatarRowMeta { font-size: var(--textXs); color: var(--textMuted); } .kv { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--space8) var(--space16); margin: 0; font-size: var(--textMd); } .kv dt { color: var(--textMuted); } .kv dd { margin: 0; color: var(--textPrimary); min-width: 0; } .kvStacked { grid-template-columns: 1fr; gap: var(--space2); } .kvStacked dd + dt { margin-top: var(--space12); } .kvBordered dt, .kvBordered dd { padding-bottom: var(--space8); border-bottom: var(--borderWidth) solid var(--borderSubtle); } @container panel-body (max-width: 30rem) { .kv { grid-template-columns: minmax(0, 1fr); row-gap: var(--space2); } .kv dd + dt { margin-top: var(--space12); } .kvBordered dt { padding-bottom: 0; border-bottom: 0; } } .stat { display: grid; align-content: start; gap: var(--space4); padding: var(--space16); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceRaised); } .statLabel { font-size: var(--textSm); color: var(--textMuted); } .statValue { font-size: var(--text3xl); font-weight: var(--weightBold); line-height: var(--leadingNone); font-variant-numeric: tabular-nums; color: var(--textPrimary); } .countUp { display: inline-grid; } .countUp > * { grid-area: 1 / 1; } .countUpRun { justify-self: start; } .countUpRun:empty { display: none; } .countUp[data-counting='true'] .countUpFinal { opacity: 0; } .statDelta { display: inline-flex; align-items: center; gap: var(--space4); font-size: var(--textSm); font-variant-numeric: tabular-nums; } .statDeltaUp { color: var(--successText); } .statDeltaDown { color: var(--dangerText); } .score { display: grid; gap: var(--space6); } .scoreHead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space8); } .scoreValue { font-size: var(--textXl); font-weight: var(--weightSemibold); font-variant-numeric: tabular-nums; } .scoreTrack { height: 0.5rem; border-radius: var(--radiusFull); background: var(--surfaceSunken); border: var(--borderWidth) solid var(--borderSubtle); overflow: hidden; } .scoreFill { height: 100%; width: var(--score, 0%); border-radius: inherit; background: var(--accentSolid); } .score[data-band='low'] .scoreFill { background: var(--dangerSolid); } .score[data-band='mid'] .scoreFill { background: var(--warningSolid); } .score[data-band='high'] .scoreFill { background: var(--successSolid); } .scoreBreakdown { display: grid; gap: var(--space8); margin-top: var(--space8); } .scoreSkill { display: grid; grid-template-columns: 1fr 4rem auto; gap: var(--space8); align-items: center; font-size: var(--textSm); } .scoreSkillBar { display: block; height: 0.25rem; border-radius: var(--radiusFull); background: var(--surfaceSunken); overflow: hidden; } .scoreSkillFill { display: block; height: 100%; width: var(--score, 0%); background: var(--accentRing); border-radius: inherit; } .scoreMeter { appearance: none; display: block; inline-size: 100%; block-size: 0.25rem; border: 0; border-radius: var(--radiusFull); background: var(--surfaceSunken); overflow: hidden; transform-origin: left center; animation: meterDraw var(--durationSlow) var(--easeOut) backwards; } .scoreMeter:dir(rtl) { transform-origin: right center; } .scoreMeterTotal { block-size: 0.5rem; border: var(--borderWidth) solid var(--borderSubtle); } .scoreMeter::-webkit-meter-bar { background: transparent; border: 0; border-radius: inherit; block-size: 100%; } .scoreMeter::-webkit-meter-optimum-value { background: var(--accentRing); border-radius: inherit; } .scoreMeter::-webkit-meter-suboptimum-value { background: var(--accentRing); border-radius: inherit; } .scoreMeter::-webkit-meter-even-less-good-value { background: var(--accentRing); border-radius: inherit; } .scoreMeter::-moz-meter-bar { background: var(--accentRing); border-radius: inherit; } .loglist { --loglistRowH: 2.25rem; --loglistLevelW: 6.25rem; --loglistCols: 11rem var(--loglistLevelW) 9rem 1fr; position: relative; display: block; overflow: auto; block-size: var(--loglistH, 28rem); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); background: var(--surfaceRaised); container-type: inline-size; } .loglistHead { position: sticky; block-size: auto; inset-block-start: 0; z-index: var(--zSticky); display: grid; grid-template-columns: var(--loglistCols); gap: var(--space8); padding: var(--space8) var(--space12); background: var(--surfaceSunken); border-block-end: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textXs); font-weight: var(--weightSemibold); color: var(--textMuted); } .loglistViewport { position: relative; inline-size: 100%; block-size: var(--loglistTotal, 0); } .loglistRow { position: absolute; inset-inline: 0; inset-block-start: var(--loglistTop, 0); block-size: var(--loglistRowH); display: grid; grid-template-columns: var(--loglistCols); gap: var(--space8); align-items: center; padding-inline: var(--space12); border-block-end: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textSm); text-align: start; inline-size: 100%; background: none; color: var(--textPrimary); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .loglistRow:hover { background: var(--surfaceRaisedHover); } } .loglistRow:active { background: var(--surfaceActive); } .loglistRow[aria-current='true'] { background: var(--accentSoft); } .loglistRow:focus-visible { outline: var(--focusRing); outline-offset: calc(var(--focusRingWidth) * -1); } .loglistCell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loglistCellTime, .loglistCellChannel { color: var(--textMuted); font-variant-numeric: tabular-nums; } .loglistCellMessage { font-family: var(--fontMono); } .loglistCellLevel { display: flex; } .loglistRow[data-partial='true'] .loglistCellMessage::before { content: '...'; color: var(--textMuted); margin-inline-end: var(--space4); } .loglistSkeleton { block-size: var(--loglistRowH); border-block-end: var(--borderWidth) solid var(--borderSubtle); display: grid; grid-template-columns: var(--loglistCols); gap: var(--space8); align-items: center; padding-inline: var(--space12); } .loglistSkeleton .skeleton { block-size: 0.75rem; } @container (max-inline-size: 40rem) { .loglistHead, .loglistRow, .loglistSkeleton { --loglistCols: 6rem var(--loglistLevelW) 1fr; --loglistRowH: var(--touchTarget); } .loglistCellChannel { display: none; } } @container (max-inline-size: 26rem) { .loglistHead, .loglistRow, .loglistSkeleton { --loglistRowH: calc(var(--touchTarget) + var(--space20)); align-content: center; row-gap: var(--space4); } .loglistCellMessage, .loglistHead > :last-child, .loglistSkeleton > :last-child { grid-column: 1 / -1; } } .loglistReader { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space16); } .loglistReader > .loglist { flex: 3 1 40rem; min-inline-size: 0; } .loglistDetail { flex: 2 1 20rem; min-inline-size: 0; } .loglistDetailMessage { font-family: var(--fontMono); font-size: var(--textSm); white-space: pre-wrap; overflow-wrap: anywhere; } .input[type='date'], .input[type='time'], .input[type='datetime-local'], .input[type='month'] { cursor: text; } .input[type='date']::-webkit-calendar-picker-indicator, .input[type='time']::-webkit-calendar-picker-indicator, .input[type='datetime-local']::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; border-radius: var(--radiusSm); } @media (hover: hover) and (pointer: fine) { .input[type='date']:hover::-webkit-calendar-picker-indicator { opacity: 1; } } .datefield { position: relative; } .calendar { width: 19rem; padding: var(--space12); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceOverlay); box-shadow: var(--shadow2); } .calendarHeader { display: flex; align-items: center; gap: var(--space8); margin-bottom: var(--space8); } .calendarMonth { flex: 1; text-align: center; font-weight: var(--weightMedium); font-size: var(--textMd); } .calendarGrid { width: 100%; border-collapse: collapse; } .calendarGrid th { padding: var(--space4) 0; font-size: var(--text2xs); font-weight: var(--weightSemibold); text-transform: uppercase; letter-spacing: var(--trackingCaps); color: var(--textMuted); } .calendarGrid td { padding: 0.0625rem; text-align: center; } .calendarDay { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; margin: 0 auto; border: var(--borderWidth) solid transparent; border-radius: var(--radiusMd); background: none; color: var(--textSecondary); font-size: var(--textSm); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .calendarDay:hover:not(:disabled, [aria-disabled='true']) { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .calendarDay:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .calendarDay[data-outside='true'] { color: var(--textMuted); } .calendarDay[data-today='true'] { border-color: var(--accentRing); font-weight: var(--weightSemibold); } .calendarDay[aria-selected='true'] { background: var(--accentSolid); color: var(--accentOnSolid); border-color: var(--accentSolid); font-weight: var(--weightMedium); } .calendarDay:disabled { color: var(--textDisabled); cursor: not-allowed; text-decoration: line-through; } .calendarGrid td[data-in-range='true'] { background: var(--accentSoft); } .calendarGrid td[data-range-start='true'] { border-radius: var(--radiusMd) 0 0 var(--radiusMd); } .calendarGrid td[data-range-end='true'] { border-radius: 0 var(--radiusMd) var(--radiusMd) 0; } .calendarFooter { display: flex; gap: var(--space8); margin-top: var(--space8); padding-top: var(--space8); border-top: var(--borderWidth) solid var(--borderSubtle); } .calendarPresets { display: flex; flex-wrap: wrap; gap: var(--space4); margin-bottom: var(--space8); } .timeRow { display: flex; align-items: center; gap: var(--space8); } .timezoneNote { font-size: var(--textXs); color: var(--textMuted); white-space: nowrap; } .timestamp { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--textMuted); border-bottom: 1px dotted var(--borderControl); cursor: help; } .timestampAbsolute { font-family: var(--fontMono); font-size: var(--textXs); border-bottom: 0; cursor: auto; } .duration { font-variant-numeric: tabular-nums; font-family: var(--fontMono); font-size: var(--textSm); } .skipLink { position: absolute; top: var(--space8); left: var(--space8); z-index: calc(var(--zTooltip) + 1); padding: var(--space8) var(--space16); border-radius: var(--radiusMd); background: var(--accentSolid); color: var(--accentOnSolid); font-weight: var(--weightMedium); text-decoration: none; transform: translateY(-200%); transition: transform var(--durationFast) var(--easeOut); } .skipLink:focus-visible { transform: translateY(0); } main[tabindex='-1']:focus-visible { outline: none; } .topbar { display: grid; grid-template-columns: 1fr minmax(0, 26rem) 1fr; align-items: center; gap: var(--space16); flex-wrap: wrap; min-block-size: 3.5rem; padding: 0 var(--space16); background: var(--surfaceRaised); border-bottom: var(--borderWidth) solid var(--borderSubtle); } .topbarBrand { display: flex; align-items: center; gap: var(--space8); font-weight: var(--weightSemibold); font-size: var(--textLg); letter-spacing: var(--trackingTight); color: var(--textPrimary); text-decoration: none; white-space: nowrap; } .topbarWorkspace { display: flex; align-items: center; gap: var(--space8); padding: var(--space4) var(--space8); border-radius: var(--radiusMd); border: var(--borderWidth) solid var(--borderSubtle); background: var(--surfaceSunken); color: var(--textSecondary); font-size: var(--textMd); cursor: pointer; min-inline-size: 0; max-width: 14rem; transition: border-color var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .topbarWorkspace:hover { border-color: var(--borderControl); color: var(--textPrimary); } } .topbarWorkspace:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); border-color: var(--borderControl); color: var(--textPrimary); } .topbarSearch { grid-column: 2; inline-size: 100%; min-inline-size: 0; } .topbarActions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space4); } .topbarMenu { grid-column: 1; justify-self: start; } @media (max-width: 60rem) { .topbar { grid-template-columns: auto 1fr; row-gap: var(--space8); padding-block: var(--space8); } .topbarMenu { grid-column: 1; grid-row: 1; } .topbarActions { grid-column: 2; grid-row: 1; } .topbarSearch { grid-column: 1 / -1; grid-row: 2; max-width: none; } } .envStripe { display: flex; align-items: center; justify-content: center; gap: var(--space8); padding: var(--space2) var(--space12); font-size: var(--textXs); font-weight: var(--weightSemibold); letter-spacing: var(--trackingCaps); text-transform: uppercase; } .envStripeDev { background: var(--infoSoft); color: var(--infoText); } .envStripeStaging { background: var(--warningSoft); color: var(--warningText); } .envStripeProduction { background: var(--dangerSolid); color: var(--dangerOnSolid); } .viewBanner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8) var(--space16); padding: var(--space8) var(--space16); background: var(--warningSoft); color: var(--warningText); border-block-end: var(--borderWidth) solid color-mix(in srgb, var(--warningRing) 34%, transparent); font-size: var(--textSm); } .viewBannerWho { min-inline-size: 0; font-weight: var(--weightSemibold); overflow-wrap: anywhere; } .viewBannerTime { font-variant-numeric: tabular-nums; } .viewBannerEnd { margin-inline-start: auto; } .readOnlyScope { display: contents; } .sidenav { display: flex; flex-direction: column; gap: var(--space4); width: var(--sidenavWidth, 15rem); padding: var(--space16) var(--space12); background: var(--surfaceRaised); border-right: var(--borderWidth) solid var(--borderSubtle); overflow-y: auto; } .sidenavGroup { padding: var(--space16) var(--space8) var(--space4); font-size: var(--text2xs); font-weight: var(--weightSemibold); text-transform: uppercase; letter-spacing: var(--trackingCaps); color: var(--textMuted); } .sidenavItem { display: flex; align-items: center; gap: var(--space8); padding: var(--space6) var(--space8); border-radius: var(--radiusMd); color: var(--textSecondary); font-size: var(--textMd); text-decoration: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .sidenavItem:hover { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .sidenavItem:active { background: var(--surfaceActive); } .sidenavItem[aria-current='page'] { background: var(--accentSoft); color: var(--accentText); font-weight: var(--weightMedium); position: relative; } .sidenavItem[aria-current='page']::before { content: ''; position: absolute; left: calc(var(--space12) * -1); top: 20%; bottom: 20%; width: 0.1875rem; border-radius: 0 var(--radiusFull) var(--radiusFull) 0; background: var(--accentSolid); } .sidenavItem .badge { margin-left: auto; } .sidenavIcon { color: var(--textMuted); } .sidenavItem[aria-current='page'] .sidenavIcon { color: inherit; } .sidenavFooter { margin-top: auto; padding-top: var(--space16); border-top: var(--borderWidth) solid var(--borderSubtle); } .sidenavCollapsed { --sidenavWidth: 3.5rem; align-items: center; } .sidenavCollapsed .sidenavLabel, .sidenavCollapsed .sidenavGroup { display: none; } .sidenavCollapsed .sidenavItem { justify-content: center; padding-inline: 0; } .subnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space4); border-bottom: var(--borderWidth) solid var(--borderSubtle); } .subnavLink { position: relative; display: inline-flex; align-items: center; gap: var(--space6); padding: var(--space8) var(--space12); font-size: var(--textMd); font-weight: var(--weightMedium); color: var(--textSecondary); text-decoration: none; border-radius: var(--radiusMd) var(--radiusMd) 0 0; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } .subnavLink::before { content: ''; position: absolute; inset: calc((var(--touchTarget) - 2.125rem) / -2) 0; } @media (hover: hover) and (pointer: fine) { .subnavLink:hover { color: var(--textPrimary); background: var(--surfaceRaisedHover); } } .subnavLink:active { background: var(--surfaceActive); } .subnavLink:focus-visible { outline: var(--focusRing); outline-offset: calc(var(--focusRingOffset) * -1); } .subnavLink[aria-current='page'] { color: var(--accentText); } .subnavLink[aria-current='page']::after { content: ''; position: absolute; inset-inline: var(--space8); bottom: calc(var(--borderWidth) * -1); block-size: var(--borderWidthStrong); background: var(--accentSolid); border-radius: var(--radiusFull); } .breadcrumbs { font-size: var(--textSm); } .breadcrumbsList { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space6); list-style: none; margin: 0; padding: 0; } .breadcrumbsItem { display: flex; align-items: center; gap: var(--space6); color: var(--textMuted); } .breadcrumbsItem:not(:last-child)::after { content: '/'; color: var(--borderControl); speak: never; } .breadcrumbsLink { color: var(--textMuted); text-decoration: none; border-radius: var(--radiusSm); transition: color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .breadcrumbsLink:hover { color: var(--textPrimary); text-decoration: underline; } } .breadcrumbsLink:active:not([aria-disabled='true']) { color: var(--linkActive); text-decoration: underline; } .breadcrumbsItem [aria-current='page'] { color: var(--textPrimary); font-weight: var(--weightMedium); } .breadcrumbsText { color: var(--textMuted); } .breadcrumbsItemOverflow { display: none; } .breadcrumbsList[data-collapse='always']:not([data-expanded='true']) > .breadcrumbsItem[data-middle] { display: none; } .breadcrumbsList[data-collapse='always']:not([data-expanded='true']) > .breadcrumbsItemOverflow { display: flex; } @media (max-width: 40rem) { .breadcrumbsList[data-collapse='narrow']:not([data-expanded='true']) > .breadcrumbsItem[data-middle] { display: none; } .breadcrumbsList[data-collapse='narrow']:not([data-expanded='true']) > .breadcrumbsItemOverflow { display: flex; } } .breadcrumbsOverflow { font: inherit; line-height: var(--leadingSnug); color: var(--textMuted); background: none; border: var(--borderWidth) solid var(--borderControl); border-radius: var(--radiusSm); padding: 0 var(--space6); cursor: pointer; transition: border-color var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .breadcrumbsOverflow:hover { color: var(--textPrimary); border-color: var(--borderStrong); } } .breadcrumbsOverflow:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); border-color: var(--borderStrong); color: var(--textPrimary); } @media (pointer: coarse) { .breadcrumbsOverflow { min-block-size: var(--touchTarget); min-inline-size: var(--touchTarget); } .breadcrumbsLink { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--touchTarget); min-inline-size: var(--touchTarget); } } .img { display: block; max-width: 100%; height: auto; } .imgFrame { position: relative; min-inline-size: 0; overflow: hidden; border-radius: var(--radiusMd); background: var(--surfaceSunken); aspect-ratio: var(--ratio, 16 / 9); } .imgFrame img { width: 100%; height: 100%; object-fit: cover; display: block; } .imgFrameContain img { object-fit: contain; } .imgFrameSquare { --ratio: 1; } .imgFramePortrait { --ratio: 3 / 4; } .imgFrameWide { --ratio: 21 / 9; } .imgPlaceholder { display: grid; min-inline-size: 0; place-items: center; color: var(--textMuted); background: var(--surfaceSunken); border: var(--borderWidth) dashed var(--borderSubtle); border-radius: var(--radiusMd); aspect-ratio: var(--ratio, 16 / 9); } .logo { display: block; height: var(--logoHeight, 1.75rem); width: auto; max-width: 12rem; object-fit: contain; } .logoLg { --logoHeight: 2.5rem; } .logo > svg { display: block; block-size: 100%; inline-size: auto; } .logoPlate { background: var(--n0); padding: var(--space4) var(--space6); border-radius: var(--radiusSm); } .scanPlate { display: inline-grid; place-items: center; background: var(--n0); padding: var(--space12); border-radius: var(--radiusMd); border: var(--borderWidth) solid var(--borderSubtle); } .appRoot { block-size: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--surfacePage); color: var(--textPrimary); font-family: var(--fontSans); font-size: var(--textBase); line-height: var(--leadingNormal); } :root { --appGutter: calc(var(--space2) + var(--padNudge)); } .appShell { display: grid; grid-template-areas: 'stripe stripe' 'sidenav topbar' 'sidenav main'; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; block-size: calc(100dvh - (var(--appGutter) * 2)); inline-size: calc(100dvw - (var(--appGutter) * 2)); margin: var(--appGutter); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusXl); background: var(--surfacePage); overflow: hidden; } body:has(.appShell) { background: var(--surfaceFrame); } .appRoot:has(.appShell) { background: var(--surfaceFrame); } .appRoot:has(.wizard) { background: var(--canvasLight), var(--surfacePage); } .appShellBleed { --appGutter: 0px; border: 0; border-radius: 0; } .appShellStripe { grid-area: stripe; } .appShellTopbar { grid-area: topbar; } .appShell { timeline-scope: --page; } .appShellMain { scroll-timeline: --page block; } .appShellTopbar { position: relative; z-index: var(--zSticky); } .appShellTopbar::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: var(--shadow1); clip-path: inset(0 0 calc(var(--space32) * -1) 0); opacity: 0; } @supports (animation-timeline: scroll()) { .appShellTopbar::after { animation: pageScrollEdge linear both; animation-timeline: --page; animation-range: 0 var(--space4); } } @keyframes pageScrollEdge { to { opacity: 1; } } .appShellSidenav .rail { border-radius: 0; } .appShellSidenav { grid-area: sidenav; min-block-size: 0; } .appShellMain { grid-area: main; min-inline-size: 0; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--canvasLight), var(--surfacePage); scrollbar-gutter: stable; } @media (max-width: 60rem) { .appShell { grid-template-areas: 'stripe' 'topbar' 'main'; grid-template-columns: 1fr; } .appShellSidenav { position: absolute; inline-size: 0; block-size: 0; overflow: visible; } .topbarSearch { display: none; } .pageHeader { flex-direction: column; } .pageHeader > * { inline-size: 100%; } } .page { padding: calc(var(--space24) + var(--padNudge)) calc(var(--space32) + var(--padNudge)) calc(var(--space64) + var(--padNudge)); max-width: 80rem; margin-inline: auto; } .pageNarrow { max-width: 48rem; } .pageFull { max-width: none; } .pageDoc { max-width: calc(var(--measure) + 2 * (var(--space32) + var(--padNudge))); } .pageDocToc { max-width: var(--docPageW); } .pageHeader { display: flex; align-items: flex-start; gap: var(--space16); flex-wrap: wrap; margin-bottom: var(--space24); } .pageAlert { margin-bottom: var(--space24); } .pageHeader > * { min-inline-size: 0; } .breadcrumbs { min-inline-size: 0; } .pageHeaderText { flex: 1 1 18rem; min-width: 0; display: grid; gap: var(--space6); } .pageHeaderActions { display: flex; gap: var(--space8); flex-wrap: wrap; } @media (width <= 60rem) { .pageHeaderText { flex-basis: auto; } } .centredShell { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--space32) var(--space16); background: var(--canvasLight), var(--surfacePage); } .centredShellCard { width: min(24rem, 100%); display: grid; gap: var(--space24); } .centredShellCard > * { margin-block: 0; } .centredShellBrand { display: grid; justify-items: center; gap: var(--space12); } .centredShell .panelTitle, .centredShell .panelLead { text-align: center; } .docShell { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space32); min-block-size: 100%; --docPageW: 90rem; --docTocW: 18rem; } .docShell, .appRoot:has(> .docShell) { --docHeadH: calc( 2.5rem + var(--space24) + var(--padNudge) + var(--space24) + var(--borderWidth) ); } .appRoot:has(> .docShell) { scroll-padding-block-start: calc(var(--docHeadH) + var(--space16)); } .docShell > * { min-inline-size: 0; } .docShellBody { display: grid; grid-template-columns: var(--docTocW) 1fr; gap: var(--space48); align-items: start; } .docShellBody > * { min-inline-size: 0; } .docShellBody .prose { max-width: none; } .docToc { position: sticky; top: calc(var(--docHeadH) + var(--space24)); max-block-size: calc(100dvh - var(--docHeadH) - 2 * var(--space24)); overflow-y: auto; } .docTocTitle { font-size: var(--text2xs); font-weight: var(--weightSemibold); text-transform: uppercase; letter-spacing: var(--trackingCaps); color: var(--textMuted); margin-block-end: var(--space12); } .docTocList { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space2); } .docTocLink { display: grid; grid-template-columns: 1.75ch 1fr; gap: var(--space8); padding: var(--space4) var(--space8); border-radius: var(--radiusSm); font-size: var(--textSm); line-height: var(--leadingSnug); color: var(--textSecondary); text-decoration: none; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } .docTocNum { color: var(--textMuted); font-variant-numeric: tabular-nums; } .docTocLink:focus-visible { background: var(--surfaceRaisedHover); color: var(--textPrimary); } @media (hover: hover) and (pointer: fine) { .docTocLink:hover { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .docTocLink:active { background: var(--surfaceActive); } .docTocLink:focus-visible { outline: var(--focusRing); outline-offset: var(--focusRingOffset); } .prose :where(h2, h3):target { color: var(--accentText); } .prose :where(h2, h3) { scroll-margin-top: calc(var(--docHeadH) + var(--space16)); } @media (max-width: 64rem) { .docShellBody { grid-template-columns: 1fr; gap: var(--space24); } .docToc { position: static; max-block-size: 11rem; border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); padding: var(--space12) var(--space16); } } .docShellHead, .docShellFoot { display: flex; align-items: center; justify-content: space-between; gap: var(--space8) var(--space16); flex-wrap: wrap; } .docShellHead { position: sticky; top: 0; z-index: var(--zSticky); margin-block-start: calc(-1 * (var(--space24) + var(--padNudge))); padding-block-start: calc(var(--space24) + var(--padNudge)); padding-block-end: var(--space24); background: var(--surfacePage); border-block-end: var(--borderWidth) solid var(--borderSubtle); } .docShellFoot { padding-block-start: var(--space24); border-block-start: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textSm); color: var(--textMuted); } .docShellTitle { display: grid; gap: var(--space8); margin-block-end: var(--space32); } .docShellTitle, .docToc, .docShell .prose { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .docToc { animation-delay: var(--staggerStep); } .docShell .prose { animation-delay: calc(var(--staggerStep) * 2); } .docShellMeta { display: flex; gap: var(--space16); flex-wrap: wrap; } .siteShell { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space64); min-block-size: 100%; } .siteShell > *, .siteHero > *, .siteSection > * { min-inline-size: 0; } .appRoot:has(.siteShell) { background: var(--canvasLight), var(--surfacePage); } .siteShellHead, .siteShellFoot { display: flex; align-items: center; justify-content: space-between; gap: var(--space12) var(--space24); flex-wrap: wrap; } .siteShellMain { display: grid; gap: var(--space80); align-content: start; } .siteShellFoot { padding-block-start: var(--space24); border-block-start: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textSm); color: var(--textMuted); } .siteHero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--space48); align-items: center; } .siteHeroText { display: grid; gap: var(--space24); max-inline-size: var(--measure); } .siteHeroLead { font-size: var(--textLg); line-height: var(--leadingNormal); color: var(--textSecondary); margin: 0; } .siteSection { display: grid; gap: var(--space24); position: relative; } .siteSectionHead { display: grid; gap: var(--space8); max-inline-size: var(--measure); } .siteSectionHead > p { margin: 0; color: var(--textSecondary); } .siteCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--space16); } .siteCard { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space12); align-content: start; } .siteCard > p { margin: 0; color: var(--textSecondary); } .siteCard > .btn { justify-self: start; } .siteSteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--space24); margin: 0; padding: 0; list-style: none; counter-reset: site-step; } .siteSteps > li { counter-increment: site-step; display: grid; grid-template-columns: auto 1fr; gap: var(--space4) var(--space12); align-content: start; } .siteSteps > li::before { content: counter(site-step); grid-row: span 2; display: grid; place-items: center; inline-size: var(--space32); block-size: var(--space32); border-radius: var(--radiusFull); background: var(--accentSoft); color: var(--accentText); font-weight: var(--weightSemibold); font-variant-numeric: tabular-nums; } .siteSteps h3 { margin: 0; } .siteSteps p { margin: 0; color: var(--textSecondary); } .sitePromises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--space24) var(--space32); margin: 0; } .sitePromises > div { display: grid; gap: var(--space8); align-content: start; } .sitePromises dt { font-weight: var(--weightSemibold); color: var(--textPrimary); } .sitePromises dd { margin: 0; color: var(--textSecondary); } .siteWho { display: grid; grid-template-columns: auto 1fr; gap: var(--space12); align-items: center; } .siteWhoRef { overflow-wrap: anywhere; } .siteGap { display: grid; gap: var(--space4); margin: 0; padding-inline-start: var(--space20); list-style: decimal; font-size: var(--textSm); color: var(--textSecondary); } .siteLinks { display: flex; flex-wrap: wrap; gap: var(--space8) var(--space24); margin: 0; padding: 0; list-style: none; } .siteShell section[id] { scroll-margin-block-start: var(--space24); } .siteHeroWithProof { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space32); text-align: center; } .siteHeroWithProof .siteHeroText { justify-items: center; } .siteHeroWithProof .siteHeroProof { inline-size: 100%; max-inline-size: var(--measure); text-align: start; } .siteHeroWithProof .scoreValue { font-size: var(--text4xl); line-height: var(--leadingNone); } .siteHeroWithProof .scoreBreakdown { grid-template-columns: max-content minmax(0, 1fr) max-content; } .siteHeroWithProof .scoreSkill { grid-column: 1 / -1; grid-template-columns: subgrid; font-size: var(--textMd); } .siteHeroGap { display: grid; gap: var(--space8); } .siteDoors { display: grid; gap: var(--space24); justify-items: center; max-inline-size: var(--measure); } .siteFigure { display: grid; gap: var(--space16); margin: 0; min-inline-size: 0; } .siteFigure > figcaption { color: var(--textMuted); font-size: var(--textXs); } .siteFigure > p { margin: 0; color: var(--textSecondary); } .siteFigure .siteSteps { align-content: start; } .siteFigure .table thead th { white-space: normal; } .siteFigure .table { font-size: var(--textSm); } .siteFigure .table :is(thead th, tbody th, tbody td) { padding: var(--space8); } :is(.siteArith, .siteFairness) caption { caption-side: top; padding: var(--space12); text-align: start; font-weight: var(--weightSemibold); color: var(--textPrimary); } .siteArith tfoot :is(th, td) { padding: var(--space12); border-block-start: var(--borderWidth) solid var(--borderStrong); font-weight: var(--weightSemibold); color: var(--textPrimary); text-align: left; } .siteArith tfoot .tableNum { text-align: right; } .siteFirewall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--space16); } .siteFirewallView { display: grid; gap: var(--space16); align-content: start; } .siteFirewallView dl { display: grid; gap: var(--space12); margin: 0; } .siteFirewallView dl > div { display: grid; gap: var(--space4); } .siteFirewallView dt { font-size: var(--textXs); color: var(--textMuted); } .siteFirewallView dd { margin: 0; font-size: var(--textSm); color: var(--textPrimary); overflow-wrap: anywhere; } .siteFirewallRefused { display: grid; gap: var(--space8); margin: 0; padding: 0; list-style: none; } .siteFirewallRefused li { display: flex; align-items: center; justify-content: space-between; gap: var(--space8); font-size: var(--textSm); } .siteFirewallSkills { margin: 0; padding: 0; list-style: none; } .siteBand { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--measure), 100%), 1fr)); gap: var(--space48); padding: var(--panelPad); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceRaised); } .siteBand > section { display: grid; gap: var(--space24); align-content: start; min-inline-size: 0; } .siteBand .sitePromises { grid-template-columns: minmax(0, 1fr); gap: var(--space24); } .siteSides { display: grid; gap: var(--space24); margin: 0; padding: 0; list-style: none; } .siteSides > li { display: grid; gap: var(--space8); padding-block-start: var(--space24); border-block-start: var(--borderWidth) solid var(--borderSubtle); } .siteSides > li:first-child { padding-block-start: 0; border-block-start: 0; } .siteSides p { margin: 0; color: var(--textSecondary); } .siteSides .btn { justify-self: start; } .siteClose { display: grid; gap: var(--space24); justify-items: center; text-align: center; } .siteShell .card { animation: none; } .siteShell .siteHeroText, .siteShell .siteHeroProof, .siteShell .siteHeroWithProof .scoreSkill, .siteShell .siteHeroGap, .siteShell .siteDoors { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } .siteShell .siteHeroProof, .siteShell .siteHeroWithProof .scoreMeterTotal { animation-delay: calc(var(--staggerStep) * 2); } .siteShell .siteHeroWithProof .scoreSkill:nth-child(1), .siteShell .siteHeroWithProof .scoreSkill:nth-child(1) .scoreMeter { animation-delay: calc(var(--staggerStep) * 3); } .siteShell .siteHeroWithProof .scoreSkill:nth-child(2), .siteShell .siteHeroWithProof .scoreSkill:nth-child(2) .scoreMeter { animation-delay: calc(var(--staggerStep) * 4); } .siteShell .siteHeroWithProof .scoreSkill:nth-child(3), .siteShell .siteHeroWithProof .scoreSkill:nth-child(3) .scoreMeter { animation-delay: calc(var(--staggerStep) * 5); } .siteShell .siteHeroWithProof .scoreSkill:nth-child(4), .siteShell .siteHeroWithProof .scoreSkill:nth-child(4) .scoreMeter { animation-delay: calc(var(--staggerStep) * 6); } .siteShell .siteHeroWithProof .scoreSkill:nth-child(n + 5), .siteShell .siteHeroWithProof .scoreSkill:nth-child(n + 5) .scoreMeter { animation-delay: calc(var(--staggerStep) * 7); } .siteShell .siteHeroGap, .siteShell .siteDoors { animation-delay: calc(var(--staggerStep) * 8); } [data-scroll-reveal][data-entered] { animation: enterRise var(--durationSlow) var(--easeOut) backwards; } [data-scroll-reveal] :is(.card, .panel, .table tbody tr, .scoreMeter) { animation: none; } :where(.siteShell :is(.siteSection, .siteBand, .siteClose)) :is(.card, .panel, .table tbody tr, .scoreMeter):not([data-scroll-reveal], [data-scroll-reveal] *) { animation: none; } .split { display: grid; grid-template-columns: minmax(18rem, var(--splitList, 24rem)) 1fr; gap: 0; min-height: 0; height: 100%; } .splitList { border-right: var(--borderWidth) solid var(--borderSubtle); overflow-y: auto; background: var(--surfaceRaised); } .splitDetail { overflow-y: auto; min-width: 0; } @media (max-width: 60rem) { .split { grid-template-columns: 1fr; } .split[data-showing='detail'] .splitList { display: none; } .split[data-showing='list'] .splitDetail { display: none; } } .splitItem { display: grid; gap: var(--space4); width: 100%; padding: var(--space12) var(--space16); border: 0; border-bottom: var(--borderWidth) solid var(--borderSubtle); border-left: 3px solid transparent; background: none; text-align: left; cursor: pointer; color: inherit; transition: background var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .splitItem:hover { background: var(--surfaceRaisedHover); } } .splitItem:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .splitItem[aria-current='true'] { background: var(--accentSoft); border-left-color: var(--accentSolid); } .splitItemTitle { font-weight: var(--weightMedium); color: var(--textPrimary); } .splitItemMeta { display: flex; gap: var(--space8); font-size: var(--textXs); color: var(--textMuted); } .wizard { display: grid; grid-template-columns: 17rem 1fr; gap: var(--space32); align-items: start; } @media (max-width: 60rem) { .wizard { grid-template-columns: 1fr; gap: var(--space20); } } .wizardAside { position: sticky; top: var(--space24); display: grid; gap: var(--space16); } .wizardMain { min-width: 0; display: grid; gap: var(--space20); } .scope { display: flex; align-items: center; gap: var(--space2); min-inline-size: 0; } .scopeLevel { display: flex; align-items: center; gap: var(--space6); max-inline-size: 12rem; padding: var(--space4) var(--space8); border-radius: var(--radiusMd); color: var(--textMuted); font-size: var(--textMd); cursor: pointer; white-space: nowrap; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .scopeLevel:hover { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .scopeLevel:active:not(:disabled, [aria-disabled='true']) { background: var(--surfaceActive); } .scopeLevelCurrent { color: var(--textPrimary); font-weight: var(--weightMedium); max-inline-size: 16rem; } .scopeName { overflow: hidden; text-overflow: ellipsis; } .scopeSep { color: var(--borderControl); flex: none; } .scopeKind { font-size: var(--text2xs); text-transform: uppercase; letter-spacing: var(--trackingCaps); color: var(--textMuted); flex: none; } .topbarMenu { display: none; } @media (max-width: 60rem) { .topbarMenu { display: inline-flex; } .scopeLevel { max-inline-size: 9rem; } } .topbarBell { position: relative; } .topbarBell .badgeCount { position: absolute; inset-block-start: calc(var(--borderWidthStrong) * -1); inset-inline-end: calc(var(--borderWidthStrong) * -1); min-inline-size: 1rem; block-size: 1rem; font-size: var(--textXs); border: var(--borderWidthStrong) solid var(--surfaceRaised); animation: enterPop var(--durationFast) var(--easeOut); } .menuDot { flex: none; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-start: auto; border-radius: var(--radiusFull); background: var(--accentSolid); } .menuTriggerDot { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 0.625rem; block-size: 0.625rem; border: var(--borderWidthStrong) solid var(--surfaceRaised); border-radius: var(--radiusFull); background: var(--accentSolid); pointer-events: none; } .whatsNew { display: grid; gap: var(--space24); } .whatsNewMonth { margin: 0 0 var(--space12); color: var(--textSecondary); font-size: var(--textSm); font-weight: 600; } .whatsNewList { display: grid; gap: var(--space12); margin: 0; padding: 0; list-style: none; } .whatsNewEntry { min-inline-size: 0; padding: var(--space16); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusMd); background: var(--surfaceRaised); } .whatsNewEntry:focus-visible { outline: var(--focusRingWidth) solid var(--focusRingColor); outline-offset: calc(-1 * var(--focusRingWidth)); } .whatsNewMeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8); color: var(--textSecondary); font-size: var(--textSm); } .whatsNewTitle { margin: var(--space8) 0 var(--space4); color: var(--textPrimary); font-size: var(--textLg); overflow-wrap: anywhere; } .whatsNewSummary { margin: 0; color: var(--textSecondary); overflow-wrap: anywhere; } .whatsNewDetails { margin-top: var(--space12); } .whatsNewMore { display: inline-flex; align-items: center; gap: var(--space4); color: var(--accentText); font-size: var(--textSm); cursor: pointer; list-style: none; } .whatsNewMore::-webkit-details-marker { display: none; } .whatsNewMore .icon { inline-size: 1em; block-size: 1em; transition: transform var(--durationInstant) var(--easeOut); } .whatsNewDetails[open] .whatsNewMore .icon { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .whatsNewMore .icon { transition: none; } } @media (pointer: coarse) { .whatsNewMore { min-block-size: var(--touchTarget); } } .whatsNewBody { margin-top: var(--space12); } .rail { position: relative; z-index: var(--zSticky); display: flex; flex-direction: column; inline-size: var(--railWidth, 15rem); block-size: 100%; min-block-size: 0; background: var(--surfaceRaised); border-right: var(--borderWidth) solid var(--borderSubtle); overflow: hidden; } .rail[data-collapsed='true'] { --railWidth: 3.5rem; } .rail:not([data-ready='true']), .rail:not([data-ready='true']) :is(.railGroup, .railGroupBody) { transition: none; } .rail[data-snap='true'] :is(.railGroup, .railGroupBody) { transition: none; } .railBrand, .railFilter, .railFooter { flex: none; } .railBody { flex: 1; min-block-size: 0; overflow-y: auto; overflow-x: hidden; padding-block: var(--space6) var(--space20); } .railBrand { display: flex; align-items: center; gap: var(--space8); block-size: 3.5rem; padding-inline: var(--space12); border-bottom: var(--borderWidth) solid var(--borderSubtle); white-space: nowrap; } .railHome { display: flex; align-items: center; gap: var(--space8); flex: 1; min-inline-size: 0; color: var(--textPrimary); text-decoration: none; border-radius: var(--radiusSm); transition: background var(--durationInstant) var(--easeOut), box-shadow var(--durationInstant) var(--easeOut), transform var(--durationFast) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .railHome:hover { background: var(--brandLinkHover); box-shadow: 0 0 0 var(--brandLinkBleed) var(--brandLinkHover); } } .railHome:active { background: var(--brandLinkActive); box-shadow: 0 0 0 var(--brandLinkBleed) var(--brandLinkActive); transform: scale(var(--pressScale)); } .railLogo { display: block; block-size: 1.75rem; color: var(--textPrimary); } .railLogo > svg { display: block; block-size: 100%; inline-size: auto; } .railLogoMark { display: none; } .rail[data-collapsed='true'] .railLogoWide { display: none; } .railExpander { display: none; grid-area: 1 / 1; place-items: center; color: var(--textPrimary); } .rail[data-collapsed='true'] .railHome { display: grid; grid-template-areas: 'stack'; place-items: center; inline-size: 100%; flex: none; cursor: pointer; } .rail[data-collapsed='true'] .railLogoMark, .rail[data-collapsed='true'] .railExpander { grid-area: stack; display: grid; place-items: center; transition: opacity var(--durationFast) var(--easeOut); } .rail[data-collapsed='true'] .railExpander { opacity: 0; } .rail[data-collapsed='true'] .railHome:focus-visible .railLogoMark { opacity: 0; } @media (hover: hover) and (pointer: fine) { .rail[data-collapsed='true'] .railHome:hover .railLogoMark { opacity: 0; } } .rail[data-collapsed='true'] .railHome:focus-visible .railExpander { opacity: 1; } @media (hover: hover) and (pointer: fine) { .rail[data-collapsed='true'] .railHome:hover .railExpander { opacity: 1; } } .railLabel, .railSectionLabel, .railPill, .railExternal, .railFilter { transition: opacity var(--durationFast) var(--easeOut); } .rail[data-collapsed='true'] :is(.railLabel, .railSectionLabel, .railChevron, .railPill, .railExternal) { opacity: 0; transition-delay: 0s; transition-duration: var(--durationInstant); visibility: hidden; } .railCollapse { flex: none; margin-inline-start: auto; } .rail[data-collapsed='true'] .railCollapse { display: none; } .rail[data-collapsed='true'] .railBrand { justify-content: center; padding-inline: 0; } .rail[data-collapsed='true'] .railHome { justify-content: center; } .railFilter { padding: var(--space12); border-bottom: var(--borderWidth) solid var(--borderSubtle); } .rail[data-collapsed='true'] .railFilter { block-size: 0; padding-block: 0; opacity: 0; visibility: hidden; overflow: hidden; border-bottom-color: transparent; transition-delay: 0s; } .railSection + .railSection { margin-block-start: var(--space12); } .railSectionLabel { display: block; padding: var(--space12) var(--space16) var(--space4); font-size: var(--textXs); font-weight: var(--weightSemibold); color: var(--textMuted); white-space: nowrap; } .rail[data-collapsed='true'] .railSectionLabel { block-size: 0; padding-block: 0; } .railItem { position: relative; display: flex; align-items: center; gap: var(--space8); inline-size: 100%; min-block-size: 2.125rem; padding: var(--space4) var(--space12) var(--space4) var(--space16); border-left: 3px solid transparent; color: var(--textSecondary); font-size: var(--textMd); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--durationInstant) var(--easeOut), color var(--durationInstant) var(--easeOut); } .railItem:focus-visible { outline-offset: calc((var(--focusRingWidth) + var(--focusRingOffset)) * -1); } @media (hover: hover) and (pointer: fine) { .railItem:hover { background: var(--surfaceRaisedHover); color: var(--textPrimary); } } .railItem:active:not([aria-disabled='true']) { background: var(--surfaceActive); } .railIcon { flex: none; color: var(--textMuted); } .railLabel { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } .railItem[aria-current='page'] { background: var(--accentSoft); color: var(--accentText); border-left-color: var(--accentSolid); font-weight: var(--weightMedium); } .railItem[aria-current='page'] .railIcon { color: inherit; } .railItem[data-trail='true'] { color: var(--accentText); } .railItem[data-trail='true'] .railIcon { color: inherit; } .railChevron { flex: none; color: var(--textMuted); transition: transform var(--durationFast) var(--easeOut), opacity var(--durationFast) var(--easeOut); } .railGroup[data-open='true'] > .railItem .railChevron { transform: rotate(90deg); } .railPill { margin-inline-start: auto; padding: 0.0625rem var(--space6); border-radius: var(--radiusFull); background: var(--surfaceActive); color: var(--textMuted); font-size: var(--text2xs); font-weight: var(--weightSemibold); letter-spacing: var(--trackingCaps); text-transform: uppercase; } .railExternal { flex: none; inline-size: 0.75em; block-size: 0.75em; color: var(--textMuted); background: currentColor; mask-image: var(--iconExternal); mask-repeat: no-repeat; } @media (forced-colors: active) { .railExternal { forced-color-adjust: none; background: CanvasText; } } .railItem[aria-disabled='true'] { color: var(--textDisabled); cursor: default; } .railItem[aria-disabled='true'] .railIcon { color: var(--textDisabled); } @media (hover: hover) and (pointer: fine) { .railItem[aria-disabled='true']:hover { background: none; color: var(--textDisabled); } } .railGroup { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows var(--durationSlow) var(--easeInOut); } .railGroup[data-open='true'] { grid-template-rows: auto 1fr; } .railGroupBody { min-block-size: 0; overflow: hidden; visibility: hidden; transition: visibility var(--durationSlow); } .railGroup[data-open='true'] > .railGroupBody { visibility: visible; } .railGroup:not([data-open='true']) .railGroupBody { visibility: hidden; } @media (min-width: 60.0625rem) { .rail[data-collapsed='true'] .railGroup { grid-template-rows: auto 0fr; } .rail[data-collapsed='true'] .railGroupBody { visibility: hidden; } } .railGroupBody .railItem { padding-left: calc(var(--space16) + var(--space20)); } .railGroupBody .railGroupBody .railItem { padding-left: calc(var(--space16) + var(--space40)); } .railGroupBody .railGroupBody .railGroupBody .railItem { padding-left: calc(var(--space16) + var(--space64)); } .rail[data-collapsed='true'] .railItem { padding-left: var(--space16); } .railFlyout { position: fixed; z-index: var(--zDropdown); min-inline-size: 12rem; padding: var(--space4); background: var(--surfaceOverlay); border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); box-shadow: var(--shadow2); opacity: 0; visibility: hidden; transform: translateX(calc(var(--motionNudge) * -1)); transition: opacity var(--durationInstant) var(--easeIn), transform var(--durationInstant) var(--easeIn), visibility var(--durationInstant); } .railFlyout[data-open='true'] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--durationFast) var(--easeOut), transform var(--durationFast) var(--easeOut), visibility var(--durationFast); } .railFlyout::before, .railTip::before { content: ''; position: absolute; inset-inline-start: -0.3125rem; inset-block-start: var(--arrowTop, 1.25rem); inline-size: 0.5rem; block-size: 0.5rem; rotate: 45deg; translate: 0 -50%; background: inherit; border-inline-start: var(--borderWidth) solid var(--tipBorder); border-block-end: var(--borderWidth) solid var(--tipBorder); } .railFlyoutTitle { display: flex; align-items: center; gap: var(--space6); padding: var(--space6) var(--space8); margin-block-end: var(--space4); border-bottom: var(--borderWidth) solid var(--borderSubtle); font-size: var(--textXs); font-weight: var(--weightSemibold); color: var(--textMuted); white-space: nowrap; } .railFlyout .railItem { border-left: 0; border-radius: var(--radiusSm); padding: var(--space6) var(--space8); min-block-size: auto; } .railFlyout .railItem[aria-current='page'] { background: var(--accentSoft); } @media (pointer: coarse) { .railItem, .railFlyout .railItem { min-block-size: var(--touchTarget); } } .railTip { position: fixed; z-index: var(--zTooltip); max-inline-size: min(var(--tipMeasure), calc(100vw - var(--space32))); padding: var(--tipPad); background: var(--tipSurface); border: var(--borderWidth) solid var(--tipBorder); border-radius: var(--tipRadius); box-shadow: var(--tipShadow); color: var(--textPrimary); font-size: var(--textSm); text-transform: none; white-space: normal; overflow-wrap: break-word; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--durationInstant) var(--easeIn), visibility var(--durationInstant); } .railTip[data-open='true'] { opacity: 1; visibility: visible; transition: opacity var(--durationFast) var(--easeOut), visibility var(--durationFast); } .railTip { --arrowTop: 50%; } .railFooter { padding: var(--space8) var(--space12); border-top: var(--borderWidth) solid var(--borderSubtle); } .railBackdrop { position: fixed; inset: 0; z-index: var(--zBackdrop); background: var(--backdrop); backdrop-filter: var(--backdropBlur); opacity: 0; visibility: hidden; transition: opacity var(--durationExit) var(--easeIn), visibility var(--durationExit); } .railBackdrop[data-open='true'] { opacity: 1; visibility: visible; transition: opacity var(--durationBase) var(--easeOut), visibility var(--durationBase); } @media (max-width: 60rem) { .rail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--zModal); inline-size: var(--railWidth, 15rem); translate: -100% 0; transition: translate var(--durationExit) var(--easeIn); } .rail[data-collapsed='true'] { --railWidth: 15rem; } .rail[data-mobile-open='true'] { translate: 0 0; transition: translate var(--durationSlow) var(--easeOut); } .rail[data-collapsed='true'] :is(.railLabel, .railSectionLabel, .railChevron, .railPill, .railExternal) { opacity: 1; visibility: visible; } .rail[data-collapsed='true'] .railLogoWide { display: block; } .rail[data-collapsed='true'] .railLogoMark, .rail[data-collapsed='true'] .railExpander { display: none; } .rail[data-collapsed='true'] .railFilter { block-size: auto; padding-block: var(--space12); opacity: 1; visibility: visible; } } @media (min-width: 60.0625rem) { .railBackdrop { display: none; } } .chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--space8); min-inline-size: 0; } .chartPlot { position: relative; block-size: var(--chartPlotH); min-inline-size: 0; border-inline-start: var(--borderWidth) solid var(--borderSubtle); border-block-end: var(--borderWidth) solid var(--borderSubtle); } .chartGrid { position: absolute; inset: 0; display: grid; pointer-events: none; } .chartGridLine { border-block-start: var(--borderWidth) solid var(--borderSubtle); opacity: 0.55; } .chartColumns { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: var(--chartColGap); } .chartCol { flex: 1 1 0; min-inline-size: 0; block-size: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; } .chartBar { block-size: var(--chartValue, 0%); background: var(--accentSolid); border-radius: var(--radiusSm) var(--radiusSm) 0 0; transform-origin: bottom; animation: chartDraw var(--durationSlow) var(--easeOut) backwards; } @keyframes chartDraw { from { transform: scaleY(0); } } .chartCol:nth-child(2) .chartBar { animation-delay: calc(var(--staggerStep) * 0.5); } .chartCol:nth-child(3) .chartBar { animation-delay: calc(var(--staggerStep) * 1); } .chartCol:nth-child(4) .chartBar { animation-delay: calc(var(--staggerStep) * 1.5); } .chartCol:nth-child(5) .chartBar { animation-delay: calc(var(--staggerStep) * 2); } .chartCol:nth-child(6) .chartBar { animation-delay: calc(var(--staggerStep) * 2.5); } .chartCol:nth-child(7) .chartBar { animation-delay: calc(var(--staggerStep) * 3); } .chartCol:nth-child(n + 8) .chartBar { animation-delay: calc(var(--staggerStep) * 3.5); } .chartBar:not([data-zero], [data-missing]) { min-block-size: var(--chartBarFloor); } .chartBar[data-missing] { block-size: 100%; background: repeating-linear-gradient( 135deg, var(--borderStrong) 0 var(--borderWidth), transparent var(--borderWidth) var(--space6) ); border-radius: 0; } .chartBarMuted { background: var(--borderStrong); } .chartBarSuccess { background: var(--successSolid); } .chartBarWarning, .chartBarDanger { background-image: repeating-linear-gradient( 45deg, transparent 0 var(--space4), var(--surfaceRaised) var(--space4) calc(var(--space4) + var(--borderWidthStrong)) ); } .chartBarWarning { background-color: var(--warningSolid); } .chartBarDanger { background-color: var(--dangerSolid); } .chartValue { display: none; font-size: var(--textXs); font-variant-numeric: tabular-nums; color: var(--textSecondary); text-align: center; margin-block-end: var(--space4); white-space: nowrap; } .chartLabelled .chartValue { display: block; } .chartAxisY { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; block-size: var(--chartPlotH); font-size: var(--textXs); font-variant-numeric: tabular-nums; color: var(--textMuted); white-space: nowrap; } .chartTick { block-size: 0; display: flex; align-items: center; } .chartTick:first-child { align-items: flex-start; } .chartTick:last-child { align-items: flex-end; } .chartAxisX { grid-column: 2; display: flex; min-inline-size: 0; gap: var(--chartColGap); font-size: var(--textXs); color: var(--textMuted); } .chartAxisX span { flex: 1 1 0; min-inline-size: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chartLegend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space8) var(--space16); font-size: var(--textXs); color: var(--textSecondary); } .chartKey { display: flex; align-items: center; gap: var(--space6); } .chartSwatch { inline-size: var(--space8); block-size: var(--space8); border-radius: var(--radiusSm); background: var(--accentSolid); flex: none; } .chartSwatchMuted { background: var(--borderStrong); } .chartSwatchSuccess { background: var(--successSolid); } .chartSwatchWarning { background: var(--warningSolid); } .chartSwatchDanger { background: var(--dangerSolid); } .chartSwatchWarning, .chartSwatchDanger { background-image: repeating-linear-gradient( 45deg, transparent 0 calc(var(--space4) / 2), var(--surfaceRaised) calc(var(--space4) / 2) calc(var(--space4) / 2 + var(--borderWidth)) ); } .chartSwatchMissing { background: repeating-linear-gradient( 135deg, var(--borderStrong) 0 var(--borderWidth), transparent var(--borderWidth) calc(var(--space6) / 2) ); box-shadow: inset 0 0 0 var(--borderWidth) var(--borderStrong); } .chartFigures { grid-column: 1 / -1; display: grid; justify-items: start; gap: var(--space8); min-inline-size: 0; } .chartFigures > .tableWrap { justify-self: stretch; } .chartEmpty { grid-column: 1 / -1; block-size: var(--chartPlotH); display: grid; place-items: center; border: var(--borderWidth) dashed var(--borderSubtle); border-radius: var(--radiusMd); color: var(--textMuted); font-size: var(--textSm); text-align: center; padding: var(--space16); } .chartCompact { --chartPlotH: var(--chartPlotHCompact); } :is(.statusBanner, .statusMark, .serviceRowState, .uptimeBar, .statusLegendKey)[data-state='operational'] { --statusFill: var(--successSolid); --statusSoft: var(--successSoft); --statusEdge: var(--successRing); --statusInk: var(--successText); --statusOnFill: var(--successOnSolid); } :is(.statusBanner, .statusMark, .serviceRowState, .uptimeBar, .statusLegendKey)[data-state='degraded'] { --statusFill: var(--warningSolid); --statusSoft: var(--warningSoft); --statusEdge: var(--warningRing); --statusInk: var(--warningText); --statusOnFill: var(--warningOnSolid); } :is(.statusBanner, .statusMark, .serviceRowState, .uptimeBar, .statusLegendKey)[data-state='down'] { --statusFill: var(--dangerSolid); --statusSoft: var(--dangerSoft); --statusEdge: var(--dangerRing); --statusInk: var(--dangerText); --statusOnFill: var(--dangerOnSolid); } :is(.statusBanner, .statusMark, .serviceRowState, .uptimeBar, .statusLegendKey)[data-state='none'] { --statusFill: var(--textDisabled); --statusSoft: var(--neutralSoft); --statusEdge: var(--borderSubtle); --statusInk: var(--neutralText); --statusOnFill: var(--surfaceRaised); } .statusMark { display: inline-grid; place-items: center; flex: none; inline-size: 1.25em; block-size: 1.25em; border-radius: var(--radiusSm); background: var(--statusFill, var(--textDisabled)); color: var(--statusOnFill, var(--surfaceRaised)); } .statusMark > .icon { inline-size: 0.8em; block-size: 0.8em; stroke-width: 3; } .statusBanner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8) var(--space16); padding: var(--space16) var(--space20); border: var(--borderWidth) solid var(--statusEdge, var(--borderSubtle)); border-radius: var(--radiusLg); background: var(--statusSoft, var(--surfaceRaised)); } .statusBannerVerdict { display: flex; align-items: center; gap: var(--space12); flex: 1 1 16rem; min-inline-size: 0; margin: 0; font-size: var(--textLg); font-weight: var(--weightSemibold); line-height: var(--leadingTight); color: var(--textPrimary); } .statusBannerVerdict > .statusMark { font-size: var(--textXl); } .statusBannerTime { flex: none; margin: 0; font-family: var(--fontMono); font-size: var(--textXs); font-variant-numeric: tabular-nums; color: var(--textSecondary); } .statusList { display: grid; gap: var(--space20); margin: 0; padding: 0; list-style: none; } .statusListProbes { gap: 0; border: var(--borderWidth) solid var(--borderSubtle); border-radius: var(--radiusLg); background: var(--surfaceRaised); } .statusListProbes > .serviceRow { padding: var(--space12) var(--space16); } .statusListProbes > .serviceRow + .serviceRow { border-top: var(--borderWidth) solid var(--borderSubtle); } .serviceRow { container: service-row / inline-size; display: grid; gap: var(--space8); min-inline-size: 0; } .serviceRowHead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space4) var(--space12); min-inline-size: 0; } .serviceRowName { margin: 0; font-size: var(--textMd); font-weight: var(--weightMedium); color: var(--textPrimary); overflow-wrap: anywhere; } .serviceRowMeta { font-family: var(--fontMono); font-size: var(--textXs); font-variant-numeric: tabular-nums; color: var(--textMuted); } .serviceRowStatus { display: inline-flex; align-items: center; gap: var(--space8); margin-inline-start: auto; font-size: var(--textSm); white-space: nowrap; } .serviceRowUptime { font-family: var(--fontMono); font-variant-numeric: tabular-nums; color: var(--textSecondary); } .serviceRowState { display: inline-flex; align-items: center; gap: var(--space6); color: var(--statusInk, var(--textSecondary)); } .serviceRowDetail { margin: 0; font-size: var(--textSm); color: var(--textSecondary); overflow-wrap: anywhere; } .uptime { position: relative; display: grid; gap: var(--space6); min-inline-size: 0; } .uptimeBars { display: flex; gap: var(--uptimeGap); block-size: var(--uptimeBarH); min-inline-size: 0; } .uptimeDay { flex: 1 1 0; min-inline-size: 0; } .uptimeBar { display: block; inline-size: 100%; block-size: 100%; border-radius: var(--radiusSm); background: var(--statusFill, var(--textDisabled)); transition: opacity var(--durationFast) var(--easeOut); } @media (hover: hover) and (pointer: fine) { .uptimeBars:hover .uptimeBar:not(:hover) { opacity: 0.55; } } .uptimeCaption { display: flex; justify-content: space-between; gap: var(--space8); font-size: var(--textXs); color: var(--textMuted); } :is(.uptimeCaption, .serviceRowUptime) [data-window='30'], :is(.uptimeCaption, .serviceRowUptime) [data-window='14'] { display: none; } @container service-row (max-width: 36rem) { .uptimeDay:nth-child(-n + 15) { display: none; } :is(.uptimeCaption, .serviceRowUptime) [data-window='45'] { display: none; } :is(.uptimeCaption, .serviceRowUptime) [data-window='30'] { display: inline; } } @container service-row (max-width: 22rem) { .uptimeDay:nth-child(-n + 31) { display: none; } :is(.uptimeCaption, .serviceRowUptime) [data-window='30'] { display: none; } :is(.uptimeCaption, .serviceRowUptime) [data-window='14'] { display: inline; } } @media (forced-colors: active) { .uptimeBar { border: var(--borderWidth) solid CanvasText; } .statusMark { forced-color-adjust: none; } } .statusLegend { display: flex; flex-wrap: wrap; gap: var(--space4) var(--space16); margin: 0; padding: 0; list-style: none; font-size: var(--textXs); color: var(--textMuted); } .statusLegendKey { display: inline-flex; align-items: center; gap: var(--space6); } .statusLegendSwatch { flex: none; inline-size: var(--uptimeSwatch); block-size: var(--uptimeSwatch); border-radius: var(--radiusSm); background: var(--statusFill); }