:root { --lts-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --lts-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --lts-text-entry-font-size: 0px; --lts-font-size-text-entry-min: 1rem; --lts-font-size-xs: 0.75rem; --lts-line-height-xs: 1.4; --lts-font-size-sm: 0.875rem; --lts-line-height-sm: 1.45; --lts-font-size-md: 1rem; --lts-line-height-md: 1.5; --lts-font-size-lg: 1.25rem; --lts-line-height-lg: 1.4; --lts-font-size-xl: 1.75rem; --lts-line-height-xl: 1.25; --lts-font-size-xxl: 3rem; --lts-line-height-xxl: 1.05; --lts-font-weight-regular: 400; --lts-font-weight-medium: 500; --lts-font-weight-semibold: 600; --lts-font-weight-bold: 700; --lts-font-weight-heavy: 750; --lts-font-weight-display: 800; --lts-font-variant-numeric-quantity: tabular-nums; --lts-letter-spacing-display: -0.02em; --lts-letter-spacing-caps: 0.08em; --lts-letter-spacing-normal: 0; --lts-space-2xs: 0.25rem; --lts-space-xs: 0.5rem; --lts-space-sm: 0.75rem; --lts-space-md: 1rem; --lts-space-lg: 1.5rem; --lts-space-xl: 2rem; --lts-space-xxl: 3rem; --lts-radius-none: 0px; --lts-radius-control: 10px; --lts-radius-card: 10px; --lts-radius-full: 9999px; --lts-radius-pill: 9999px; --lts-border-width: 1px; --lts-border-width-thick: 2px; --lts-border-style: solid; --lts-motion-duration-fast: 120ms; --lts-motion-duration-base: 160ms; --lts-motion-duration-slow: 220ms; --lts-motion-easing-standard: ease-in-out; --lts-motion-easing-entrance: ease-out; --lts-motion-easing-exit: ease-in; --lts-motion-delay-none: 0ms; --lts-motion-duration-reduced: 0ms; --lts-touch-target-min-width: 44px; --lts-touch-target-min-height: 44px; --lts-topbar-height: 4rem; --lts-shell-rail: 64px; --lts-shell-rail-expanded: 248px; --lts-shell-rail-label-max: 170px; --lts-shell-topbar: 56px; --lts-shell-tabbar: 56px; --lts-shell-pool: 300px; --lts-page-width-form: 48rem; --lts-page-width-content: 76rem; --lts-page-width-wide: 90rem; --lts-color-neutral-0: #FFFFFF; --lts-color-neutral-50: #F8FAFC; --lts-color-neutral-100: #EEF1F4; --lts-color-neutral-200: #DFE3E8; --lts-color-neutral-300: #C4CBD4; --lts-color-neutral-400: #9AA5B1; --lts-color-neutral-500: #6B7684; --lts-color-neutral-600: #4C5563; --lts-color-neutral-700: #363E4A; --lts-color-neutral-800: #232933; --lts-color-neutral-900: #14181F; --lts-color-neutral-950: #0A0D12; --lts-color-success: #15803D; --lts-color-success-subtle: #EAF6EF; --lts-color-warning: #155FA0; --lts-color-warning-subtle: #E6F1FB; --lts-color-danger: #B91C1C; --lts-color-danger-subtle: #FDECEC; --lts-color-info: #155FA0; --lts-color-info-subtle: #E6F1FB; --lts-color-text-primary: #0F172A; --lts-color-text-body: #334155; --lts-color-text-secondary: #64748B; --lts-color-text-disabled: #9AA5B1; --lts-color-danger-text: #B91C1C; --lts-color-danger-emphasis: #B91C1C; --lts-color-text-link: #006BD6; --lts-color-surface-canvas: #FFFFFF; --lts-color-surface-raised: #F8FAFC; --lts-color-surface-subtle: #F8FAFC; --lts-color-border-decorative: #E2E8F0; --lts-color-border-interactive: #6B7684; --lts-color-border-strong: #6B7684; --lts-color-text-warning: #155FA0; --lts-focus-ring-width: 2px; --lts-focus-ring-offset: 2px; --lts-focus-ring-style: solid; --lts-v3-color-canvas: #08111F; --lts-v3-color-navigation: #0B1424; --lts-v3-color-utility: #0D1728; --lts-v3-color-surface1: #111D30; --lts-v3-color-surface2: #152238; --lts-v3-color-raised: #1A2943; --lts-v3-color-card: #151A20; --lts-v3-color-card-tile: #151A20; --lts-v3-color-card-border: #242C36; --lts-v3-color-border: #273854; --lts-v3-color-border-strong: #5A75A3; --lts-v3-color-text-primary: #F4F7FC; --lts-v3-color-text-secondary: #B8C3D8; --lts-v3-color-text-muted: #8997B0; --lts-v3-color-accent: #5168F5; --lts-v3-color-accent-hover: #667AF7; --lts-v3-color-focus-ring: #88A4FF; --lts-v3-color-info: #4D8DFF; --lts-v3-color-success: #36B36F; --lts-v3-color-warning: #4D8DFF; --lts-v3-color-critical: #E45B63; --lts-v5-color-bg: #0f1216; --lts-v5-color-well: #10151b; --lts-v5-color-chrome: #12171d; --lts-v5-color-panel: #151a20; --lts-v5-color-nested: #171d24; --lts-v5-color-control: #1b222a; --lts-v5-color-border: #242c36; --lts-v5-color-border-soft: #1f2731; --lts-v5-color-border-strong: #2d3742; --lts-v5-color-border-hover: #3d4a58; --lts-v5-color-border-raised: #33404e; --lts-v5-color-border-interactive: #60707f; --lts-v5-color-ink: #eef2f6; --lts-v5-color-ink-2: #cbd6e0; --lts-v5-color-muted: #9fb0c0; --lts-v5-color-muted-2: #8e9aa6; --lts-v5-color-faint: #6e808f; --lts-v5-color-faintest: #55636f; --lts-v5-color-accent: #2f6df6; --lts-v5-color-accent-hover: #4a82ff; --lts-v5-color-accent-active: #2757c9; --lts-v5-color-accent-2: #4f9cf7; --lts-v5-color-link: #6f9bff; --lts-v5-color-link-hover: #a8c3ff; --lts-v5-color-accent-wash: #121c28; --lts-v5-color-accent-wash-border: #23384f; --lts-v5-color-accent-tint: #182641; --lts-v5-color-purple: #7c6bd6; --lts-v5-color-focus-ring: #88a4ff; --lts-v5-color-danger: #ec3013; --lts-v5-color-danger-ink: #ff9d86; --lts-v5-color-danger-wash: #2a1611; --lts-v5-color-danger-border: #4a2622; --lts-v5-color-danger-emphasis: #c9333d; --lts-v5-color-ok: #22a06b; --lts-v5-color-ok-ink: #3fb984; --lts-v5-color-ok-wash: #10201a; --lts-v5-color-ok-border: #1e3d2e; --lts-v5-color-warn: #d8a13a; --lts-v5-color-warn-wash: #211a10; --lts-v5-color-warn-border: #4a3a1e; --lts-v5-color-warn-ink: #d9c9a8; --lts-v5-color-row-hover: #1a2029; --lts-v5-color-menu-hover: #222a34; --lts-v5-font-family: "LTS Archivo V5", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lts-v5-text-caption: 10px; --lts-v5-text-label: 11px; --lts-v5-text-small: 12px; --lts-v5-text-body: 13px; --lts-v5-text-strong: 14px; --lts-v5-text-sub: 15px; --lts-v5-text-section: 16px; --lts-v5-text-dialog: 17px; --lts-v5-text-h2: 19px; --lts-v5-text-h1: 22px; --lts-v5-text-h1-record: 24px; --lts-v5-text-figure: 26px; --lts-v5-text-figure-lg: 44px; --lts-v5-weight-body: 400; --lts-v5-weight-medium: 600; --lts-v5-weight-bold: 700; --lts-v5-line-body: 1.45; --lts-v5-line-title: 1.2; --lts-v5-tracking-title: -0.015em; --lts-v5-tracking-figure: -0.02em; --lts-v5-tracking-eyebrow: 0.14em; --lts-v5-tracking-label: 0.12em; --lts-v5-tracking-page-eyebrow: 0.08em; --lts-v5-tracking-kicker: 0.18em; --lts-v5-radius-panel: 10px; --lts-v5-radius-control: 8px; --lts-v5-radius-chip: 6px; --lts-v5-radius-pill: 999px; --lts-v5-space-1: 4px; --lts-v5-space-2: 6px; --lts-v5-space-3: 10px; --lts-v5-space-4: 14px; --lts-v5-space-5: 16px; --lts-v5-space-6: 18px; --lts-v5-space-7: 22px; --lts-v5-space-8: 24px; --lts-v5-control-h: 34px; --lts-v5-control-h-lg: 36px; --lts-v5-action-h: 40px; --lts-v5-grid-cols: 6; --lts-v5-grid-row-h: 132px; --lts-v5-grid-gap: 18px; --lts-v5-grid-cols-mobile: 2; --lts-v5-grid-row-h-mobile: 92px; --lts-v5-grid-gap-mobile: 10px; --lts-v5-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --lts-v5-dur-fast: 150ms; --lts-v5-dur: 220ms; --lts-v5-dur-slow: 320ms; --lts-v3-utility-circle: 36px; --lts-v3-utility-circle-touch: 40px; --lts-v3-hit-target: 44px; --lts-v3-hit-target-touch: 48px; --lts-v3-focus-ring-width: 3px; --lts-v3-focus-ring-offset: 2px; --lts-v3-sidebar-expanded: 224px; --lts-v3-sidebar-collapsed: 72px; --lts-v3-topbar: 64px; --lts-v3-topbar-tablet: 56px; --lts-v3-topbar-warehouse: 54px; --lts-v3-gutter: 24px; --lts-v3-gutter-desktop: 24px; --lts-v3-gutter-laptop: 20px; --lts-v3-gutter-tablet: 20px; --lts-v3-gutter-warehouse: 12px; --lts-v3-gutter-phone: 14px; --lts-v3-radius-panel: 12px; --lts-v3-radius-control: 9px; --lts-v3-radius-chip: 999px; --lts-color-brand-primary: #1B5FAE; --lts-color-brand-primary-foreground: #FFFFFF; --lts-color-brand-accent: #006BD6; --lts-color-brand-accent-foreground: #FFFFFF; --lts-color-brand-primary-hover: #164E90; --lts-color-brand-tint: #EEF4FC; } @media (forced-colors: active) { :root { --lts-v3-color-canvas: Canvas; --lts-v3-color-card: Canvas; --lts-v3-color-card-tile: Canvas; --lts-v3-color-card-border: CanvasText; --lts-v3-color-surface1: Canvas; --lts-v3-color-surface2: Canvas; --lts-v3-color-raised: Canvas; --lts-v3-color-navigation: Canvas; --lts-v3-color-text-primary: CanvasText; --lts-v3-color-text-secondary: CanvasText; --lts-v3-color-text-muted: CanvasText; --lts-v3-color-border: CanvasText; --lts-v3-color-border-strong: CanvasText; --lts-v5-color-bg: Canvas; --lts-v5-color-well: Canvas; --lts-v5-color-chrome: Canvas; --lts-v5-color-panel: Canvas; --lts-v5-color-nested: Canvas; --lts-v5-color-control: Canvas; --lts-v5-color-border: CanvasText; --lts-v5-color-border-soft: CanvasText; --lts-v5-color-border-strong: CanvasText; --lts-v5-color-border-hover: CanvasText; --lts-v5-color-border-raised: CanvasText; --lts-v5-color-border-interactive: CanvasText; --lts-v5-color-ink: CanvasText; --lts-v5-color-ink-2: CanvasText; --lts-v5-color-muted: CanvasText; --lts-v5-color-muted-2: CanvasText; --lts-v5-color-faint: CanvasText; --lts-v5-color-faintest: GrayText; --lts-v5-color-accent-wash: Canvas; --lts-v5-color-accent-wash-border: CanvasText; --lts-v5-color-danger-wash: Canvas; --lts-v5-color-ok-wash: Canvas; --lts-v5-color-warn-wash: Canvas; } } .lts-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Spinner (loading-skeleton / async-action-pending indicator) ---- */ @keyframes lts-spin { to { transform: rotate(360deg); } } .lts-spinner { display: inline-block; width: 1em; height: 1em; border-radius: var(--lts-radius-full); border: 2px solid var(--lts-color-border-decorative); border-top-color: var(--lts-color-brand-primary); animation: lts-spin var(--lts-motion-duration-slow) linear infinite; } @media (prefers-reduced-motion: reduce) { .lts-spinner { animation: none; /* A static half-filled ring still communicates "in progress" without motion. */ border-top-color: var(--lts-color-border-decorative); border-right-color: var(--lts-color-brand-primary); } } /* ---- Skeleton (loading-skeleton placeholder) ---- */ @keyframes lts-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .lts-skeleton { display: block; /* A placeholder previews the SHAPE of content that has not arrived; it must never be the reason the page scrolls sideways. Callers pass a fixed width ("24rem") on purpose, and that is right at a wide viewport - but at 402 CSS pixels a 24rem placeholder inside the standard 24px page padding puts its right edge at 408 against a 402px client width, which is a MEASURED 6px of document overflow, on twenty screens. See docs/workplans/evidence/ui-revision-3/SKELETON-OVERFLOW.md. max-width rather than a narrower width at each call site: Skeleton.tsx sets width INLINE, and max-width is a DIFFERENT property, so there is no cascade contest to lose - the inline width still wins for width, and CSS clamps the used width to this maximum whatever the source. That makes the invariant hold for every skeleton in the app at once, including ones not yet written, instead of once per call site. box-sizing makes the clamp a real guarantee rather than one contingent on nobody adding padding through this component's className prop. */ box-sizing: border-box; max-width: 100%; background-color: var(--lts-color-neutral-200); border-radius: var(--lts-radius-control); animation: lts-skeleton-pulse var(--lts-motion-duration-slow) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .lts-skeleton { animation: none; } } /* ---- Button ---- */ .lts-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--lts-space-xs); min-width: var(--lts-touch-target-min-width); min-height: var(--lts-touch-target-min-height); padding: var(--lts-space-xs) var(--lts-space-md); border-radius: var(--lts-radius-control); border: var(--lts-border-width) var(--lts-border-style) transparent; font-family: var(--lts-font-family-sans); font-size: var(--lts-font-size-md); font-weight: var(--lts-font-weight-semibold); line-height: var(--lts-line-height-md); cursor: pointer; /* LIFT-BACKLOG item 8. A `

Sign in