/* Alpha Values - Generated from */ /* DO NOT EDIT THIS FILE DIRECTLY - Run: npm run build:tokens */ :root { /* === BLACK ALPHA === */ --black-alpha-02: rgb(0 0 0 / 2%); --black-alpha-05: rgb(0 0 0 / 5%); --black-alpha-06: rgb(0 0 0 / 6%); --black-alpha-07: rgb(0 0 0 / 7%); --black-alpha-08: rgb(0 0 0 / 8%); --black-alpha-10: rgb(0 0 0 / 10%); --black-alpha-12: rgb(0 0 0 / 12%); --black-alpha-15: rgb(0 0 0 / 15%); --black-alpha-18: rgb(0 0 0 / 18%); --black-alpha-20: rgb(0 0 0 / 20%); --black-alpha-25: rgb(0 0 0 / 25%); --black-alpha-30: rgb(0 0 0 / 30%); --black-alpha-40: rgb(0 0 0 / 40%); --black-alpha-60: rgb(0 0 0 / 60%); --black-alpha-65: rgb(0 0 0 / 65%); --black-alpha-80: rgb(0 0 0 / 80%); /* === WHITE ALPHA === */ --white-alpha-04: rgb(255 255 255 / 4%); --white-alpha-08: rgb(255 255 255 / 8%); --white-alpha-10: rgb(255 255 255 / 10%); --white-alpha-12: rgb(255 255 255 / 12%); --white-alpha-15: rgb(255 255 255 / 15%); --white-alpha-18: rgb(255 255 255 / 18%); --white-alpha-20: rgb(255 255 255 / 20%); --white-alpha-22: rgb(255 255 255 / 22%); --white-alpha-25: rgb(255 255 255 / 25%); --white-alpha-30: rgb(255 255 255 / 30%); --white-alpha-35: rgb(255 255 255 / 35%); --white-alpha-40: rgb(255 255 255 / 40%); --white-alpha-45: rgb(255 255 255 / 45%); --white-alpha-50: rgb(255 255 255 / 50%); --white-alpha-55: rgb(255 255 255 / 55%); --white-alpha-60: rgb(255 255 255 / 60%); --white-alpha-70: rgb(255 255 255 / 70%); --white-alpha-80: rgb(255 255 255 / 80%); --white-alpha-86: rgb(255 255 255 / 86%); --white-alpha-90: rgb(255 255 255 / 90%); --white-alpha-92: rgb(255 255 255 / 92%); --white-alpha-95: rgb(255 255 255 / 95%); /* === TEAL ALPHA === */ --teal-300-alpha-08: rgb(160 199 201 / 8%); --teal-300-alpha-12: rgb(160 199 201 / 12%); --teal-300-alpha-16: rgb(160 199 201 / 16%); --teal-300-alpha-24: rgb(160 199 201 / 24%); --teal-300-alpha-26: rgb(160 199 201 / 26%); --teal-300-alpha-36: rgb(160 199 201 / 36%); --teal-300-alpha-65: rgb(160 199 201 / 65%); --teal-300-alpha-80: rgb(160 199 201 / 80%); --teal-400-alpha-05: rgb(138 183 186 / 5%); --teal-400-alpha-08: rgb(138 183 186 / 8%); --teal-400-alpha-10: rgb(138 183 186 / 10%); --teal-400-alpha-12: rgb(138 183 186 / 12%); --teal-400-alpha-15: rgb(138 183 186 / 15%); --teal-400-alpha-18: rgb(138 183 186 / 18%); --teal-400-alpha-20: rgb(138 183 186 / 20%); --teal-400-alpha-25: rgb(138 183 186 / 25%); --teal-400-alpha-30: rgb(138 183 186 / 30%); --teal-400-alpha-40: rgb(138 183 186 / 40%); --teal-400-alpha-45: rgb(138 183 186 / 45%); --teal-400-alpha-60: rgb(138 183 186 / 60%); --teal-400-alpha-95: rgb(138 183 186 / 95%); --teal-500-alpha-04: rgb(111 169 172 / 4%); --teal-500-alpha-05: rgb(111 169 172 / 5%); --teal-500-alpha-08: rgb(111 169 172 / 8%); --teal-500-alpha-10: rgb(111 169 172 / 10%); --teal-500-alpha-12: rgb(111 169 172 / 12%); --teal-500-alpha-14: rgb(111 169 172 / 14%); --teal-500-alpha-16: rgb(111 169 172 / 16%); --teal-500-alpha-18: rgb(111 169 172 / 18%); --teal-500-alpha-20: rgb(111 169 172 / 20%); --teal-500-alpha-22: rgb(111 169 172 / 22%); --teal-500-alpha-24: rgb(111 169 172 / 24%); --teal-500-alpha-26: rgb(111 169 172 / 26%); --teal-500-alpha-30: rgb(111 169 172 / 30%); --teal-500-alpha-36: rgb(111 169 172 / 36%); --teal-500-alpha-40: rgb(111 169 172 / 40%); --teal-500-alpha-50: rgb(111 169 172 / 50%); --teal-500-alpha-55: rgb(111 169 172 / 55%); --teal-500-alpha-65: rgb(111 169 172 / 65%); --teal-500-alpha-70: rgb(111 169 172 / 70%); --teal-500-alpha-80: rgb(111 169 172 / 80%); --teal-600-alpha-05: rgb(94 159 163 / 5%); --teal-600-alpha-08: rgb(94 159 163 / 8%); --teal-600-alpha-10: rgb(94 159 163 / 10%); --teal-600-alpha-12: rgb(94 159 163 / 12%); --teal-600-alpha-15: rgb(94 159 163 / 15%); --teal-600-alpha-16: rgb(94 159 163 / 16%); --teal-600-alpha-18: rgb(94 159 163 / 18%); --teal-600-alpha-20: rgb(94 159 163 / 20%); --teal-600-alpha-22: rgb(94 159 163 / 22%); --teal-600-alpha-24: rgb(94 159 163 / 24%); --teal-600-alpha-30: rgb(94 159 163 / 30%); --teal-600-alpha-36: rgb(94 159 163 / 36%); --teal-600-alpha-40: rgb(94 159 163 / 40%); --teal-600-alpha-45: rgb(94 159 163 / 45%); --teal-600-alpha-60: rgb(94 159 163 / 60%); --teal-600-alpha-65: rgb(94 159 163 / 65%); --teal-600-alpha-70: rgb(94 159 163 / 70%); --teal-600-alpha-80: rgb(94 159 163 / 80%); --teal-700-alpha-08: rgb(60 123 127 / 8%); --teal-700-alpha-10: rgb(60 123 127 / 10%); --teal-700-alpha-12: rgb(60 123 127 / 12%); --teal-700-alpha-16: rgb(60 123 127 / 16%); --teal-700-alpha-18: rgb(60 123 127 / 18%); --teal-700-alpha-20: rgb(60 123 127 / 20%); --teal-700-alpha-22: rgb(60 123 127 / 22%); --teal-700-alpha-30: rgb(60 123 127 / 30%); --teal-700-alpha-40: rgb(60 123 127 / 40%); --teal-700-alpha-50: rgb(60 123 127 / 50%); --teal-700-alpha-65: rgb(60 123 127 / 65%); --teal-700-alpha-70: rgb(60 123 127 / 70%); --teal-700-alpha-80: rgb(60 123 127 / 80%); /* === SLATE ALPHA === */ --slate-300-alpha-12: rgb(150 168 179 / 12%); --slate-300-alpha-15: rgb(150 168 179 / 15%); --slate-300-alpha-20: rgb(150 168 179 / 20%); --slate-500-alpha-12: rgb(90 107 117 / 12%); --slate-500-alpha-15: rgb(90 107 117 / 15%); --slate-500-alpha-20: rgb(90 107 117 / 20%); --slate-600-alpha-08: rgb(76 95 105 / 8%); --slate-600-alpha-10: rgb(76 95 105 / 10%); --slate-600-alpha-12: rgb(76 95 105 / 12%); --slate-600-alpha-15: rgb(76 95 105 / 15%); --slate-600-alpha-20: rgb(76 95 105 / 20%); --slate-600-alpha-30: rgb(76 95 105 / 30%); --slate-600-alpha-40: rgb(76 95 105 / 40%); --slate-600-alpha-70: rgb(76 95 105 / 70%); --slate-800-alpha-40: rgb(45 56 67 / 40%); --slate-800-alpha-70: rgb(45 56 67 / 70%); --slate-850-alpha-92: rgb(35 46 56 / 92%); --slate-900-alpha-95: rgb(30 42 58 / 95%); --slate-950-alpha-98: rgb(21 30 40 / 98%); /* === RED ALPHA === */ --red-500-alpha-05: rgb(200 90 84 / 5%); --red-500-alpha-10: rgb(200 90 84 / 10%); --red-500-alpha-14: rgb(200 90 84 / 14%); --red-500-alpha-40: rgb(200 90 84 / 40%); --red-600-alpha-05: rgb(177 79 74 / 5%); --red-600-alpha-10: rgb(177 79 74 / 10%); --red-600-alpha-14: rgb(177 79 74 / 14%); --red-600-alpha-40: rgb(177 79 74 / 40%); /* === SUNSET ALPHA === */ --sunset-600-alpha-10: rgb(185 130 94 / 10%); --sunset-600-alpha-14: rgb(185 130 94 / 14%); --sunset-600-alpha-70: rgb(185 130 94 / 70%); --sunset-700-alpha-10: rgb(142 98 61 / 10%); --sunset-700-alpha-14: rgb(142 98 61 / 14%); --sunset-700-alpha-70: rgb(142 98 61 / 70%); /* === INDIGO ALPHA === */ --indigo-500-alpha-10: rgb(99 110 241 / 10%); --indigo-500-alpha-30: rgb(99 110 241 / 30%); /* === VIOLET ALPHA === */ --violet-500-alpha-10: rgb(139 92 246 / 10%); /* === BRAND-TEAL ALPHA === */ --brand-teal-400-alpha-60: rgb(138 183 186 / 60%); --brand-teal-400-alpha-80: rgb(138 183 186 / 80%); /* === MARKETING OVERLAY ALPHA === */ --mkt-overlay-warm-alpha-55: rgb(44 24 25 / 55%); --mkt-overlay-cool-alpha-55: rgb(16 60 70 / 55%); /* === OPACITY VALUES === */ --opacity-0: 0; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-100: 1; } :root { /* Blur primitives */ --blur-1: blur(1px); --blur-2: blur(2px); --blur-4: blur(4px); --blur-8: blur(8px); --blur-10: blur(10px); --blur-12: blur(12px); --blur-16: blur(16px); /* Saturation filter primitives */ --saturate-96: saturate(0.96); --saturate-100: saturate(1); --saturate-110: saturate(1.10); --saturate-115: saturate(1.15); --saturate-120: saturate(1.20); --saturate-130: saturate(1.30); --saturate-135: saturate(1.35); --saturate-160: saturate(1.60); /* Ring geometry scale (spread radii; fixed at 0) */ --ring-spread-thin: 1px; --ring-spread-standard: 2px; --ring-spread-thick: 3px; --input-border-ring-1px: 0 0 0 var(--ring-spread-thin); --input-border-ring-2px: 0 0 0 var(--ring-spread-standard); --input-border-ring-3px: 0 0 0 var(--ring-spread-thick); /* Shadow offset primitives */ --shadow-offset-0: 0; --shadow-offset-1: 1px; --shadow-offset-2: 2px; --shadow-offset-3: 3px; --shadow-offset-4: 4px; /* Bevel geometry (no color) */ --bevel-inset-geometry: inset 0 1px 0; --bevel-pressed-geometry: inset 0 1px 2px; /* === GRADIENT PARAMETERS === */ /* Angles */ --gradient-angle-vertical: 180deg; --gradient-angle-diagonal: 135deg; /* Stop positions */ --gradient-stop-start: 0%; --gradient-stop-near: 20%; --gradient-stop-mid: 40%; --gradient-stop-mid-alt: 45%; --gradient-stop-center: 50%; --gradient-stop-fade-near: 55%; --gradient-stop-fade-far: 60%; --gradient-stop-far: 80%; --gradient-stop-end: 100%; /* Radial gradient sizes (ellipse width height) */ --radial-size-dense: 120% 120%; --radial-size-wide: 120% 180%; --radial-size-tall: 140% 90%; --radial-size-narrow: 120% 70%; /* Radial gradient positions */ --radial-position-center-top: 50% 0%; --radial-position-center-bottom: 50% 115%; --radial-position-top-left: 0% 0%; --radial-position-near-left: 6% 0%; /* === OVERLAY POSITIONING === */ --sheen-height-subtle: 30%; --sheen-height-strong: 32%; --sheen-inset: 1px; --radial-glow-inset-top: 20%; --radial-glow-inset-bottom: 26%; --radial-glow-inset-left: 22%; --radial-glow-inset-right: 22%; /* === BUTTON & BEVEL EFFECTS (geometry only here) === */ /* Border rings (outline around button) */ } /* Border Values - FACTS (widths and radii) */ :root { /* ======================================================================== BORDER WIDTH BASE VALUES - Raw pixel measurements ======================================================================== */ --bw-0: 0; --bw-1: 1px; --bw-2: 2px; --bw-3: 3px; --input-border-width-1: 1px; --input-border-width-2: 2px; --input-border-width-3: 3px; --input-border-width-4: 4px; --input-border-width-5: 5px; --input-border-width-6: 6px; /* ======================================================================== BORDER RADIUS SCALE - Corner curvature measurements ======================================================================== */ --radius-none: 0; --radius-xs: 0.125rem; /* 2px */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* Aspect ratio padding percentages for embed utilities */ --aspect-16x9: 56.25%; --aspect-4x3: 75%; --aspect-1x1: 100%; /* ======================================================================== OUTLINE PROPERTIES - Focus rings and accessibility indicators ======================================================================== */ /* Outline widths - thickness of focus rings */ --outline-width-thin: 1px; --outline-width-normal: 2px; --outline-width-thick: 3px; /* Outline offsets - gap between element and focus ring */ --outline-offset-sm: 1px; --outline-offset-md: 2px; --outline-offset-lg: 3px; /* ======================================================================== INSET BORDER RINGS - Inner glow/ring effects ======================================================================== */ --inset-1px: inset 0 0 0 1px; --inset-2px: inset 0 0 0 2px; --inset-3px: inset 0 0 0 3px; } /* High-DPI hairline refinement: crisper borders on retina displays */ @media (min-resolution: 1.5dppx) { :root { --bw-hairline: 0.5px; } } /* ============================================================================ MEDIA QUERY BREAKPOINT VALUES Used in @media queries for responsive layouts ============================================================================ */ :root { /* Semantic viewport width breakpoints (mobile-first) */ --viewport-phone: 640px; /* Small phones and up */ --viewport-ipad-mini: 744px; /* iPad Mini and up */ --viewport-tablet: 768px; /* Tablets and up */ --viewport-laptop: 1024px; /* Laptops and up */ --viewport-desktop: 1280px; /* Desktop monitors */ --viewport-large: 1536px; /* Large desktop monitors */ --viewport-wide: 1920px; /* Widescreen / external monitors */ } /* Keep viewport tokens here as canonical breakpoint values. * Native CSS media queries should use explicit literal breakpoints. */ /* Color Values - Generated from */ /* DO NOT EDIT THIS FILE DIRECTLY - Run: npm run build:tokens */ :root { /* === TEAL === */ --teal-50: #E9F4F5; --teal-200: #B7D4D6; --teal-300: #A0C7C9; --teal-400: #8AB7BA; --teal-500: #6FA9AC; --teal-600: #5E9FA3; --teal-700: #3C7B7F; /* === SLATE === */ --slate-200: #B4C0C8; --slate-300: #96A8B3; --slate-400: #7E8E97; --slate-500: #5A6B75; --slate-600: #4C5F69; --slate-700: #3A4A56; --slate-800: #2D3843; --slate-850: #232E38; --slate-900: #1E2A3A; --slate-950: #151E28; /* === TEAL-SLATE === */ --teal-slate-50: #E8F2F3; --teal-slate-100: #D0E5E7; --teal-slate-200: #B5CECF; --teal-slate-300: #9BB8BA; --teal-slate-400: #82A3A6; --teal-slate-500: #648A8E; --teal-slate-600: #557578; --teal-slate-700: #3B5C5F; --teal-slate-800: #294448; --teal-slate-900: #1A3233; --teal-slate-950: #0E2129; /* === NEUTRAL === */ --neutral-white: #FFFFFF; --neutral-black: #000000; --neutral-gray-200: #E8EBEC; --neutral-gray-300: #D1D6D7; /* === COOL-GRAY === */ --cool-gray-100: #EEF2F4; --cool-gray-200: #EEF3F7; --cool-gray-300: #E4EAED; /* === COOL-WHITE === */ --cool-white-50: #F3F7F7; --cool-white-100: #F8FAFB; --cool-white-200: #F7F9FB; --cool-white-300: #F5F9F9; --cool-white-400: #FCFDFD; /* === TINT === */ --tint-hover: #F6F9FB; --tint-active: #EEF2F6; /* === SUNSET === */ --sunset-50: #FFFDF5; --sunset-100: #F9F4EC; --sunset-200: #F3E2D5; --sunset-500: #D1996F; --sunset-600: #B9825E; --sunset-700: #8E623D; --sunset-900: #3D2A1F; /* === AMBER === */ --amber-25: #fffdf5; --amber-50: #fff8e6; --amber-200: #E7C8A8; --amber-300: #f5c842; --amber-700: #A67250; --amber-dark-25: #1f1900; --amber-dark-50: #2a2200; --amber-dark-300: #c9a000; /* === RED === */ --red-50: #F5E6E5; --red-200: #E2B1AE; --red-400: #DB7670; --red-500: #C85A54; --red-600: #B14F4A; --red-700: #8B3D39; --red-900: #2D1412; /* === GRAY-BLUE === */ --gray-blue-50: #E7ECF0; --gray-blue-300: #B8C3C9; /* === CHARCOAL === */ --charcoal-600: #2A343D; --charcoal-700: #1F262D; --charcoal-800: #171D22; --charcoal-900: #12171B; /* === RAINBOW-BRIGHT === */ --rainbow-bright-red: #ff0000; --rainbow-bright-orange: #ff8000; --rainbow-bright-yellow: #ffff00; --rainbow-bright-green: #00ff00; --rainbow-bright-blue: #0080ff; --rainbow-bright-purple: #8000ff; /* === RAINBOW-LIGHT === */ --rainbow-light-red: #ff6666; --rainbow-light-orange: #ffaa66; --rainbow-light-yellow: #ffff99; --rainbow-light-green: #66ff66; --rainbow-light-blue: #66b3ff; --rainbow-light-purple: #b366ff; /* === INDIGO === */ --indigo-500: #636EF1; /* === VIOLET === */ --violet-500: #8B5CF6; /* === BRAND-TEAL === */ --brand-teal-400: #8AB7BA; /* === MKT-OVERLAY === */ --mkt-overlay-warm: #2C1819; --mkt-overlay-cool: #103C46; } /* ========================================================================== GRID LAYOUT VALUES Raw grid template geometry used by semantic grid tokens ========================================================================== */ :root { /* Basic fractional column templates */ --grid-template-1fr: 1fr; --grid-template-2fr: repeat(2, 1fr); --grid-template-3fr: repeat(3, 1fr); --grid-template-4fr: repeat(4, 1fr); --grid-template-12fr: repeat(12, minmax(0, 1fr)); /* Dashboard tile layouts */ --grid-template-dashboard-tiles-tablet-fr: repeat(2, minmax(0, 1fr)); --grid-template-dashboard-tiles-desktop-fr: repeat(3, minmax(0, 1fr)); --grid-template-dashboard-tiles-wide-fr: repeat(4, minmax(0, 1fr)); --grid-dashboard-tile-min-height: 216px; /* Calendar layouts */ --grid-template-calendar-month-fr: repeat(7, 1fr); --grid-auto-rows-calendar-month-fr: minmax(var(--size-100pct), 1fr); --grid-template-calendar-week-fr: var(--size-80) repeat(7, minmax(0, 1fr)); --grid-template-rows-calendar-week-fr: auto 1fr; --grid-template-calendar-day-fr: var(--size-80) minmax(0, 1fr); --grid-template-rows-calendar-day-fr: auto 1fr; /* Full-span helpers */ --grid-span-full-start-raw: 1; --grid-span-full-end-raw: -1; } /* ========================================================================== LAYOUT VALUES — Alignment and positioning keywords ========================================================================== */ :root { /* Alignment values (works for text-align, align-items, justify-content) */ --align-start: start; --align-end: end; --align-center: center; --align-left: left; --align-right: right; --align-justify: justify; /* Flexbox-specific alignment */ --align-flex-start: flex-start; --align-flex-end: flex-end; --align-stretch: stretch; --align-baseline: baseline; /* Justify content values */ --justify-start: flex-start; --justify-end: flex-end; --justify-center: center; --justify-between: space-between; --justify-around: space-around; --justify-evenly: space-evenly; /* Accessibility geometry */ --clip-visually-hidden-geometry: inset(50%); } /* ========================================================================== MOTION VALUES ========================================================================== Animation timing, easing, transforms, and keyframe definitions ========================================================================== */ :root { /* Core timing scale */ --duration-instant: 80ms; --duration-quick: 120ms; --duration-standard: 200ms; --duration-deliberate: 300ms; --duration-slower: 0.5s; --duration-skeleton: 1.5s; /* Easing functions */ --motion-easing-standard: cubic-bezier(.22,.61,.36,1); --motion-easing-out: cubic-bezier(0.4, 0, 1, 1); --motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); --motion-easing-linear: linear; /* Transform scale multipliers */ --scale-multiplier-80: 0.8; --scale-90: 0.9; --scale-multiplier-90: 0.9; --scale-multiplier-95: 0.95; --scale-95: 0.95; --scale-multiplier-98: 0.98; --scale-multiplier-100: 1; --scale-100: 1; --scale-multiplier-102: 1.02; --scale-multiplier-105: 1.05; --scale-105: 1.05; --scale-multiplier-108: 1.08; --scale-multiplier-110: 1.1; --scale-110: 1.1; --scale-multiplier-125: 1.25; --scale-125: 1.25; /* Transform lift values (upward motion on hover) */ --lift-sm: -1px; --lift-md: -2px; --lift-lg: -4px; /* Vertical slide distances */ --slide-y-sm: 10px; --slide-y-md: 12px; /* Transition aliases for compat layer */ --transition-duration-base: 0.2s; --transition-timing-ease: ease-in-out; /* Transition presets (set-and-forget) */ --transition-bg: background 0.15s ease; --transition-shadow: box-shadow 0.15s ease; --transition-bg-shadow: background 0.15s ease, box-shadow 0.15s ease; --transition-colors: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; --transition-opacity: opacity 0.2s ease; --transition-transform: transform 0.2s cubic-bezier(.22,.61,.36,1); --transition-all-fast: all 0.15s ease; --transition-all-smooth: all 0.2s cubic-bezier(.22,.61,.36,1); /* Animation values */ --rotate-0: 0deg; --rotate-90: 90deg; --rotate-180: 180deg; --rotate-270: 270deg; --rotate-360: 360deg; /* Fine-grained stagger steps for table row entrances */ --animation-delay-step-0: 0ms; --animation-delay-step-1: 10ms; --animation-delay-step-2: 20ms; --animation-delay-step-3: 30ms; --animation-delay-step-4: 40ms; --animation-delay-step-5: 50ms; --animation-delay-step-6: 60ms; --animation-delay-step-7: 70ms; --animation-delay-step-8: 80ms; --animation-delay-step-9: 90ms; /* Save indicator stroke geometry */ --save-indicator-stroke-dasharray-geometry: 60; --save-indicator-stroke-dashoffset-geometry: 45; /* Geometry for loaders */ --bird-transform-origin-geometry: 60% 70%; /* Logo sheen tokens */ --logo-sheen-duration: 1.4s; --logo-sheen-easing: var(--motion-easing-in-out); --logo-sheen-iteration-count: 1; /* Convenience shorthand for animation */ --logo-sheen-animation: sheenSweep var(--logo-sheen-duration) var(--logo-sheen-easing) var(--logo-sheen-iteration-count); --logo-sheen-reverse-animation: sheenSweepReverse var(--logo-sheen-duration) var(--logo-sheen-easing) var(--logo-sheen-iteration-count); /* Bird hover tokens */ --bird-wiggle-duration: 700ms; --bird-glow-duration: 900ms; --bird-scale-duration: 700ms; --bird-hover-easing: var(--motion-easing-in-out); --bird-glow-color: rgba(0, 200, 210, 0.55); --bird-wiggle-animation: birdWiggle var(--bird-wiggle-duration) var(--bird-hover-easing) 1; --bird-glow-animation: birdGlowPulse var(--bird-glow-duration) var(--bird-hover-easing) 1; --bird-scale-animation: birdScalePulse var(--bird-scale-duration) var(--bird-hover-easing) 1; /* Longer + smoother easing for header bird run */ --bird-run-animation: birdRunAcrossAndBack 6500ms var(--motion-easing-in-out) 1; } /* ========================================================================== KEYFRAME ANIMATIONS (raw animation definitions) ========================================================================== */ @keyframes pulse { 0%, 100% { opacity: var(--opacity-visible); transform: scale(var(--scale-1-00x)); } 50% { opacity: var(--opacity-subtle); transform: scale(var(--scale-up-1-05x)); } } @keyframes slideInFromTop { from { opacity: var(--opacity-hidden); transform: translateY(-100%); } to { opacity: var(--opacity-visible); transform: translateY(0); } } @keyframes luxeEntrance { from { opacity: var(--opacity-hidden); transform: translateY(var(--slide-distance-md)) scale(var(--scale-down-0-95x)); filter: saturate(0.96); } to { opacity: var(--opacity-visible); transform: translateY(0) scale(var(--scale-1-00x)); filter: saturate(1); } } @keyframes accordionSlideDown { from { height: 0; opacity: var(--opacity-hidden); transform: translateY(calc(var(--slide-distance-sm) * -1)); } to { height: var(--radix-accordion-content-height); opacity: var(--opacity-visible); transform: translateY(0); } } @keyframes accordionSlideUp { from { height: var(--radix-accordion-content-height); opacity: var(--opacity-visible); transform: translateY(0); } to { height: 0; opacity: var(--opacity-hidden); transform: translateY(calc(var(--slide-distance-sm) * -1)); } } /* Subtle diagonal sheen sweep for logo button overlay */ @keyframes sheenSweep { 0% { background-position: -160% 0; opacity: 0.8; } 50% { background-position: 0% 0; opacity: 1; } 100% { background-position: 160% 0; opacity: 0.9; } } /* Reverse direction sheen for text elements */ @keyframes sheenSweepReverse { 0% { background-position: 160% 0; opacity: 0.9; } 50% { background-position: 0% 0; opacity: 1; } 100% { background-position: -160% 0; opacity: 0.8; } } /* Gentle wiggle rotation for the bird icon */ @keyframes birdWiggle { 0% { transform: rotate(0deg) translateZ(0); } 20% { transform: rotate(2deg); } 45% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } } /* Soft glow pulse using drop-shadow filter */ @keyframes birdGlowPulse { 0% { filter: drop-shadow(0 0 0 transparent); } 40% { filter: drop-shadow(0 0 8px var(--bird-glow-color)); } 70% { filter: drop-shadow(0 0 12px var(--bird-glow-color)); } 100% { filter: drop-shadow(0 0 0 transparent); } } /* Scale pulse combined with a tiny lift */ @keyframes birdScalePulse { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(var(--lift-sm)) scale(1.12); } 65% { transform: translateY(0) scale(0.98); } 100% { transform: translateY(0) scale(1); } } /* Playful run across the header */ @keyframes birdRunAcross { 0% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(25vw) rotate(3deg); } 40% { transform: translateX(60vw) rotate(-2deg); } 70% { transform: translateX(100vw) rotate(1deg); } 100% { transform: translateX(140vw) rotate(0deg); } } /* Run across and return back to start - Ultra smooth with 40 keyframes */ @keyframes birdRunAcrossAndBack { /* Even smoother, low-rotation path so the bird glides across and back */ 0% { transform: translateX(0vw) rotate(0deg); } 20% { transform: translateX(30vw) rotate(0.3deg); } 40% { transform: translateX(70vw) rotate(0.6deg); } 50% { transform: translateX(110vw) rotate(0deg); } 60% { transform: translateX(70vw) rotate(-0.4deg); } 80% { transform: translateX(30vw) rotate(-0.2deg); } 100% { transform: translateX(0vw) rotate(0deg); } } @keyframes brandPulse { 0%, 100% { transform: scale(var(--scale-1-00x)); box-shadow: var(--shadow-glow-crisp); } 25% { transform: scale(var(--scale-up-1-08x)); box-shadow: var(--shadow-moderate); } 50% { transform: scale(var(--scale-up-1-05x)) rotate(2deg); box-shadow: var(--shadow-moderate); } 75% { transform: scale(var(--scale-up-1-05x)) rotate(-1deg); box-shadow: var(--shadow-glow-crisp); } } @keyframes brandFlip { 0%, 80%, 100% { opacity: var(--opacity-hidden); transform: scale(var(--scale-down-0-80x)) rotate(-10deg); } 15%, 65% { opacity: var(--opacity-visible); transform: scale(var(--scale-up-1-10x)) rotate(0deg); } 40% { opacity: var(--opacity-visible); transform: scale(var(--scale-up-1-05x)) rotate(3deg); } } @keyframes brandText { 0%, 70%, 100% { opacity: var(--opacity-hidden); transform: translateX(-50%) translateY(var(--slide-distance-sm)); } 15%, 55% { opacity: var(--opacity-subtle); transform: translateX(-50%) translateY(0); } 35% { opacity: var(--opacity-visible); transform: translateX(-50%) translateY(var(--lift-strong)); } } @keyframes slideDown { from { transform: translateY(calc(var(--slide-distance-sm) * -1)); opacity: var(--opacity-hidden); } to { transform: translateY(0); opacity: var(--opacity-visible); } } @keyframes fadeIn { from { opacity: var(--opacity-hidden); } to { opacity: var(--opacity-visible); } } @keyframes scaleIn { from { transform: scale(var(--scale-down-0-95x)); opacity: var(--opacity-hidden); } to { transform: scale(var(--scale-1-00x)); opacity: var(--opacity-visible); } } @keyframes highlightPulse { 0% { opacity: var(--opacity-subtle); } 50% { opacity: var(--opacity-visible); } 100% { opacity: var(--opacity-subtle); } } @keyframes presencePulse { 0%, 100% { opacity: var(--opacity-visible); } 50% { opacity: 0.5; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: var(--opacity-hidden); } to { transform: translateX(0); opacity: var(--opacity-visible); } } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: var(--opacity-hidden); } to { transform: translateX(0); opacity: var(--opacity-visible); } } @keyframes slideInBottom { from { transform: translateY(100%); opacity: var(--opacity-hidden); } to { transform: translateY(0); opacity: var(--opacity-visible); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes typingBlink { 0%, 80%, 100% { opacity: var(--opacity-faint); transform: translateY(0); } 40% { opacity: var(--opacity-visible); transform: translateY(var(--lift-subtle)); } } @keyframes webchatEnter { from { opacity: var(--opacity-hidden); transform: translateY(var(--slide-distance-sm)); } to { opacity: var(--opacity-visible); transform: translateY(0); } } @keyframes tooltipFadeIn { from { opacity: var(--opacity-none); transform: translateY(var(--space-1px)); } to { opacity: var(--opacity-visible); transform: translateY(0); } } @keyframes bounce-in { 0% { transform: scale(var(--mobile-nav-bounce-scale-start)) translateY(var(--mobile-nav-bounce-translate-start)); opacity: var(--opacity-hidden); } 50% { transform: scale(var(--mobile-nav-bounce-scale-mid)) translateY(var(--mobile-nav-bounce-translate-mid)); } 100% { transform: scale(1) translateY(0); } } /* Brand / bird loader keyframes */ @keyframes cobrand-enter { from { opacity: var(--opacity-hidden); transform: translateY(6px) scale(0.98); } to { opacity: var(--opacity-visible); transform: translateY(0) scale(1); } } @keyframes cobrand-exit { to { opacity: var(--opacity-hidden); transform: translateY(-4px) scale(0.99); } } @keyframes bird-bounce { 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: var(--opacity-visible); } 25% { transform: translateY(-4px) scale(1.03) rotate(-2deg); opacity: var(--opacity-visible); } 50% { transform: translateY(-7px) scale(1.06) rotate(-3deg); opacity: var(--opacity-visible); } 75% { transform: translateY(-2px) scale(1.02) rotate(-1deg); opacity: var(--opacity-visible); } } @keyframes bird-wild { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: var(--opacity-visible); } 20% { transform: translate(18px, -10px) scale(1.1) rotate(-6deg); opacity: var(--opacity-visible); } 45% { transform: translate(-22px, -22px) scale(1.14) rotate(-10deg); opacity: var(--opacity-visible); } 70% { transform: translate(12px, -14px) scale(1.08) rotate(-5deg); opacity: var(--opacity-visible); } } @keyframes bird-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: var(--opacity-visible); } 50% { transform: scale(1.03) rotate(-1deg); opacity: var(--opacity-visible); } } @keyframes bird-spin { 0% { transform: rotate(0deg); opacity: var(--opacity-visible); } 100% { transform: rotate(360deg); opacity: var(--opacity-visible); } } @keyframes bird-shadow { 0%, 100% { transform: scaleX(1); opacity: var(--opacity-light); } 50% { transform: scaleX(0.92); opacity: var(--opacity-light); } } @keyframes bird-flight { 0% { transform: translate(8vw, 14vh) rotate(0deg) scale(1.02); } 20% { transform: translate(68vw, 10vh) rotate(8deg) scale(1.06); } 40% { transform: translate(78vw, 68vh) rotate(-6deg) scale(1.00); } 60% { transform: translate(16vw, 76vh) rotate(-10deg) scale(1.05); } 80% { transform: translate(10vw, 36vh) rotate(6deg) scale(1.01); } 100% { transform: translate(8vw, 14vh) rotate(0deg) scale(1.02); } } @keyframes bird-flight-curve { 0% { transform: translate(6vw, 72vh) rotate(-12deg) scale(1.10); } 8% { transform: translate(22vw, 18vh) rotate(6deg) scale(1.02); } 17% { transform: translate(58vw, 10vh) rotate(15deg) scale(1.08); } 27% { transform: translate(86vw, 44vh) rotate(2deg) scale(1.02); } 38% { transform: translate(74vw, 84vh) rotate(-18deg) scale(1.10); } 48% { transform: translate(38vw, 72vh) rotate(-9deg) scale(1.00); } 60% { transform: translate(18vw, 22vh) rotate(12deg) scale(1.06); } 72% { transform: translate(46vw, 8vh) rotate(6deg) scale(1.00); } 84% { transform: translate(88vw, 24vh) rotate(-6deg) scale(1.04); } 100% { transform: translate(6vw, 72vh) rotate(-12deg) scale(1.10); } } @keyframes bird-flight-flipglide { 0% { transform: translate(6vw, 78vh) perspective(900px) rotateY(0deg) rotate(-4deg) scale(1.06); } 10% { transform: translate(24vw, 22vh) perspective(900px) rotateY(140deg) rotate(2deg) scale(1.00); } 22% { transform: translate(60vw, 12vh) perspective(900px) rotateY(180deg) rotate(1deg) scale(1.06); } 34% { transform: translate(88vw, 44vh) perspective(900px) rotateY(220deg) rotate(-2deg) scale(1.10); } 46% { transform: translate(72vw, 84vh) perspective(900px) rotateY(360deg) rotate(-4deg) scale(1.02); } 58% { transform: translate(36vw, 72vh) perspective(900px) rotateY(520deg) rotate(2deg) scale(1.08); } 70% { transform: translate(18vw, 24vh) perspective(900px) rotateY(540deg) rotate(-1deg) scale(1.00); } 82% { transform: translate(46vw, 8vh) perspective(900px) rotateY(700deg) rotate(3deg) scale(1.08); } 100% { transform: translate(6vw, 78vh) perspective(900px) rotateY(720deg) rotate(-4deg) scale(1.06); } } @keyframes sandpiper-orbit { 0% { transform: translate(8%, 52%); } 20% { transform: translate(70%, 22%); } 40% { transform: translate(48%, 10%); } 60% { transform: translate(14%, 24%); } 80% { transform: translate(60%, 62%); } 100% { transform: translate(8%, 52%); } } /* Preview sandbox bird flight (used in fullscreen-bird-preview) */ @keyframes bird-flight-preview { 0% { transform: translate(-40px, 30px) rotate(-10deg) scale(1.05); } 20% { transform: translate(80px, -10px) rotate(6deg) scale(1.1); } 40% { transform: translate(130px, 50px) rotate(-4deg) scale(1.0); } 60% { transform: translate(-20px, 70px) rotate(-12deg) scale(1.12); } 80% { transform: translate(60px, 10px) rotate(8deg) scale(1.08); } 100% { transform: translate(-40px, 30px) rotate(-10deg) scale(1.05); } } /* Typing indicator animation (for ) */ @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } } :root { /* Ring geometry primitives (no offset, no blur) */ --ring-offset-x-none: 0; --ring-offset-y-none: 0; --ring-blur-none: 0; /* Shorthand for a ring shadow with no (spread + color supplied by quality tokens) */ --ring-geometry-none: var(--ring-offset-x-none) var(--ring-offset-y-none) var(--ring-blur-none); } :root { /* Geometry-only shadow scales (no color) */ /* Single-layer depth (offset-x offset-y blur [spread]) */ --shadow-depth-0: none; /* explicit no-shadow depth */ --shadow-depth-1: 0 1px 2px; /* crisp / hairline */ --shadow-depth-2: 0 1px 3px; /* subtle elevation */ --shadow-depth-3: 0 2px 4px; /* soft card depth */ --shadow-depth-4: 0 3px 6px; /* dropdown depth */ --shadow-depth-panel: 0 4px 14px; /* panel / full-page card depth */ /* shadows (negative spread creates internal glow) */ --shadow-emboss-rest: 0 6px 12px -10px; /* subtle embossed depth (rest state) */ --shadow-emboss-hover: 0 8px 18px -10px; /* pronounced embossed depth (hover) */ /* Multi-layer floating shadows (ambient + contact) - geometry only */ --shadow-float-depth-1-ambient: 0 2px 8px; --shadow-float-depth-1-contact: 0 1px 3px; --shadow-float-depth-2-ambient: 0 4px 12px; --shadow-float-depth-2-contact: 0 1px 3px; --shadow-float-depth-3-ambient: 0 12px 40px; --shadow-float-depth-3-contact: 0 4px 12px; --shadow-float-depth-3-hover-ambient: 0 10px 28px; --shadow-float-depth-3-hover-contact: 0 4px 10px; /* Brand glow shadows (geometry only) */ --shadow-glow-depth-1: 0 6px 20px; --shadow-glow-depth-2: 0 8px 18px -10px; --shadow-glow-depth-3: 0 12px 34px; /* Tab-specific outline geometry (no color) */ --shadow-tab-outline-geometry: 0 0 0 1px; } /* ========================================================================== SIZING VALUES — Raw sizing scales only ========================================================================== */ :root { /* Base size scale - numeric values */ --size-0-3: calc(0.3px * var(--ui-scale)); --size-0-5: calc(0.5px * var(--ui-scale)); --size-1: calc(1px * var(--ui-scale)); --size-2: calc(2px * var(--ui-scale)); --size-3: calc(3px * var(--ui-scale)); --size-4: calc(4px * var(--ui-scale)); --size-5: calc(5px * var(--ui-scale)); --size-6: calc(6px * var(--ui-scale)); --size-7: calc(7px * var(--ui-scale)); --size-8: calc(8px * var(--ui-scale)); --size-9: calc(9px * var(--ui-scale)); --size-10: calc(10px * var(--ui-scale)); --size-10-5: calc(10.5px * var(--ui-scale)); --size-11: calc(11px * var(--ui-scale)); --size-12: calc(12px * var(--ui-scale)); --size-13: calc(13px * var(--ui-scale)); --size-14: calc(14px * var(--ui-scale)); --size-15: calc(15px * var(--ui-scale)); --size-16: calc(16px * var(--ui-scale)); --size-17: calc(17px * var(--ui-scale)); --size-18: calc(18px * var(--ui-scale)); --size-20: calc(20px * var(--ui-scale)); --size-21: calc(21px * var(--ui-scale)); --size-22: calc(22px * var(--ui-scale)); --size-24: calc(24px * var(--ui-scale)); --size-26: calc(26px * var(--ui-scale)); --size-28: calc(28px * var(--ui-scale)); --size-30: calc(30px * var(--ui-scale)); --size-32: calc(32px * var(--ui-scale)); --size-35: calc(35px * var(--ui-scale)); --size-36: calc(36px * var(--ui-scale)); --size-40: calc(40px * var(--ui-scale)); --size-44: calc(44px * var(--ui-scale)); --size-46: calc(46px * var(--ui-scale)); --size-48: calc(48px * var(--ui-scale)); --size-52: calc(52px * var(--ui-scale)); --size-56: calc(56px * var(--ui-scale)); --size-60: calc(60px * var(--ui-scale)); --size-62: calc(62px * var(--ui-scale)); --size-64: calc(64px * var(--ui-scale)); --size-70: calc(70px * var(--ui-scale)); --size-72: calc(72px * var(--ui-scale)); --size-80: calc(80px * var(--ui-scale)); --size-96: calc(96px * var(--ui-scale)); --size-100: calc(100px * var(--ui-scale)); --size-120: calc(120px * var(--ui-scale)); --size-140: calc(140px * var(--ui-scale)); --size-160: calc(160px * var(--ui-scale)); --size-180: calc(180px * var(--ui-scale)); --size-200: calc(200px * var(--ui-scale)); --size-240: calc(240px * var(--ui-scale)); --size-280: calc(280px * var(--ui-scale)); --size-300: calc(300px * var(--ui-scale)); --size-320: calc(320px * var(--ui-scale)); --size-340: calc(340px * var(--ui-scale)); --size-360: calc(360px * var(--ui-scale)); --size-380: calc(380px * var(--ui-scale)); --size-400: calc(400px * var(--ui-scale)); --size-420: calc(420px * var(--ui-scale)); --size-440: calc(440px * var(--ui-scale)); --size-480: calc(480px * var(--ui-scale)); --size-500: calc(500px * var(--ui-scale)); --size-600: calc(600px * var(--ui-scale)); --size-680: calc(680px * var(--ui-scale)); --size-720: calc(720px * var(--ui-scale)); --size-760: calc(760px * var(--ui-scale)); --size-900: calc(900px * var(--ui-scale)); --size-999: calc(999px * var(--ui-scale)); --size-9999: calc(9999px * var(--ui-scale)); /* Raw rem sizing primitives (for non-type sizing rules that still use rem) */ --size-rem-0-25: 0.25rem; --size-rem-1-1: 1.1rem; --size-rem-1-25: 1.25rem; --size-rem-1-5: 1.5rem; --size-rem-2: 2rem; --size-rem-12: 12rem; --size-rem-18: 18rem; /* Stroke widths for icons */ --stroke-thin: calc(1.25 * var(--ui-scale)); --stroke-regular: calc(1.5 * var(--ui-scale)); --stroke-medium-plus: calc(1.75 * var(--ui-scale)); --stroke-medium: calc(2 * var(--ui-scale)); --stroke-thick: calc(2.5 * var(--ui-scale)); /* Width scale (px primitives) */ --w-12: calc(12px * var(--ui-scale)); --w-16: calc(16px * var(--ui-scale)); --w-32: calc(32px * var(--ui-scale)); --w-36: calc(36px * var(--ui-scale)); --w-56: calc(56px * var(--ui-scale)); --w-60: calc(60px * var(--ui-scale)); --w-80: calc(80px * var(--ui-scale)); --w-90: calc(90px * var(--ui-scale)); --w-100: calc(100px * var(--ui-scale)); --w-120: calc(120px * var(--ui-scale)); --w-135: calc(135px * var(--ui-scale)); --w-140: calc(140px * var(--ui-scale)); --w-150: calc(150px * var(--ui-scale)); --w-160: calc(160px * var(--ui-scale)); --w-180: calc(180px * var(--ui-scale)); --w-200: calc(200px * var(--ui-scale)); --w-220: calc(220px * var(--ui-scale)); --w-240: calc(240px * var(--ui-scale)); --w-260: calc(260px * var(--ui-scale)); --w-280: calc(280px * var(--ui-scale)); --w-300: calc(300px * var(--ui-scale)); --w-320: calc(320px * var(--ui-scale)); --w-360: calc(360px * var(--ui-scale)); --w-380: calc(380px * var(--ui-scale)); --w-400: calc(400px * var(--ui-scale)); --w-420: calc(420px * var(--ui-scale)); --w-480: calc(480px * var(--ui-scale)); --w-560: calc(560px * var(--ui-scale)); --w-640: calc(640px * var(--ui-scale)); --w-800: calc(800px * var(--ui-scale)); --w-920: calc(920px * var(--ui-scale)); --w-1000: calc(1000px * var(--ui-scale)); --w-1024: calc(1024px * var(--ui-scale)); --w-1200: calc(1200px * var(--ui-scale)); --w-1280: calc(1280px * var(--ui-scale)); --w-1400: calc(1400px * var(--ui-scale)); /* Height scale (px primitives) */ --h-12: calc(12px * var(--ui-scale)); --h-16: calc(16px * var(--ui-scale)); --h-32: calc(32px * var(--ui-scale)); --h-36: calc(36px * var(--ui-scale)); --h-40: calc(40px * var(--ui-scale)); --h-56: calc(56px * var(--ui-scale)); --h-60: calc(60px * var(--ui-scale)); --h-64: calc(64px * var(--ui-scale)); --h-72: calc(72px * var(--ui-scale)); --h-80: calc(80px * var(--ui-scale)); --h-90: calc(90px * var(--ui-scale)); --h-100: calc(100px * var(--ui-scale)); --h-120: calc(120px * var(--ui-scale)); --h-140: calc(140px * var(--ui-scale)); --h-150: calc(150px * var(--ui-scale)); --h-160: calc(160px * var(--ui-scale)); --h-200: calc(200px * var(--ui-scale)); --h-220: calc(220px * var(--ui-scale)); --h-240: calc(240px * var(--ui-scale)); --h-280: calc(280px * var(--ui-scale)); --h-300: calc(300px * var(--ui-scale)); --h-320: calc(320px * var(--ui-scale)); --h-360: calc(360px * var(--ui-scale)); --h-400: calc(400px * var(--ui-scale)); --h-480: calc(480px * var(--ui-scale)); --h-520: calc(520px * var(--ui-scale)); --h-600: calc(600px * var(--ui-scale)); --h-720: calc(720px * var(--ui-scale)); --h-640: calc(640px * var(--ui-scale)); /* Percentage sizing primitives */ --quarter: 25%; --third: 33.333%; --forty-percent: 40%; --half: 50%; --fifty-six-percent: 56%; --sixty-percent: 60%; --two-thirds: 66.667%; --seventy-percent: 70%; --seventy-eight-percent: 78%; --three-quarters: 75%; --eighty-percent: 80%; --ninety-percent: 90%; --ninety-five-percent: 95%; --full: 100%; --two-hundred-percent: 200%; /* Viewport units */ --viewport-full-width: 100vw; --viewport-full-height: 100vh; --viewport-height: 100dvh; --viewport-width: 100dvw; --max-height-screen-80: 80vh; --max-height-screen-85: 85vh; --max-height-screen-90: 90vh; --max-height-table-page: 75vh; --max-height-screen-60: 60vh; --max-height-screen-66-666: 66.666vh; --max-height-screen-70: 70vh; --max-height-screen-72: 72vh; --max-height-screen-30: 30vh; --max-width-screen-80: 80vw; --max-width-screen-96: 96vw; /* Generic viewport-driven geometry (component-specific viewport values) */ --viewport-fluid-width-lg: 40vw; --viewport-fluid-width-md: 28vw; --viewport-fluid-size-sm: 10vw; --viewport-fluid-gap-xs: 2vw; --viewport-fluid-offset-sm: 3vw; --viewport-bird-full-vmin: 44vmin; --viewport-bird-preview-width-vmin: 40vmin; --viewport-bird-preview-height-vmin: 24vmin; --viewport-modal-max-width: 95vw; --viewport-modal-margin-block: 2vh; --viewport-modal-margin-inline: 2vw; --viewport-photo-viewer-width: 90vw; --viewport-tooltip-max-width: 85vw; /* Aspect Ratios */ --aspect-square: 1 / 1; --aspect-video: 16 / 9; --aspect-photo: 4 / 3; --aspect-portrait: 3 / 4; --aspect-ultrawide: 21 / 9; --aspect-cinema: 2.39 / 1; /* Breakpoints */ --breakpoint-sm: 640px; /* iPad Mini (portrait logical width) */ --breakpoint-ipad-mini: 744px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* Flex helpers */ --flex-0: 0; --flex-1: 1; /* Content-based sizing keywords */ --auto: auto; --min-content: min-content; --max-content: max-content; --fit-content: fit-content; } /* Spacing Values - FACTS (non-negotiable scale) */ :root { /* Global UI scale (1 = default). */ --ui-scale: 1; /* Base unit - reduced from 4px to 3px for tighter spacing */ --space-unit: calc(3px * var(--ui-scale)); /* Core scale (4px grid) */ --space-0: 0; --space-1: calc(var(--space-unit) * 1); /* 4px */ --space-2: calc(var(--space-unit) * 2); /* 8px */ --space-3: calc(var(--space-unit) * 3); /* 12px */ --space-4: calc(var(--space-unit) * 4); /* 16px */ --space-5: calc(var(--space-unit) * 5); /* 20px */ --space-6: calc(var(--space-unit) * 6); /* 24px */ --space-7: calc(var(--space-unit) * 7); /* 28px */ --space-8: calc(var(--space-unit) * 8); /* 32px */ --space-9: calc(var(--space-unit) * 9); /* 36px */ --space-10: calc(var(--space-unit) * 10); /* 40px */ --space-12: calc(var(--space-unit) * 12); /* 48px */ --space-14: calc(var(--space-unit) * 14); /* 56px */ --space-16: calc(var(--space-unit) * 16); /* 64px */ --space-18: calc(var(--space-unit) * 18); /* 72px */ --space-20: calc(var(--space-unit) * 20); /* 80px */ --space-24: calc(var(--space-unit) * 24); /* 96px */ --space-32: calc(var(--space-unit) * 32); /* 128px */ --space-40: calc(var(--space-unit) * 40); /* 160px */ --space-48: calc(var(--space-unit) * 48); /* 192px */ --space-56: calc(var(--space-unit) * 56); /* 224px */ --space-64: calc(var(--space-unit) * 64); /* 256px */ --space-72: calc(var(--space-unit) * 72); /* 288px */ --space-96: calc(var(--space-unit) * 96); /* 384px */ --space-105: calc(var(--space-unit) * 105); /* 420px */ --space-120: calc(var(--space-unit) * 120); /* 480px */ /* Half-steps */ --space-0-25: calc(var(--space-unit) * 0.25); /* 1px */ --space-0-5: calc(var(--space-unit) * 0.5); /* 2px */ --space-0-75: calc(var(--space-unit) * 0.75); /* 3px */ --space-1-5: calc(var(--space-unit) * 1.5); /* 6px */ --space-2-5: calc(var(--space-unit) * 2.5); /* 10px */ --space-3-5: calc(var(--space-unit) * 3.5); /* 14px */ --space-3-75: calc(var(--space-unit) * 3.75); /* 15px */ --space-4-5: calc(var(--space-unit) * 4.5); /* 18px */ --space-5-5: calc(var(--space-unit) * 5.5); /* 22px */ --space-6-25: calc(var(--space-unit) * 6.25); /* 25px */ --space-8-5: calc(var(--space-unit) * 8.5); /* 34px */ --space-12-5: calc(var(--space-unit) * 12.5); /* 50px */ --space-13-75: calc(var(--space-unit) * 13.75); /* 55px */ --space-87-5: calc(var(--space-unit) * 87.5); /* 350px */ /* Fluid spacing for responsive layouts */ --space-fluid-2vw: 2vw; --space-fluid-3vw: 3vw; --space-fluid-4vw: 4vw; --space-fluid-5vw: 5vw; } :root.ui-scale--lg { --ui-scale: 1.1; } :root.ui-scale--xl { --ui-scale: 1.2; } :root.ui-scale--xxl { --ui-scale: 1.3; } /* TYPOGRAPHY VALUES */ :root { /* Font Families */ --font-sans: "Raleway", "Inter", "Segoe UI", helvetica, arial, sans-serif; --font-serif: "Libre Baskerville", "Times New Roman", georgia, serif; --font-mono: "JetBrains Mono", "SF Mono", monaco, "Menlo", "Consolas", "Roboto Mono", "Cascadia Code", "Courier New", monospace; --font-hero: "Feeling Passionate", "Raleway", serif; --font-accent: "Local Brewery Eight", "Local Brewery", "Feeling Passionate", "Raleway", serif; /* Font Weights (numeric values) */ --font-weight-100: 100; --font-weight-300: 300; --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; --font-weight-800: 800; --font-weight-900: 900; /* Mobile Font Scales */ --font-size-mobile-dense-xs: 0.6875rem; /* 11px */ --font-size-mobile-dense-sm: 0.75rem; /* 12px */ --font-size-mobile-dense-base: 0.8125rem; /* 13px */ --font-size-mobile-dense-md: 0.875rem; /* 14px */ --font-size-mobile-dense-lg: 1rem; /* 16px */ --font-size-mobile-large-xs: 0.8125rem; /* 13px */ --font-size-mobile-large-sm: 0.9375rem; /* 15px */ --font-size-mobile-large-base: 1.0625rem; /* 17px */ --font-size-mobile-large-md: 1.125rem; /* 18px */ --font-size-mobile-large-lg: 1.25rem; /* 20px */ --font-size-mobile-large-xl: 1.375rem; /* 22px */ /* Fluid Typography (responsive clamp values) */ --font-fluid-h1: clamp(1.75rem, 4vw, 2.5rem); --font-fluid-h2: clamp(1.5rem, 3.5vw, 2rem); --font-fluid-h3: clamp(1.25rem, 3vw, 1.5rem); --font-fluid-body: clamp(0.875rem, 2.5vw, 1rem); --font-fluid-body-large: clamp(1rem, 2.5vw, 1.125rem); /* Line clamp raw counts */ --line-clamp-1-value: 1; --line-clamp-2-value: 2; --line-clamp-3-value: 3; --line-clamp-4-value: 4; --line-clamp-5-value: 5; } @font-face { font-family: "Feeling Passionate"; /* WOFF2 subset (242KB) is 66% smaller than original TTF (716KB) */ /* Includes: Latin, Latin Extended-A, common punctuation, currency symbols */ src: url("/fonts/FeelingPassionate-subset.woff2") format("woff2"), url("/fonts/FeelingPassionate.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; /* Show fallback font immediately while custom font loads */ } @font-face { font-family: "Local Brewery Eight"; src: url("/fonts/LocalBreweryEight-Regular.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } :root { /* Letter Spacing */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* Font Weights */ --font-weight-thin: 100; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* Line Heights */ --line-height-1-1: 1.1; /* 110% - ultra-tight (spreadsheet) */ --line-height-1-2: 1.2; /* 120% - tight */ --line-height-1-25: 1.25; /* 125% */ --line-height-1-3: 1.3; /* 130% - dense */ --line-height-1-375: 1.375; /* 137.5% - slightly relaxed */ --line-height-1-4: 1.4; /* 140% - comfortable */ --line-height-1-5: 1.5; /* 150% - standard */ --line-height-1-6: 1.6; /* 160% - relaxed */ --line-height-1-75: 1.75; /* 175% - spacious */ /* Legacy aliases (deprecated) */ --line-height-110: var(--line-height-1-1); --line-height-120: var(--line-height-1-2); --line-height-125: var(--line-height-1-25); --line-height-130: var(--line-height-1-3); --line-height-138: var(--line-height-1-375); --line-height-140: var(--line-height-1-4); --line-height-150: var(--line-height-1-5); --line-height-160: var(--line-height-1-6); --line-height-175: var(--line-height-1-75); /* Text Alignment Values */ --text-align-left: left; --text-align-right: right; --text-align-center: center; --text-align-justify: justify; --text-align-start: start; --text-align-end: end; } :root { --w-1ch: 1ch; --w-2ch: 2ch; --w-3ch: 3ch; --w-4ch: 4ch; --w-5ch: 5ch; --w-6ch: 6ch; --w-7ch: 7ch; --w-8ch: 8ch; --w-9ch: 9ch; --w-10ch: 10ch; --w-11ch: 11ch; --w-12ch: 12ch; --w-13ch: 13ch; --w-14ch: 14ch; --w-15ch: 15ch; --w-16ch: 16ch; --w-17ch: 17ch; --w-18ch: 18ch; --w-19ch: 19ch; --w-20ch: 20ch; --w-21ch: 21ch; --w-22ch: 22ch; --w-23ch: 23ch; --w-24ch: 24ch; --w-25ch: 25ch; --w-26ch: 26ch; --w-27ch: 27ch; --w-28ch: 28ch; --w-29ch: 29ch; --w-30ch: 30ch; --w-31ch: 31ch; --w-32ch: 32ch; --w-33ch: 33ch; --w-34ch: 34ch; --w-35ch: 35ch; --w-36ch: 36ch; --w-37ch: 37ch; --w-38ch: 38ch; --w-39ch: 39ch; --w-40ch: 40ch; --w-41ch: 41ch; --w-42ch: 42ch; --w-43ch: 43ch; --w-44ch: 44ch; --w-45ch: 45ch; --w-46ch: 46ch; --w-47ch: 47ch; --w-48ch: 48ch; --w-49ch: 49ch; --w-50ch: 50ch; --w-100ch: 100ch; } /* ========================================================================= Z-INDEX VALUES — Layering Scale Raw z-index numeric scale for UI layering VALUES ONLY — no semantics, no utilities ========================================================================= */ :root { /* Z-index numeric scale */ --z-0: 0; --z-100: 100; --z-200: 200; --z-400: 400; --z-600: 600; --z-800: 800; --z-900: 900; --z-1000: 1000; --z-1050: 1050; --z-1100: 1100; --z-2000: 2000; --z-100000: 100000; } /* Blur & Visual Effects Quality Tokens - describe APPEARANCE not PURPOSE */ :root { /* ======================================================================== BLUR SCALE - Intensity of blur effect ======================================================================== */ --blur-3xs: var(--blur-1); /* 1px - barely perceptible */ --blur-2xs: var(--blur-2); /* 2px - subtle */ --blur-xs: var(--blur-4); /* 4px - light */ --blur-sm: var(--blur-8); /* 8px - noticeable */ --blur-md: var(--blur-10); /* 10px - moderate */ --blur-xl: var(--blur-16); /* 16px - strong */ /* ======================================================================== SATURATION SCALE - Color intensity ======================================================================== */ --saturation-lg: var(--saturate-115); /* 115% - enhanced colors */ --saturation-xl: var(--saturate-135); /* 135% - vibrant colors */ /* ======================================================================== COMPOSITE EFFECTS - Combined filters ======================================================================== */ /* Glass backdrop effects (blur + saturation for frosted glass UI) */ --backdrop-glass-light: var(--saturation-lg) var(--blur-sm); --backdrop-glass-medium: var(--saturation-lg) var(--blur-md); /* ======================================================================== SHADOW & GEOMETRY UTILITIES ======================================================================== */ /* Shadow offset scale */ --shadow-offset-reset: var(--shadow-offset-0); /* 0px */ --shadow-offset-md: var(--shadow-offset-3); /* 3px */ /* Bevel effects */ --bevel-inset: var(--bevel-inset-geometry); /* ======================================================================== GRADIENT UTILITIES ======================================================================== */ /* Gradient angle scale */ --angle-vertical: var(--gradient-angle-vertical); /* 180deg */ --angle-diagonal: var(--gradient-angle-diagonal); /* 135deg */ /* Gradient stop positions (0-100%) */ --stop-start: var(--gradient-stop-start); --stop-near: var(--gradient-stop-near); --stop-mid: var(--gradient-stop-mid); --stop-mid-alt: var(--gradient-stop-mid-alt); --stop-center: var(--gradient-stop-center); --stop-fade-near: var(--gradient-stop-fade-near); --stop-fade-far: var(--gradient-stop-fade-far); --stop-far: var(--gradient-stop-far); --stop-end: var(--gradient-stop-end); /* Shadow geometry quality wrappers (depth and floats) */ --shadow-depth-off: var(--shadow-depth-0); --shadow-depth-crisp: var(--shadow-depth-1); --shadow-depth-subtle: var(--shadow-depth-2); --shadow-depth-soft: var(--shadow-depth-3); --shadow-depth-strong: var(--shadow-depth-4); --shadow-depth-panel-strong: var(--shadow-depth-panel); --shadow-emboss-rest-geometry: var(--shadow-emboss-rest); --shadow-emboss-hover-geometry: var(--shadow-emboss-hover); --shadow-float-sm-ambient: var(--shadow-float-depth-1-ambient); --shadow-float-sm-contact: var(--shadow-float-depth-1-contact); --shadow-float-md-ambient: var(--shadow-float-depth-2-ambient); --shadow-float-md-contact: var(--shadow-float-depth-2-contact); --shadow-float-lg-ambient: var(--shadow-float-depth-3-ambient); --shadow-float-lg-contact: var(--shadow-float-depth-3-contact); --shadow-float-lg-hover-ambient: var(--shadow-float-depth-3-hover-ambient); --shadow-float-lg-hover-contact: var(--shadow-float-depth-3-hover-contact); --shadow-glow-depth-soft: var(--shadow-glow-depth-1); --shadow-glow-depth-strong: var(--shadow-glow-depth-2); --shadow-glow-depth-elevated: var(--shadow-glow-depth-3); --shadow-outline-subtle-geometry: var(--shadow-tab-outline-geometry); } /* Border Quality Tokens - describe THICKNESS and CURVATURE not PURPOSE */ :root { /* ======================================================================== BORDER WIDTH SCALE - Thickness of borders ======================================================================== */ --input-border-none: var(--bw-0); --input-border-thin: var(--bw-1); --input-border-std: var(--bw-2); --input-border-thick: var(--bw-3); --input-border-width-none: var(--input-border-none); --input-border-width-thin: var(--input-border-thin); --input-border-weight-thin: var(--input-border-thin); --input-border-width-sm: var(--input-border-thin); --input-border-width-md: var(--input-border-std); --input-border-width-medium: var(--input-border-std); --input-border-weight-medium: var(--input-border-std); --input-border-weight-thick: var(--input-border-thick); /* ======================================================================== SVG STROKE WIDTH SCALE - Line thickness for vector graphics ======================================================================== */ --stroke-width-thin: var(--stroke-thin); /* 1 - thin line */ --stroke-width-regular: var(--stroke-regular); /* 1.5 - standard */ --stroke-width-medium: var(--stroke-medium); /* 2 - moderate */ --stroke-width-medium-plus: var(--stroke-medium-plus); /* 2.5 - enhanced */ --stroke-width-thick: var(--stroke-thick); /* 3 - bold */ /* ======================================================================== BORDER RADIUS SCALE - Corner curvature ======================================================================== */ --radius-flat: var(--radius-none); /* 0 - sharp corners */ --radius-standard: var(--radius-lg); /* 8px - moderate */ --radius-pill: var(--radius-full); /* 999px - fully rounded */ --radius-circle: var(--half); /* 50% - perfect circle */ } :root { --palest-teal: var(--teal-50); --pale-teal: var(--teal-200); --light-teal: var(--teal-200); --soft-teal: var(--teal-300); --medium-teal: var(--teal-400); --vibrant-teal: var(--teal-500); --strong-teal: var(--teal-600); --deep-teal: var(--teal-700); --light-slate: var(--slate-200); --pale-slate: var(--slate-300); --soft-slate: var(--slate-400); --medium-slate: var(--slate-500); --dark-slate: var(--slate-600); --darker-slate: var(--slate-700); --deep-slate: var(--slate-800); --deeper-slate: var(--slate-850); --deepest-slate: var(--slate-900); --ultra-dark-slate: var(--slate-950); --palest-teal-slate: var(--teal-slate-50); --pale-teal-slate: var(--teal-slate-100); --light-teal-slate: var(--teal-slate-200); --soft-teal-slate: var(--teal-slate-300); --medium-teal-slate: var(--teal-slate-400); --strong-teal-slate: var(--teal-slate-500); --dark-teal-slate: var(--teal-slate-600); --deeper-teal-slate: var(--teal-slate-700); --deep-teal-slate: var(--teal-slate-800); --deepest-teal-slate: var(--teal-slate-900); --white: var(--neutral-white); --black: var(--neutral-black); --light-gray: var(--neutral-gray-200); --soft-gray: var(--neutral-gray-300); --pale-cool-gray: var(--cool-gray-100); --light-cool-gray: var(--cool-gray-200); --soft-cool-gray: var(--cool-gray-300); --pale-off-white: var(--cool-white-50); --light-off-white: var(--cool-white-100); --soft-off-white: var(--cool-white-200); --medium-off-white: var(--cool-white-300); --bright-off-white: var(--cool-white-400); --off-white-soft: var(--soft-off-white); --off-white: var(--bright-off-white); --accent-teal: var(--vibrant-teal); --pale-sunset: var(--sunset-50); --light-sunset: var(--sunset-100); --soft-sunset: var(--sunset-200); --medium-sunset: var(--sunset-500); --strong-sunset: var(--sunset-600); --deep-sunset: var(--sunset-900); --light-amber: var(--amber-200); --strong-amber: var(--amber-700); --amber-softest: var(--amber-25); /* barely-tinted amber wash */ --amber-soft: var(--amber-50); /* soft warm amber background */ --amber-border: var(--amber-300); /* golden amber border */ --pale-red: var(--red-50); --light-red: var(--red-200); --medium-red: var(--red-400); --strong-red: var(--red-500); --dark-red: var(--red-600); --deepest-red: var(--red-900); --pale-gray-blue: var(--gray-blue-50); --soft-gray-blue: var(--gray-blue-300); --medium-charcoal: var(--charcoal-600); --dark-charcoal: var(--charcoal-700); --deeper-charcoal: var(--charcoal-800); --deepest-charcoal: var(--charcoal-900); --rainbow-red: var(--rainbow-bright-red); --rainbow-orange: var(--rainbow-bright-orange); --rainbow-yellow: var(--rainbow-bright-yellow); --rainbow-green: var(--rainbow-bright-green); --rainbow-blue: var(--rainbow-bright-blue); --rainbow-purple: var(--rainbow-bright-purple); --faint-teal-glow: var(--teal-500-alpha-05); --soft-teal-glow: var(--teal-500-alpha-10); --medium-teal-glow: var(--teal-500-alpha-18); --strong-teal-glow: var(--teal-500-alpha-20); --deep-teal-glow: var(--teal-500-alpha-22); --deeper-teal-glow: var(--teal-500-alpha-30); --deepest-teal-glow: var(--teal-500-alpha-40); --soft-white-tint: var(--white-alpha-50); --medium-white-tint: var(--white-alpha-80); --strong-white-tint: var(--white-alpha-86); /* White glass effects */ --white-glass-subtle-04: var(--white-alpha-04); --white-glass-whisper-08: var(--white-alpha-08); --white-glass-faint-10: var(--white-alpha-10); --white-glass-soft-12: var(--white-alpha-12); --white-glass-visible-15: var(--white-alpha-15); --white-glass-clear-18: var(--white-alpha-18); --white-glass-light-20: var(--white-alpha-20); --white-glass-strong-20: var(--white-alpha-20); --white-glass-glow-22: var(--white-alpha-22); --white-glass-medium-25: var(--white-alpha-25); --white-glass-medium-30: var(--white-alpha-30); --white-glass-bright-35: var(--white-alpha-35); --white-glass-strong-40: var(--white-alpha-40); --white-glass-elevated-45: var(--white-alpha-45); --white-glass-heavy-50: var(--white-alpha-50); --white-glass-prominent-55: var(--white-alpha-55); --white-glass-thick-60: var(--white-alpha-60); --white-glass-solid-70: var(--white-alpha-70); --white-glass-opaque-80: var(--white-alpha-80); --white-glass-bright-86: var(--white-alpha-86); --white-glass-frosted-90: var(--white-alpha-90); --white-glass-full-95: var(--white-alpha-95); /* Teal glass effects */ --teal-glass-whisper-05: var(--teal-400-alpha-05); --teal-glass-subtle-08: var(--teal-400-alpha-08); --teal-glass-faint-10: var(--teal-400-alpha-10); --teal-glass-soft-12: var(--teal-400-alpha-12); --teal-glass-visible-15: var(--teal-400-alpha-15); --teal-glass-light-18: var(--teal-400-alpha-18); --teal-glass-light-20: var(--teal-400-alpha-20); --teal-glass-subtle-25: var(--teal-400-alpha-25); --teal-glass-medium-30: var(--teal-400-alpha-30); --teal-glass-light-30: var(--teal-400-alpha-30); --teal-glass-strong-40: var(--teal-400-alpha-40); --teal-glass-bold-45: var(--teal-400-alpha-45); --teal-glass-bold-60: var(--teal-400-alpha-60); /* Teal light variants */ --teal-light-glass-whisper-08: var(--teal-300-alpha-08); --teal-light-glass-soft-12: var(--teal-300-alpha-12); --teal-light-glass-visible-16: var(--teal-300-alpha-16); --teal-light-glass-light-24: var(--teal-300-alpha-24); --teal-light-glass-medium-26: var(--teal-300-alpha-26); --teal-light-glass-strong-36: var(--teal-300-alpha-36); --teal-light-glass-heavy-65: var(--teal-300-alpha-65); --teal-light-glass-heavy-80: var(--teal-300-alpha-80); /* Teal dark variants */ --teal-dark-glass-whisper-08: var(--teal-500-alpha-08); --teal-dark-glass-faint-10: var(--teal-500-alpha-10); --teal-dark-glass-soft-12: var(--teal-500-alpha-12); --teal-dark-glass-visible-16: var(--teal-500-alpha-16); --teal-dark-glass-clear-18: var(--teal-500-alpha-18); --teal-dark-glass-light-20: var(--teal-500-alpha-20); --teal-dark-glass-medium-22: var(--teal-500-alpha-22); --teal-dark-glass-strong-30: var(--teal-500-alpha-30); --teal-dark-glass-heavy-40: var(--teal-500-alpha-40); --teal-dark-glass-heavy-50: var(--teal-500-alpha-50); --teal-dark-glass-heavy-70: var(--teal-500-alpha-70); --teal-dark-glass-solid-50: var(--teal-500-alpha-50); --teal-deep-glass-45: var(--teal-600-alpha-45); --teal-deep-glass-60: var(--teal-500-alpha-55); /* Slate glass effects */ --slate-glass-hairline-08: var(--slate-600-alpha-08); --slate-glass-soft-12: var(--slate-300-alpha-12); --slate-glass-visible-15: var(--slate-300-alpha-15); --slate-glass-light-20: var(--slate-300-alpha-20); --slate-dark-glass-strong-40: var(--slate-600-alpha-40); --slate-dark-glass-medium-70: var(--slate-600-alpha-70); /* Red glass effects */ --red-glass-whisper-05: var(--red-500-alpha-05); --red-glass-faint-10: var(--red-500-alpha-10); --red-glass-visible-14: var(--red-500-alpha-14); --red-glass-heavy-40: var(--red-500-alpha-40); /* Sunset glass effects */ --sunset-glass-faint-10: var(--sunset-600-alpha-10); --sunset-glass-visible-14: var(--sunset-600-alpha-14); --sunset-glass-heavy-70: var(--sunset-600-alpha-70); /* === Additional neutrals === */ --slate: var(--medium-slate); --slate-medium: var(--medium-slate); /* Preserve a way to request actual white explicitly */ --true-white: var(--neutral-white); --true-black: var(--black); /* Legacy blue aliases for notifications */ --light-blue: var(--rainbow-light-blue); --medium-blue: var(--rainbow-bright-blue); /* Surface gradient stops (use in gradients) */ --surface-gradient-sidebar-start: var(--vibrant-teal); --surface-gradient-sidebar-mid: var(--strong-teal); --surface-gradient-sidebar-end: var(--medium-teal); --surface-gradient-soft-start: var(--light-teal); --surface-gradient-soft-mid: var(--medium-teal); --surface-gradient-soft-end: var(--deep-teal); --surface-gradient-secondary-start: var(--light-teal); --surface-gradient-secondary-mid: var(--soft-teal); --surface-gradient-secondary-end: var(--medium-teal); --surface-gradient-tertiary-start: var(--palest-teal); --surface-gradient-tertiary-mid: var(--light-teal); --surface-gradient-tertiary-end: var(--soft-teal); --surface-gradient-pill-start: var(--pale-teal); --surface-gradient-pill-mid: var(--light-teal); --surface-gradient-pill-end: var(--medium-teal); /* Text semantic colors (palette-driven; dark mapping lives here) */ /* ⚠️ NOTE: --slate = --medium-slate = --slate-500 (#5A6B75). --text-color-primary, --text-color-emphasis, and --text-color-secondary all resolve to the SAME color in light mode. They are effectively aliases. Do NOT assume primary is darker than secondary here. */ --text-color-primary: var(--slate); /* = --slate-500 = #5A6B75 */ --text-color-emphasis: var(--medium-slate); /* = --slate-500 = #5A6B75 (same as primary) */ --text-color-secondary: var(--medium-slate); /* = --slate-500 = #5A6B75 (same as primary) */ --text-color-muted: var(--pale-slate); --text-color-disabled: var(--light-slate); --text-color-inverse: var(--true-white); --text-color-on-dark: var(--text-color-inverse); --text-color-on-dark-muted: var(--soft-white-tint); } :root.dark { /* === Teal ramp inversion (light ↔ dark) === */ --palest-teal: var(--medium-slate); /* Subtle chrome (borders/dividers) uses the desaturated teal-slate ramp in dark mode rather than the vivid teal ramp — teal-700 is the darkest step the vivid ramp has, so collapsing pale/light/soft onto it produced identical, overly-saturated borders. teal-slate has darker steps and preserves the light-mode ordering (pale lighter/ more subtle than soft). */ --pale-teal: var(--teal-slate-800); --light-teal: var(--teal-slate-800); --soft-teal: var(--teal-slate-700); --medium-teal: var(--teal-600); --vibrant-teal: var(--teal-500); --strong-teal: var(--teal-400); /* Not inverted: this is a vivid brand-accent surface meant to host white/on-dark text in both themes (info banners, badges), not a neutral chrome color that should flip lightness with the theme. */ --deep-teal: var(--teal-700); /* === Slate ramp inversion (light ↔ dark) === */ --light-slate: var(--slate-800); --pale-slate: var(--slate-700); --soft-slate: var(--slate-600); --medium-slate: var(--slate-500); --dark-slate: var(--slate-400); --darker-slate: var(--slate-300); --deep-slate: var(--slate-200); --deeper-slate: var(--slate-300); --deepest-slate: var(--slate-200); --ultra-dark-slate: var(--slate-950); /* === Teal+slate mixed ramp inversion === */ --palest-teal-slate: var(--teal-slate-900); --pale-teal-slate: var(--teal-slate-800); --light-teal-slate: var(--teal-slate-700); --soft-teal-slate: var(--teal-slate-600); --medium-teal-slate: var(--teal-slate-500); --strong-teal-slate: var(--teal-slate-400); --dark-teal-slate: var(--teal-slate-300); --deeper-teal-slate: var(--teal-slate-200); --deep-teal-slate: var(--teal-slate-100); --deepest-teal-slate: var(--teal-slate-50); /* === Core neutrals inversion === */ /* Avoid pure #000 surfaces; use a deep slate instead */ --white: var(--slate-950); --black: var(--neutral-white); --light-gray: var(--slate-800); --soft-gray: var(--slate-700); --cool-white-50: var(--slate-900); --cool-white-100: var(--slate-850); --cool-white-200: var(--slate-800); --cool-white-300: var(--slate-700); --cool-white-400: var(--slate-600); --cool-gray-100: var(--slate-800); --cool-gray-200: var(--slate-700); --cool-gray-300: var(--slate-600); --pale-cool-gray: var(--slate-900); --light-cool-gray: var(--slate-850); --soft-cool-gray: var(--slate-800); --pale-off-white: var(--slate-950); --light-off-white: var(--slate-900); --soft-off-white: var(--slate-850); --medium-off-white: var(--slate-800); --bright-off-white: var(--slate-700); --off-white-soft: var(--soft-off-white); --off-white: var(--bright-off-white); /* === Accent ramps (sunset / amber / red) inverted across their scales === */ --pale-sunset: var(--sunset-900); --light-sunset: var(--sunset-700); --soft-sunset: var(--sunset-600); --medium-sunset: var(--sunset-500); --strong-sunset: var(--sunset-200); --deep-sunset: var(--sunset-50); --light-amber: var(--amber-700); --strong-amber: var(--amber-200); --amber-softest: var(--amber-dark-25); --amber-soft: var(--amber-dark-50); --amber-border: var(--amber-dark-300); --pale-red: var(--red-900); --light-red: var(--red-700); --medium-red: var(--red-600); --strong-red: var(--red-400); --dark-red: var(--red-200); --deepest-red: var(--red-50); --pale-gray-blue: var(--gray-blue-300); --soft-gray-blue: var(--gray-blue-50); /* === Charcoal inversion (as best as scale allows) === */ --medium-charcoal: var(--charcoal-900); --dark-charcoal: var(--charcoal-800); --deeper-charcoal: var(--charcoal-700); --deepest-charcoal: var(--charcoal-600); /* === Rainbow: use light variants in dark mode === */ --rainbow-red: var(--rainbow-light-red); --rainbow-orange: var(--rainbow-light-orange); --rainbow-yellow: var(--rainbow-light-yellow); --rainbow-green: var(--rainbow-light-green); --rainbow-blue: var(--rainbow-light-blue); --rainbow-purple: var(--rainbow-light-purple); /* === Glass tokens: bias toward darker underlying colors but keep structure === */ --faint-teal-glow: var(--teal-600-alpha-05); --soft-teal-glow: var(--teal-600-alpha-10); --medium-teal-glow: var(--teal-600-alpha-18); --strong-teal-glow: var(--teal-600-alpha-20); --deep-teal-glow: var(--teal-600-alpha-22); --deeper-teal-glow: var(--teal-600-alpha-30); --deepest-teal-glow: var(--teal-600-alpha-40); --soft-white-tint: var(--white-alpha-50); --medium-white-tint: var(--white-alpha-80); --strong-white-tint: var(--white-alpha-86); /* Dark-mode glass effects - white overlays create lighter visible elements on dark backgrounds */ --white-glass-subtle-04: var(--white-alpha-04); --white-glass-whisper-08: var(--white-alpha-08); --white-glass-faint-10: var(--white-alpha-10); --white-glass-soft-12: var(--white-alpha-12); --white-glass-visible-15: var(--white-alpha-15); --white-glass-clear-18: var(--white-alpha-18); --white-glass-light-20: var(--white-alpha-20); --white-glass-glow-22: var(--white-alpha-22); --white-glass-medium-25: var(--white-alpha-25); --white-glass-medium-30: var(--white-alpha-30); --white-glass-bright-35: var(--white-alpha-35); --white-glass-strong-40: var(--white-alpha-40); --white-glass-elevated-45: var(--white-alpha-45); --white-glass-heavy-50: var(--white-alpha-50); --white-glass-prominent-55: var(--white-alpha-55); --white-glass-thick-60: var(--white-alpha-60); /* In dark mode these high-opacity "surface glass" tokens should be slate-tinted, not pure white */ --white-glass-solid-70: var(--slate-800-alpha-70); --white-glass-opaque-80: var(--slate-850-alpha-92); --white-glass-bright-86: var(--slate-850-alpha-92); --white-glass-frosted-90: var(--slate-850-alpha-92); --white-glass-full-95: var(--slate-900-alpha-95); --black-glass-subtle-02: var(--black-alpha-02); --black-glass-subtle-05: var(--black-alpha-05); --black-glass-subtle-06: var(--black-alpha-06); --black-glass-subtle-07: var(--black-alpha-07); --black-glass-whisper-08: var(--black-alpha-08); --black-glass-faint-10: var(--black-alpha-10); --black-glass-soft-12: var(--black-alpha-12); --black-glass-visible-15: var(--black-alpha-15); --black-glass-clear-18: var(--black-alpha-18); --black-glass-light-20: var(--black-alpha-20); --black-glass-medium-25: var(--black-alpha-25); --black-glass-strong-30: var(--black-alpha-30); --black-glass-heavy-40: var(--black-alpha-40); --black-glass-solid-60: var(--black-alpha-60); --black-glass-opaque-65: var(--black-alpha-65); --black-glass-deep-80: var(--black-alpha-80); --teal-glass-whisper-05: var(--teal-600-alpha-05); --teal-glass-subtle-08: var(--teal-600-alpha-08); --teal-glass-faint-10: var(--teal-600-alpha-10); --teal-glass-soft-12: var(--teal-600-alpha-12); --teal-glass-visible-15: var(--teal-600-alpha-15); --teal-glass-light-18: var(--teal-600-alpha-18); --teal-glass-light-20: var(--teal-600-alpha-20); --teal-glass-subtle-25: var(--teal-600-alpha-24); --teal-glass-medium-30: var(--teal-600-alpha-30); --teal-glass-light-30: var(--teal-600-alpha-30); --teal-glass-strong-40: var(--teal-600-alpha-40); --teal-glass-bold-45: var(--teal-600-alpha-45); --teal-glass-heavy-60: var(--teal-600-alpha-60); --teal-glass-bold-60: var(--teal-glass-heavy-60); --teal-light-glass-whisper-08: var(--teal-500-alpha-08); --teal-light-glass-soft-12: var(--teal-500-alpha-12); --teal-light-glass-visible-16: var(--teal-500-alpha-16); --teal-light-glass-light-24: var(--teal-500-alpha-24); --teal-light-glass-medium-26: var(--teal-500-alpha-26); --teal-light-glass-strong-36: var(--teal-500-alpha-36); --teal-light-glass-heavy-65: var(--teal-500-alpha-65); --teal-light-glass-heavy-80: var(--teal-500-alpha-80); --teal-dark-glass-whisper-08: var(--teal-700-alpha-08); --teal-dark-glass-faint-10: var(--teal-700-alpha-10); --teal-dark-glass-soft-12: var(--teal-700-alpha-12); --teal-dark-glass-visible-16: var(--teal-700-alpha-16); --teal-dark-glass-clear-18: var(--teal-700-alpha-18); --teal-dark-glass-light-20: var(--teal-700-alpha-20); --teal-dark-glass-medium-22: var(--teal-700-alpha-22); --teal-dark-glass-strong-30: var(--teal-700-alpha-30); --teal-dark-glass-heavy-40: var(--teal-700-alpha-40); --teal-dark-glass-heavy-50: var(--teal-700-alpha-50); --teal-dark-glass-heavy-70: var(--teal-700-alpha-70); --teal-dark-glass-solid-50: var(--teal-500-alpha-50); --teal-deep-glass-45: var(--teal-600-alpha-45); --teal-deep-glass-60: var(--teal-600-alpha-60); --slate-glass-hairline-08: var(--slate-600-alpha-08); --slate-glass-soft-12: var(--slate-500-alpha-12); --slate-glass-visible-15: var(--slate-500-alpha-15); --slate-glass-light-20: var(--slate-500-alpha-20); --slate-dark-glass-strong-40: var(--slate-800-alpha-40); --slate-dark-glass-medium-70: var(--slate-800-alpha-70); --red-glass-whisper-05: var(--red-600-alpha-05); --red-glass-faint-10: var(--red-600-alpha-10); --red-glass-visible-14: var(--red-600-alpha-14); --red-glass-heavy-40: var(--red-600-alpha-40); --sunset-glass-faint-10: var(--sunset-700-alpha-10); --sunset-glass-visible-14: var(--sunset-700-alpha-14); --sunset-glass-heavy-70: var(--sunset-700-alpha-70); /* Brand colors for gradients */ --indigo-glass-faint-10: var(--indigo-500-alpha-10); --indigo-glass-strong-30: var(--indigo-500-alpha-30); --violet-glass-faint-10: var(--violet-500-alpha-10); --brand-teal-glass-thick-60: var(--brand-teal-400-alpha-60); --brand-teal-glass-opaque-80: var(--brand-teal-400-alpha-80); /* Palette aliases that need explicit dark mappings */ --accent-teal: var(--vibrant-teal); --white-glass-strong-20: var(--white-glass-light-20); --slate: var(--medium-slate); --slate-medium: var(--medium-slate); --true-white: var(--neutral-white); --true-black: var(--neutral-black); --light-blue: var(--rainbow-light-blue); --medium-blue: var(--rainbow-bright-blue); /* Surface gradient stops (neutralize teal surfaces in dark mode) */ --surface-gradient-sidebar-start: var(--medium-off-white); --surface-gradient-sidebar-mid: var(--soft-off-white); --surface-gradient-sidebar-end: var(--pale-off-white); --surface-gradient-soft-start: var(--bright-off-white); --surface-gradient-soft-mid: var(--soft-off-white); --surface-gradient-soft-end: var(--white); --surface-gradient-secondary-start: var(--bright-off-white); --surface-gradient-secondary-mid: var(--medium-off-white); --surface-gradient-secondary-end: var(--soft-off-white); --surface-gradient-tertiary-start: var(--off-white); --surface-gradient-tertiary-mid: var(--bright-off-white); --surface-gradient-tertiary-end: var(--medium-off-white); --surface-gradient-pill-start: var(--bright-off-white); --surface-gradient-pill-mid: var(--medium-off-white); --surface-gradient-pill-end: var(--soft-off-white); /* Text semantic colors (palette-driven) */ --text-color-primary: var(--strong-white-tint); --text-color-emphasis: var(--true-white); --text-color-secondary: var(--medium-white-tint); --text-color-muted: var(--soft-white-tint); --text-color-disabled: var(--white-glass-strong-40); --text-color-inverse: var(--true-white); --text-color-on-dark: var(--text-color-inverse); --text-color-on-dark-muted: var(--soft-white-tint); } /* Density-based spacing semantics */ :root { /* Density maps to spacing scale directly */ --dense: var(--space-1); /* 4px - tight */ --comfortable: var(--space-3); /* 12px - more breathing room */ } /* ========================================================================== LAYOUT QUALITY TOKENS — Alignment behavior descriptors ========================================================================== */ :root { /* Alignment aliases */ --align-horizontal-center: var(--align-center); --align-vertical-center: var(--align-center); --align-fill: var(--align-stretch); --align-stretch-fill: var(--align-fill); /* Justify distribution patterns */ --justify-spread: var(--justify-between); --justify-distribute: var(--justify-around); --justify-even: var(--justify-evenly); /* Third-party library tokens */ --radix-accordion-content-height: auto; /* Position values (for positioning) */ --position-center-inline: var(--half); --position-center-block: var(--half); --position-full: var(--full); /* Centering offsets (for transform translate) */ --offset-center-inline: calc(-1 * var(--half)); --offset-center-block: calc(-1 * var(--half)); /* Inset positioning */ --inset-block-below: auto; --inset-block-above: 0; /* Sizing keywords */ --size-100pct-percent: var(--full); } :root { /* Width scale: widths → --w-N (160, 200, 240, 280, 320, 360, 400, 480, 560, 640, 800) */ --width-160px: var(--w-160); --width-200px: var(--w-200); --width-240px: var(--w-240); --width-280px: var(--w-280); --width-320px: var(--w-320); --width-360px: var(--w-360); --width-400px: var(--w-400); --width-480px: var(--w-480); --width-560px: var(--w-560); --width-640px: var(--w-640); --width-800px: var(--w-800); /* Height scale: heights → --h-N (120, 150, 240, 400, 520) */ --height-120px: var(--h-120); --height-150px: var(--h-150); --height-240px: var(--h-240); --height-400px: var(--h-400); --height-520px: var(--h-520); /* ======================================================================== DIMENSION SCALES - Explicit pixel sizing aliases ======================================================================== */ /* Size scale: sizing → --size-N with finer granularity */ --size-8px: var(--size-8); /* 8px */ --size-10px: var(--size-10); /* 10px */ --size-12px: var(--size-12); /* 12px */ --size-14px: var(--size-14); /* 14px */ --size-16px: var(--size-16); /* 16px */ --size-18px: var(--size-18); /* 18px */ --size-20px: var(--size-20); /* 20px */ --size-22px: var(--size-22); /* 22px */ --size-24px: var(--size-24); /* 24px */ --size-28px: var(--size-28); /* 28px */ --size-32px: var(--size-32); /* 32px */ --size-36px: var(--size-36); /* 36px */ --size-40px: var(--size-40); /* 40px */ --size-44px: var(--size-44); /* 44px */ --size-48px: var(--size-48); /* 48px */ --size-52px: var(--size-52); /* 52px */ --size-56px: var(--size-56); /* 56px */ --size-60px: var(--size-60); /* 60px */ --size-64px: var(--size-64); /* 64px */ --size-70px: var(--size-70); /* 70px */ --size-80px: var(--size-80); /* 80px */ } /* ============================================================================= MARKETING QUALITY TOKENS Named values for the public-facing marketing design system. Raw fluid/rem values live here (quality tokens layer) — never used directly in 04/05. ============================================================================= */ :root { /* === FLUID TYPOGRAPHY (clamp-based responsive sizes) === */ --mkt-hero-title-size: clamp(2.25rem, 6vw, 3.75rem); --mkt-hero-subtitle-size: clamp(1rem, 2.5vw, 1.2rem); --mkt-section-title-size: clamp(1.75rem, 4vw, 2.75rem); --mkt-stat-number-size: clamp(2.5rem, 6vw, 3.5rem); --mkt-cta-title-size: clamp(2rem, 5vw, 3rem); --mkt-home-hero-title-size: clamp(2.5rem, 7vw, 4.5rem); /* === ICON FONT SIZES === */ --mkt-icon-font-size: var(--size-1-5rem); /* 1.5rem — emoji icons in feature/stat cards */ --mkt-icon-font-size-lg: var(--size-2rem); /* 2rem — emoji icons in join role cards */ /* === SHADOWS === */ --mkt-shadow-nav: 0 var(--size-1px) var(--size-4px) var(--black-glass-whisper-08); --mkt-shadow-image: 0 var(--size-8px) var(--size-32px) var(--black-glass-soft-12); --mkt-shadow-card: 0 var(--size-2px) var(--size-12px) var(--black-glass-subtle-05); --mkt-shadow-card-hover: 0 var(--size-6px) var(--size-24px) var(--black-glass-faint-10); --mkt-shadow-role-card: 0 var(--size-2px) var(--size-12px) var(--black-glass-subtle-05); --mkt-shadow-role-card-hover: 0 var(--size-4px) var(--size-20px) var(--black-glass-whisper-08); /* === CARD BORDER RADIUS === */ --mkt-card-radius: var(--size-14px); /* 14px — wider than --radius-standard (12px) */ /* === BACKGROUND POSITIONING OFFSETS === */ --mkt-bg-offset-neg-40: calc(-1 * var(--size-40px)); --mkt-bg-offset-neg-60: calc(-1 * var(--size-60px)); --mkt-bg-offset-neg-80: calc(-1 * var(--size-80px)); /* === CONTENT WIDTHS === */ --mkt-content-width-home: var(--size-680px); /* home hero content max-width */ } /* Motion Quality Tokens - describe animation FEEL not PURPOSE */ :root { /* ======================================================================== DURATION SCALE - Animation timing ======================================================================== */ --animation-instant: var(--duration-instant); /* 0ms - immediate */ --animation-quick: var(--duration-quick); /* 150ms - snappy */ --animation-smooth: var(--duration-standard); /* 200ms - standard */ --animation-deliberate: var(--duration-deliberate); /* 300ms - noticeable */ /* Duration aliases (generic descriptors) */ --duration-fast: var(--duration-quick); --duration-normal: var(--duration-standard); --duration-slow: var(--duration-deliberate); /* ======================================================================== EASING SCALE - Motion curves ======================================================================== */ --easing-smooth: var(--motion-easing-standard); /* ease - balanced */ --easing-snappy: var(--motion-easing-out); /* ease-out - decelerates */ --easing-gentle: var(--motion-easing-in-out); /* ease-in-out - smooth start/end */ --easing-linear: var(--motion-easing-linear); /* linear - constant speed */ /* ======================================================================== SCALE TRANSFORMS - Size changes ======================================================================== */ --scale-1-00x: var(--scale-multiplier-100); /* 1.00× - no change */ --scale-up-1-05x: var(--scale-multiplier-105); /* 1.05× - 5% larger */ --scale-up-1-08x: var(--scale-multiplier-108); /* 1.08× - 8% larger */ --scale-up-1-10x: var(--scale-multiplier-110); /* 1.10× - 10% larger */ --scale-down-0-95x: var(--scale-multiplier-95); /* 0.95× - 5% smaller */ --scale-down-0-80x: var(--scale-multiplier-80); /* 0.80× - 20% smaller */ /* ======================================================================== TRANSLATE TRANSFORMS - Position changes ======================================================================== */ /* Vertical slide distances */ --slide-distance-sm: var(--slide-y-sm); --slide-distance-md: var(--slide-y-md); /* Lift (elevation) effects */ --lift-subtle: var(--lift-sm); --lift-strong: var(--lift-md); /* ======================================================================== TRANSFORM ORIGINS - Rotation/scale anchor points ======================================================================== */ --bird-transform-origin: var(--bird-transform-origin-geometry); /* ======================================================================== SVG ANIMATION - Stroke properties ======================================================================== */ --save-indicator-stroke-dasharray: var(--save-indicator-stroke-dasharray-geometry); --save-indicator-stroke-dashoffset: var(--save-indicator-stroke-dashoffset-geometry); /* ======================================================================== ANIMATION SHORTHANDS - Common animation patterns ======================================================================== */ /* Skeleton shimmer duration (long-running, low-attention motion) */ --animation-duration-skeleton: var(--duration-skeleton); --animation-easing-shimmer: var(--motion-easing-in-out); /* Branded logo sheen animation */ --animation-logo-sheen: var(--logo-sheen-animation); --animation-logo-sheen-reverse: var(--logo-sheen-reverse-animation); --animation-bird-run: var(--bird-run-animation); /* ======================================================================== TRANSITIONS - Property-specific transitions ======================================================================== */ --transition-opacity-smooth: var(--transition-opacity); --transition-transform-smooth: var(--transition-transform); } /* Opacity Quality Tokens - describe TRANSPARENCY INTENSITY not PURPOSE */ :root { --opacity-none: var(--opacity-0); --opacity-hidden: var(--opacity-0); --opacity-faint: var(--opacity-20); --opacity-light: var(--opacity-40); --opacity-soft: var(--opacity-60); --opacity-medium: var(--opacity-soft); --opacity-muted-strong: var(--opacity-70); --opacity-subtle: var(--opacity-80); --opacity-vivid: var(--opacity-90); --opacity-strong: var(--opacity-90); --opacity-visible: var(--opacity-100); } /* Ring Quality Tokens - describe RING GEOMETRY not PURPOSE or COLOR */ :root { /* ======================================================================== RING OFFSET SCALE - Gap between element and ring ======================================================================== */ --ring-offset-sm: var(--space-0-5); /* 2px - small gap */ /* ======================================================================== RING WIDTH SCALE - Thickness of focus rings ======================================================================== */ /* Thin ring (2px spread) */ --ring-width-thin: var(--size-2); /* Standard ring (4px spread) */ --ring-width-standard: var(--size-4); /* ======================================================================== RING GEOMETRY BASE - Shadow geometry without color ======================================================================== */ --ring-geometry-base: var(--shadow-none), var(--ring-geometry-none); } /* Shadow Quality Tokens - Semantic elevation and depth effects */ :root { /* Depth shadows - elevation levels */ --shadow-raised: var(--shadow-depth-2); /* 2px offset - slightly elevated */ --shadow-elevated: var(--shadow-depth-panel); /* Panel/card elevation */ --shadow-floating: var(--shadow-glow-depth-3); /* Glow effect for floating elements */ } /* Sizing quality tokens - describe SIZE (xs, sm, md, lg) not PURPOSE */ :root { /* sizing - explicit pixel mappings for component sizing */ --size-0-3px: var(--size-0-3); /* 0.3px */ --size-0-5px: var(--size-0-5); /* 0.5px */ --size-1px: var(--size-1); /* 1px */ --size-2px: var(--size-2); /* 2px */ --size-3px: var(--size-3); /* 3px */ --size-4px: var(--size-4); /* 4px */ --size-5px: var(--size-5); /* 5px */ --size-6px: var(--size-6); /* 6px */ --size-7px: var(--size-7); /* 7px */ --size-8px: var(--size-8); /* 8px */ --size-9px: var(--size-9); /* 9px */ --size-10px: var(--size-10); /* 10px */ --size-10-5px: var(--size-10-5); /* 10.5px */ --size-11px: var(--size-11); /* 11px */ --size-12px: var(--size-12); /* 12px */ --size-13px: var(--size-13); /* 13px */ --size-14px: var(--size-14); /* 14px */ --size-16px: var(--size-16); /* 16px */ --size-18px: var(--size-18); /* 18px */ --size-20px: var(--size-20); /* 20px */ --size-22px: var(--size-22); /* 22px */ --size-24px: var(--size-24); /* 24px - standard icon button */ --size-26px: var(--size-26); /* 26px - small avatar */ --size-28px: var(--size-28); /* 28px - avatar button (slightly larger) */ --size-32px: var(--size-32); /* 32px */ --size-36px: var(--size-36); /* 36px */ --size-40px: var(--size-40); /* 40px */ --size-44px: var(--size-44); /* 44px */ --size-46px: var(--size-46); /* 46px */ --size-48px: var(--size-48); /* 48px */ --size-52px: var(--size-52); /* 52px */ --size-56px: var(--size-56); /* 56px */ --size-60px: var(--size-60); /* 60px */ --size-62px: var(--size-62); /* 62px */ --size-64px: var(--size-64); /* 64px */ --size-70px: var(--size-70); /* 70px */ --size-80px: var(--size-80); /* 80px */ --size-96px: var(--size-96); /* 96px */ --size-100px: var(--size-100); /* 100px */ --size-120px: var(--size-120); /* 120px */ --size-140px: var(--size-140); /* 140px */ --size-148px: var(--size-148, 148px); /* 148px */ --size-150px: var(--size-150, 150px); /* 150px */ --size-160px: var(--size-160); /* 160px */ --size-164px: var(--size-164, 164px); /* 164px */ --size-180px: var(--size-180); /* 180px */ --size-196px: var(--size-196); /* 196px */ --size-200px: var(--size-200); /* 200px */ --size-220px: var(--size-220, 220px); /* 220px */ --size-240px: var(--size-240); /* 240px */ --size-260px: var(--size-260, 260px); /* 260px */ --size-280px: var(--size-280); /* 280px */ --size-300px: var(--size-300); /* 300px */ --size-310px: var(--size-310, 310px); /* 310px */ --size-320px: var(--size-320); /* 320px */ --size-340px: var(--size-340); /* 340px */ --size-360px: var(--size-360); /* 360px */ --size-380px: var(--size-380); /* 380px */ --size-400px: var(--size-400); /* 400px */ --size-420px: var(--size-420); /* 420px */ --size-430px: var(--size-430, 430px); /* 430px */ --size-440px: var(--size-440); /* 440px */ --size-480px: var(--size-480); /* 480px */ --size-500px: var(--size-500); /* 500px */ --size-520px: var(--size-520, 520px); /* 520px */ --size-560px: var(--size-560, 560px); /* 560px */ --size-580px: var(--size-580, 580px); /* 580px */ --size-600px: var(--size-600); /* 600px */ --size-680px: var(--size-680); --size-720px: var(--size-720); /* 720px */ --size-760px: var(--size-760); /* 760px */ --size-900px: var(--size-900); /* 900px */ --size-920px: var(--size-920, 920px); /* 920px */ --size-980px: var(--size-980, 980px); /* 980px */ --size-1240px: var(--size-1240, 1240px); /* 1240px */ --size-999px: var(--size-999); /* 999px */ --size-9999px: var(--size-9999); /* 9999px */ /* Rem sizing aliases */ --size-0-25rem: var(--size-rem-0-25); --size-1-1rem: var(--size-rem-1-1); --size-1-25rem: var(--size-rem-1-25); --size-1-5rem: var(--size-rem-1-5); --size-2rem: var(--size-rem-2); --size-12rem: var(--size-rem-12); --size-18rem: var(--size-rem-18); /* Width sizing - explicit pixel mappings for widths */ --width-12px: var(--w-12); /* 12px */ --width-16px: var(--w-16); /* 16px */ --width-32px: var(--w-32); /* 32px */ --width-36px: var(--w-36); /* 36px */ --width-56px: var(--w-56); /* 56px */ --width-60px: var(--w-60); /* 60px */ --width-80px: var(--w-80); /* 80px */ --width-100px: var(--w-100); /* 100px */ --width-120px: var(--w-120); /* 120px */ --width-140px: var(--w-140); /* 140px */ --width-150px: var(--w-150); /* 150px */ --width-160px: var(--w-160); /* 160px */ --width-180px: var(--w-180); /* 180px */ --width-200px: var(--w-200); /* 200px */ --width-220px: var(--w-220); /* 220px */ --width-240px: var(--w-240); /* 240px */ --width-260px: var(--w-260, 260px); /* 260px */ --width-280px: var(--w-280); /* 280px */ --width-288px: var(--w-288, 288px); /* 288px */ --width-300px: var(--w-300); /* 300px */ --width-320px: var(--w-320); /* 320px */ --width-360px: var(--w-360); /* 360px */ --width-380px: var(--w-380); /* 380px */ --width-400px: var(--w-400); /* 400px */ --width-420px: var(--w-420); /* 420px */ --width-430px: var(--w-430, 430px); /* 430px */ --width-480px: var(--w-480); /* 480px */ --width-560px: var(--w-560); /* 560px */ --width-640px: var(--w-640); /* 640px */ --width-643px: var(--w-643, 643px); /* 643px */ --width-676px: var(--w-676, 676px); /* 676px */ --width-800px: var(--w-800); /* 800px */ --width-980px: var(--w-980, 980px); /* 980px */ --width-1000px: var(--w-1000); /* 1000px */ --width-1200px: var(--w-1200); /* 1200px */ --width-1240px: var(--w-1240, 1240px); /* 1240px */ --width-1296px: var(--w-1296, 1296px); /* 1296px */ --width-1320px: var(--w-1320, 1320px); /* 1320px */ --width-744px: var(--w-744, 744px); /* 744px */ --width-768px: var(--w-768, 768px); /* 768px */ --width-70-percent: var(--seventy-percent); /* 70% - chat message max-width */ /* Height sizing - explicit pixel mappings for heights */ --height-12px: var(--h-12); /* 12px */ --height-16px: var(--h-16); /* 16px */ --height-32px: var(--h-32); /* 32px */ --height-36px: var(--h-36); /* 36px */ --height-56px: var(--h-56); /* 56px */ --height-60px: var(--h-60); /* 60px */ --height-80px: var(--h-80); /* 80px */ --height-90px: var(--h-90); /* 90px */ --height-100px: var(--h-100); /* 100px */ --height-120px: var(--h-120); /* 120px */ --height-140px: var(--h-140); /* 140px */ --height-150px: var(--h-150); /* 150px */ --height-200px: var(--h-200); /* 200px */ --height-220px: var(--h-220); /* 220px */ --height-300px: var(--h-300); /* 300px */ --height-320px: var(--h-320); /* 320px */ --height-400px: var(--h-400); /* 400px */ --height-600px: var(--h-600); /* 600px */ --height-720px: var(--h-720); /* 720px */ /* ======================================================================== POSITIONING & TRANSFORM - Layout and micro-interactions ======================================================================== */ /* Inset scale: positioning offsets → 0, 100% */ --inset-0: 0; --inset-full: var(--full); /* 100% - use for absolute positioning */ /* Transform scale: offsets → --space-N (1, 2) */ --transform-nudge: var(--space-1); /* 4px - small offset */ --transform-lift: calc(-1 * var(--space-1)); /* -4px - upward motion */ --transform-drop: var(--space-2); /* 8px - downward motion */ /* ======================================================================== FLEXIBLE SIZING - Relative and content-based dimensions ======================================================================== */ /* Percentage scale: container filling → primitives (33.33%, 66.67%, 100%) */ --size-third: var(--third); --size-50pct: var(--half); --size-56pct: var(--fifty-six-percent); /* 56% */ --size-60pct: var(--sixty-percent); /* 60% */ --size-67pct: var(--two-thirds); --size-75pct: var(--three-quarters); --size-78pct: var(--seventy-eight-percent); /* 78% */ --size-100pct: var(--full); /* 100% - fills parent container */ --size-200pct: var(--two-hundred-percent); /* 200% - extended tracks (e.g. shimmer) */ /* Content-based sizing: intrinsic dimensions → keyword primitives */ --size-auto: var(--auto); --size-fit: var(--fit-content); --size-max: var(--max-content); /* Flex scale: flex → --flex-N (0, 1) */ --flex-grow-none: var(--flex-0); --flex-grow-standard: var(--flex-1); --flex-shrink-none: var(--flex-0); --flex-shrink-standard: var(--flex-1); /* ======================================================================== UTILITY TOKENS - Special cases and edge scenarios ======================================================================== */ /* Viewport scale: full viewport dimensions (use sparingly) */ --size-viewport-full: var(--viewport-full-width); --size-viewport-height-full: var(--viewport-full-height); --size-viewport-width-dynamic: var(--viewport-width); --size-viewport-height-dynamic: var(--viewport-height); /* Screen max-heights for */ --size-max-height-screen-80: var(--max-height-screen-80); --size-max-height-screen-85: var(--max-height-screen-85); --size-max-height-screen-90: var(--max-height-screen-90); --size-max-height-screen-60: var(--max-height-screen-60); --size-max-height-screen-66-666: var(--max-height-screen-66-666); --size-max-height-screen-70: var(--max-height-screen-70); --size-max-height-screen-72: var(--max-height-screen-72); --size-max-height-screen-30: var(--max-height-screen-30); --size-max-width-screen-80: var(--max-width-screen-80); --size-max-width-screen-96: var(--max-width-screen-96); /* Viewport-driven component sizing */ --size-viewport-modal-max-width: var(--viewport-modal-max-width); --size-viewport-modal-margin-block: var(--viewport-modal-margin-block); --size-viewport-modal-margin-inline: var(--viewport-modal-margin-inline); --size-viewport-photo-viewer-width: var(--viewport-photo-viewer-width); --size-viewport-tooltip-max-width: var(--viewport-tooltip-max-width); /* Percentage sizing aliases */ --size-25pct: var(--quarter); --size-third: var(--third); --size-40pct: var(--forty-percent); --size-50pct: var(--half); --size-67pct: var(--two-thirds); --size-75pct: var(--three-quarters); --size-80pct: var(--eighty-percent); --size-90pct: var(--ninety-percent); --size-95pct: var(--ninety-five-percent); --size-100pct: var(--full); /* 100% */ /* Breakpoint scale: semantic viewport thresholds */ --breakpoint-mobile-max: var(--viewport-tablet); /* 768px */ --breakpoint-tablet: var(--viewport-tablet); --breakpoint-tablet-max: var(--viewport-laptop); /* 1024px */ --breakpoint-desktop: var(--viewport-laptop); } :root { /* Px-based spacing aliases (preferred over t-shirt aliases) MOBILE-FIRST: Default values are mobile, overridden at @media (min-width: 768px) Policy: DOC-FE-MOBILE-FIRST */ --space-0-5px: var(--space-0-5); --space-1px: var(--space-1); --space-1-5px: var(--space-1-5); --space-2px: var(--space-2); --space-2-5px: var(--space-2-5); --space-3px: var(--space-3); --space-3-5px: var(--space-3-5); --space-4px: var(--space-4); --space-5px: var(--space-5); --space-6px: var(--space-6); --space-7px: var(--space-7); --space-8px: var(--space-8); --space-9px: var(--space-2); /* Mobile: 6px → Tablet+: 9px */ --space-10px: var(--space-10); --space-12px: var(--space-3); /* Mobile: 9px → Tablet+: 12px */ --space-14px: var(--space-14); --space-15px: var(--space-3); /* Mobile: 9px → Tablet+: 15px */ --space-16px: var(--space-4); /* Mobile: 12px → Tablet+: 16px */ --space-18px: var(--space-4); /* Mobile: 12px → Tablet+: 18px */ --space-20px: var(--space-5); /* Mobile: 15px → Tablet+: 20px */ --space-22px: var(--space-5-5); /* 22px */ --space-24px: var(--space-6); /* Mobile: 18px → Tablet+: 24px */ --space-28px: var(--space-7); /* 28px */ --space-32px: var(--space-8); /* 32px */ --space-48px: var(--space-12); /* Mobile: 36px → Tablet+: 48px */ /* Fluid spacing clamps */ --space-fluid-inline-0-md: clamp(var(--space-0), var(--space-fluid-2vw), var(--space-3)); --space-fluid-stack-md-lg: clamp(var(--space-2), var(--space-fluid-5vw), var(--space-4)); /* Modal-specific fluid padding */ --modal-padding-block-fluid: clamp(var(--space-2), var(--space-fluid-3vw), var(--space-4)); --modal-padding-inline-fluid: clamp(var(--space-2), var(--space-fluid-4vw), var(--space-5)); /* Touch target minimum height (WCAG 2.5.5: 44×44px min) */ --touch-target-min: var(--size-44px); } /* TABLET+ responsive override: looser spacing for larger viewports */ @media (min-width: 768px) { :root { --space-9px: var(--space-3); /* 9px */ --space-12px: var(--space-4); /* 12px */ --space-15px: var(--space-5); /* 15px */ --space-16px: var(--space-16); /* 16px */ --space-18px: var(--space-6); /* 18px */ --space-20px: var(--space-20); /* 20px */ --space-22px: var(--space-5-5); /* 22px */ --space-24px: var(--space-8); /* 24px */ --space-28px: var(--space-7); /* 28px */ --space-32px: var(--space-8); /* 32px */ --space-48px: var(--space-16); /* 48px */ /* Fluid clamps adjust for tablet+ */ --space-fluid-stack-md-lg: clamp(var(--space-3), var(--space-fluid-5vw), var(--space-5)); --modal-padding-block-fluid: clamp(var(--space-3), var(--space-fluid-3vw), var(--space-6)); --modal-padding-inline-fluid: clamp(var(--space-4), var(--space-fluid-4vw), var(--space-8)); } } /* Typography Quality Tokens - describe TEXT APPEARANCE not PURPOSE */ :root { /* ======================================================================== FONT SIZE SCALE - Primary scale (pixel-based naming) ======================================================================== */ --font-size-density-step: 0px; --font-size-base-10: var(--size-10); --font-size-base-11: var(--size-11); --font-size-base-12: var(--size-12); --font-size-base-13: var(--size-13); --font-size-base-14: var(--size-14); --font-size-base-15: var(--size-15); --font-size-base-16: var(--size-16); --font-size-base-17: var(--size-17); --font-size-base-18: var(--size-18); --font-size-base-19: var(--size-19, 19px); --font-size-base-20: var(--size-20); --font-size-base-21: var(--size-21); --font-size-base-22: var(--size-22); --font-size-base-24: var(--size-24); --font-size-base-25: var(--size-25, 25px); --font-size-base-26: var(--size-26); --font-size-base-28: var(--size-28); --font-size-base-30: var(--size-30); --font-size-base-32: var(--size-32); --font-size-base-33: var(--size-33, 33px); --font-size-base-36: var(--size-36); --font-size-base-38: var(--size-38, 38px); --font-size-base-40: var(--size-40); --font-size-base-48: var(--size-48); --font-size-base-56: var(--size-56); --font-size-base-60: var(--size-60); --font-size-base-64: var(--size-64); --font-size-base-72: var(--size-72); --font-size-10: calc(var(--font-size-base-10) + var(--font-size-density-step)); --font-size-11: calc(var(--font-size-base-11) + var(--font-size-density-step)); --font-size-12: calc(var(--font-size-base-12) + var(--font-size-density-step)); --font-size-13: calc(var(--font-size-base-13) + var(--font-size-density-step)); --font-size-14: calc(var(--font-size-base-14) + var(--font-size-density-step)); --font-size-15: calc(var(--font-size-base-15) + var(--font-size-density-step)); --font-size-16: calc(var(--font-size-base-16) + var(--font-size-density-step)); --font-size-17: calc(var(--font-size-base-17) + var(--font-size-density-step)); --font-size-18: calc(var(--font-size-base-18) + var(--font-size-density-step)); --font-size-19: calc(var(--font-size-base-19) + var(--font-size-density-step)); --font-size-20: calc(var(--font-size-base-20) + var(--font-size-density-step)); --font-size-21: calc(var(--font-size-base-21) + var(--font-size-density-step)); --font-size-22: calc(var(--font-size-base-22) + var(--font-size-density-step)); --font-size-24: calc(var(--font-size-base-24) + var(--font-size-density-step)); --font-size-25: calc(var(--font-size-base-25) + var(--font-size-density-step)); --font-size-26: calc(var(--font-size-base-26) + var(--font-size-density-step)); --font-size-28: calc(var(--font-size-base-28) + var(--font-size-density-step)); --font-size-30: calc(var(--font-size-base-30) + var(--font-size-density-step)); --font-size-32: calc(var(--font-size-base-32) + var(--font-size-density-step)); --font-size-33: calc(var(--font-size-base-33) + var(--font-size-density-step)); --font-size-36: calc(var(--font-size-base-36) + var(--font-size-density-step)); --font-size-38: calc(var(--font-size-base-38) + var(--font-size-density-step)); --font-size-40: calc(var(--font-size-base-40) + var(--font-size-density-step)); --font-size-48: calc(var(--font-size-base-48) + var(--font-size-density-step)); --font-size-56: calc(var(--font-size-base-56) + var(--font-size-density-step)); --font-size-60: calc(var(--font-size-base-60) + var(--font-size-density-step)); --font-size-64: calc(var(--font-size-base-64) + var(--font-size-density-step)); --font-size-72: calc(var(--font-size-base-72) + var(--font-size-density-step)); /* ======================================================================== FONT FAMILY - Typeface selection ======================================================================== */ --font-family-primary: var(--font-sans); /* System sans-serif stack */ --font-family-mono: var(--font-mono); /* Monospace for code */ --font-family-hero: var(--font-hero); /* Display / hero font */ /* ======================================================================== FONT WEIGHT SCALE - Text heaviness ======================================================================== */ --weight-light: var(--font-weight-light); --weight-normal: var(--font-weight-normal); --weight-medium: var(--font-weight-medium); --weight-semibold: var(--font-weight-semibold); --weight-bold: var(--font-weight-bold); /* ======================================================================== LINE HEIGHT SCALE - Vertical spacing ======================================================================== */ --line-height-110pct: var(--line-height-110); /* 110% of font size */ --line-height-120pct: var(--line-height-120); /* 120% of font size */ --line-height-125pct: var(--line-height-125); /* 125% of font size */ --line-height-130pct: var(--line-height-130); /* 130% of font size */ --line-height-138pct: var(--line-height-138); /* 138% of font size */ --line-height-150pct: var(--line-height-150); /* 150% of font size */ --line-height-160pct: var(--line-height-160); /* 160% of font size */ --line-height-175pct: var(--line-height-175); /* 175% of font size */ /* Legacy quality names (use percent names above) */ --line-height-tight: var(--line-height-120pct); --line-height-dense: var(--line-height-130pct); --line-height-comfortable: var(--line-height-138pct); --line-height-normal: var(--line-height-150pct); --line-height-standard: var(--line-height-150pct); --line-height-relaxed: var(--line-height-175pct); /* ======================================================================== LETTER SPACING SCALE - Character spacing (tracking) ======================================================================== */ --tracking-tight: var(--letter-spacing-tight); /* -0.01em - condensed */ --tracking-wide: var(--letter-spacing-wide); /* 0.02em - expanded */ --tracking-sm: var(--letter-spacing-tight); /* -0.01em - condensed */ --tracking-md: var(--letter-spacing-normal); /* 0 - normal */ --tracking-lg: var(--letter-spacing-widest); /* 0.05em - expanded */ /* ======================================================================== COMBINED TOKENS - Font shorthand (size / line-height) ======================================================================== */ /* Page header watermark title (semantic combo) */ --page-header-title-font-size: var(--font-size-40); --page-header-title-line-height: var(--line-height-120pct); /* Approximate block height for a single-line page header title */ --page-header-title-block-size: calc( var(--page-header-title-font-size) * var(--page-header-title-line-height) ); /* Section tabs (Billing, Events, etc.) block size Approximate total vertical footprint: text line box + vertical padding from .section-tabs--child and .section-tabs__tab. */ --section-tabs-font-size: var(--font-size-14); --section-tabs-block-size: calc( var(--section-tabs-font-size) * var(--section-tabs-line-height) + (2 * var(--space-1px)) + (2 * var(--space-0-5px)) ); /* ======================================================================== LINE CLAMP - Text truncation ======================================================================== */ --line-clamp-1: var(--line-clamp-1-value); --line-clamp-2: var(--line-clamp-2-value); --line-clamp-3: var(--line-clamp-3-value); --line-clamp-4: var(--line-clamp-4-value); --line-clamp-5: var(--line-clamp-5-value); /* ======================================================================== MOBILE SEMANTIC FONT SIZES Use these in mobile-only media query blocks for mobile-appropriate sizing. These replace the deprecated t-shirt aliases in mobile contexts. ======================================================================== */ --font-size-mobile-2xs: var(--font-size-12); /* 12px — minimum visible label */ --font-size-mobile-xs: var(--font-size-12); /* 12px — dense chip/tag */ --font-size-mobile-sm: var(--font-size-14); /* 14px — secondary body, table data */ --font-size-mobile-base: var(--font-size-14); /* 14px — primary body copy */ --font-size-mobile-md: var(--font-size-15); /* 15px — emphasized body */ --font-size-mobile-lg: var(--font-size-16); /* 16px — large labels, primary headers */ --font-size-mobile-xl: var(--font-size-18); /* 18px — sub-headings */ --font-size-mobile-2xl: var(--font-size-20); /* 20px — headings */ } /* Width Quality Tokens - Character-based width scale for table columns and form fields */ :root { /* Character width scale - maps to ch unit primitives */ --width-1ch: var(--w-1ch); --width-2ch: var(--w-2ch); --width-3ch: var(--w-3ch); --width-4ch: var(--w-4ch); --width-5ch: var(--w-5ch); --width-6ch: var(--w-6ch); --width-7ch: var(--w-7ch); --width-8ch: var(--w-8ch); --width-9ch: var(--w-9ch); --width-10ch: var(--w-10ch); --width-11ch: var(--w-11ch); --width-12ch: var(--w-12ch); --width-13ch: var(--w-13ch); --width-14ch: var(--w-14ch); --width-15ch: var(--w-15ch); --width-16ch: var(--w-16ch); --width-17ch: var(--w-17ch); --width-18ch: var(--w-18ch); --width-19ch: var(--w-19ch); --width-20ch: var(--w-20ch); --width-21ch: var(--w-21ch); --width-22ch: var(--w-22ch); --width-23ch: var(--w-23ch); --width-24ch: var(--w-24ch); --width-25ch: var(--w-25ch); --width-26ch: var(--w-26ch); --width-27ch: var(--w-27ch); --width-28ch: var(--w-28ch); --width-29ch: var(--w-29ch); --width-30ch: var(--w-30ch); --width-31ch: var(--w-31ch); --width-32ch: var(--w-32ch); --width-33ch: var(--w-33ch); --width-34ch: var(--w-34ch); --width-35ch: var(--w-35ch); --width-36ch: var(--w-36ch); --width-37ch: var(--w-37ch); --width-38ch: var(--w-38ch); --width-39ch: var(--w-39ch); --width-40ch: var(--w-40ch); --width-41ch: var(--w-41ch); --width-42ch: var(--w-42ch); --width-43ch: var(--w-43ch); --width-44ch: var(--w-44ch); --width-45ch: var(--w-45ch); --width-46ch: var(--w-46ch); --width-47ch: var(--w-47ch); --width-48ch: var(--w-48ch); --width-49ch: var(--w-49ch); --width-50ch: var(--w-50ch); --width-100ch: var(--w-100ch); /* Special width values */ --width-auto: auto; --width-none: none; } /* App Header semantic aliases */ :root { --app-header-height: var(--size-80px); --app-header-shadow: var(--shadow-soft); /* Light mode keeps the canonical secondary-surface ramp. Dark mode uses its own separate ramp below. */ --app-header-gradient: var(--secondary-surface-gradient); } :root.dark { --app-header-gradient: linear-gradient( var(--angle-diagonal), var(--teal-slate-700) var(--stop-start), var(--teal-slate-800) var(--stop-mid), var(--teal-slate-950) var(--stop-end) ); } /* ============================================================================ Brand Semantic Tokens Centralized brand color variables mapped to palette tokens ========================================================================== */ :root { --brand-teal: var(--soft-teal); --brand-teal-hover: var(--strong-teal); --brand-teal-light: var(--light-teal); --brand-primary: var(--strong-teal); --brand-primary-hover: var(--vibrant-teal); --brand-primary-active: var(--deep-teal); /* App-specific brand effects (palette-driven via glow tokens) */ --color-bird-glow: var(--strong-teal-glow); } :root.dark { --brand-teal: var(--soft-teal); --brand-teal-hover: var(--strong-teal); --brand-teal-light: var(--light-teal); --brand-primary: var(--strong-teal); --brand-primary-hover: var(--vibrant-teal); --brand-primary-active: var(--deep-teal); /* App-specific brand effects (palette-driven via glow tokens) */ --color-bird-glow: var(--strong-teal-glow); } .button-row { display: flex; align-items: center; justify-content: center; gap: var(--space-5px); flex-wrap: wrap; width: var(--size-100pct); } /* ============================================================================= CHART SEMANTIC TOKENS Charts use quality tokens directly - no semantic tokens needed ============================================================================= */ /* ============================================================================= CHAT / COMMS SEMANTIC TOKENS Centralize sizing + spacing used across chat surfaces (ops chat tray, conversation views, thread viewer modals, etc). ============================================================================= */ :root { /* Message list */ --chat-messages-padding: var(--space-9px); --chat-messages-gap: var(--space-1-5px); /* Bubble sizing */ --chat-bubble-max-cqi: 85cqi; --chat-bubble-max-measure: 68ch; /* Bubble chrome */ --chat-bubble-padding-y: var(--space-1-5px); --chat-bubble-padding-x: var(--space-9px); --chat-bubble-radius: var(--radius-standard); --chat-bubble-radius-group: var(--radius-standard); /* Bubble type */ --chat-bubble-font-size: var(--font-size-12); --chat-bubble-line-height: var(--line-height-normal); /* Composer */ --chat-composer-padding: var(--space-9px); --chat-composer-gap: var(--space-9px); } @media (max-width: 767px) { :root { --chat-messages-padding: var(--space-1-5px); --chat-messages-gap: var(--space-1px); --chat-bubble-padding-y: var(--space-1px); --chat-bubble-padding-x: var(--space-9px); --chat-bubble-radius: var(--radius-standard); --chat-bubble-font-size: var(--font-size-12); --chat-composer-padding: var(--space-9px); --chat-composer-gap: var(--space-1-5px); } } /* ============================================================================ TILE — Visual card component. Owns surface, border, shadow, shine, size, and interaction states. list-item is the interaction wrapper only; tile owns all visual chrome. ============================================================================ */ .tile { display: flex; align-items: flex-start; text-align: left; position: relative; width: var(--size-100pct); max-width: var(--size-100pct); flex: 0 1 auto; height: auto; min-height: var(--size-36px); padding: var(--space-1-5px) var(--space-9px); gap: var(--space-1px); white-space: normal; color: var(--text-primary); cursor: default; background: var(--tile-surface); border: var(--input-border-width-thin) solid var(--tile-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-soft); overflow: hidden; transition: background var(--animation-smooth) var(--easing-smooth), border-color var(--animation-smooth) var(--easing-smooth), box-shadow var(--animation-smooth) var(--easing-smooth), transform var(--animation-smooth) var(--easing-smooth); } /* Shine overlay */ .tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--size-50pct); background: var(--overlay-shine-subtle); pointer-events: none; z-index: 1; opacity: 0.6; transition: opacity var(--animation-quick) var(--easing-smooth); } /* ---- Interactive modifier ---- */ .tile--interactive { cursor: pointer; } .tile--interactive:hover { transform: translateY(var(--lift-subtle)); background: var(--tile-surface-hover); box-shadow: var(--shadow-moderate), var(--ring-teal); } .tile--interactive:hover::after { opacity: 0.8; } /* ---- Active state ---- */ .tile--active { background: var(--tile-surface-active); border-color: var(--medium-teal); box-shadow: var(--shadow-moderate); transform: translateY(var(--lift-subtle)); cursor: pointer; } /* ---- Surface variants (override base; placed after active so cascade wins) ---- */ .tile--surface-frosted-light { background: var(--white-glass-frosted-90); border-color: var(--teal-dark-glass-clear-18); transform: none; } .tile--surface-frosted-light:hover { background: var(--white-glass-frosted-90); border-color: var(--teal-dark-glass-light-20); transform: none; } .tile--surface-glass-dark { background: var(--gradient-dark-glass-diagonal); border-color: var(--white-glass-medium-30); color: var(--text-on-dark); } .tile--surface-glass-dark:hover { background: var(--gradient-dark-glass-diagonal); border-color: var(--white-glass-strong-40); } /* ---- Variant ---- */ .tile--on-dark { color: var(--text-on-dark); } /* ---- Conversation-card: no lift, no shine ---- */ .tile--conversation-card { transform: none; } .tile--conversation-card::after { content: none; } /* ---- Content wrapper ---- */ .tile__content { display: flex; align-items: center; gap: var(--space-1-5px); flex: 1 1 auto; min-width: 0; position: relative; z-index: 2; } /* ---- Grid layout ---- */ .tile__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1-5px); align-items: start; width: var(--size-100pct); } .tile__left { display: flex; align-items: center; flex-shrink: 0; } .tile__right { display: flex; align-items: center; flex-shrink: 0; } .tile__left { justify-content: center; } .tile__right { justify-content: flex-end; } .tile__center { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } /* ---- Mobile ---- */ @media (max-width: 767px) { .tile--interactive { min-height: var(--size-44px); } } :root { /* FAB (Floating Action Button) sizing - consistent 40px for all FABs */ --fab-size-fluid: var(--size-40px); --fab-offset-fluid: var(--size-6px); --fab-offset-inline-start: calc(var(--fab-offset-fluid) + env(safe-area-inset-left, 0px)); --fab-offset-inline-end: calc(var(--fab-offset-fluid) + env(safe-area-inset-right, 0px)); --fab-offset-block-start: calc(var(--fab-offset-fluid) + env(safe-area-inset-top, 0px)); --fab-offset-block-end: calc(var(--fab-offset-fluid) + env(safe-area-inset-bottom, 0px)); /* FAB z-index */ --z-fab: var(--z-900); } /* Focus Ring Semantic Tokens - describe PURPOSE with color */ :root { /* ======================================================================== COLORED RINGS - Purpose-based ring colors ======================================================================== */ /* Primary teal rings (default interactive states) */ --ring-teal-thin: var(--shadow-none), var(--ring-geometry-none) var(--ring-width-thin) var(--teal-400); --ring-teal: var(--shadow-none), var(--ring-geometry-none) var(--ring-width-standard) var(--teal-400); /* Neutral gray rings ( states) */ --ring-gray: var(--shadow-none), var(--ring-geometry-none) var(--ring-width-standard) var(--neutral-gray-300); /* Danger / error rings (validation errors) */ --ring-red: var(--shadow-none), var(--ring-geometry-none) var(--ring-width-standard) var(--red-500); /* Strong teal accent rings (emphasis states) */ --ring-teal-darker: var(--shadow-none), var(--ring-geometry-none) var(--ring-width-standard) var(--teal-600); /* Sunset / warning rings (caution states) */ --ring-sunset: var(--shadow-none), var(--ring-geometry-none) var(--ring-width-standard) var(--sunset-600); /* ======================================================================== FOCUS RING ALIASES - Interactive control focus states ======================================================================== */ /* Primary focus rings for interactive controls (inputs, buttons, switches) */ --focus-ring-subtle: var(--ring-teal-thin); --focus-ring: var(--ring-teal); /* Danger / error focus ring */ --focus-ring-danger: var(--ring-red); /* ======================================================================== ACCESSIBILITY UTILITIES ======================================================================== */ /* Visually-hidden clip-path for SR-only elements */ --clip-visually-hidden: var(--clip-visually-hidden-geometry); } .tile--interactive:focus-visible { outline: none; box-shadow: var(--ring-teal); } .list-item:focus-visible { outline: none; box-shadow: var(--ring-teal); } .panel:focus { outline: none; box-shadow: var(--focus-ring-subtle); } .input__toggle-button:focus-visible { outline: none; box-shadow: var(--focus-ring-subtle); } .input__emoji-button:focus-visible { outline: none; box-shadow: var(--focus-ring-subtle); } .input__emoji-option:focus-visible { outline: none; box-shadow: var(--focus-ring-subtle); } /** * Form Semantic Tokens * Semantic color tokens for inputs and form controls. */ :root { /* Canonical background for standard inputs */ --input-background: var(--palest-teal); /* Canonical border for inputs, selects, and search boxes on */ --input-border: var(--pale-teal); --form-grid-col-width: 12ch; /* Form section and layout customization tokens (can be overridden in specific contexts) */ --form-section-mb: var(--space-9px); --form-section-divider-display: block; --form-actions-gc: auto; } /* Semantic gradient token aliases */ :root { --active-surface-gradient: var(--gradient-teal-diagonal-active-strong); --secondary-surface-gradient: var(--gradient-teal-diagonal-secondary-light); --tiertiary-surface-gradient: var(--gradient-teal-diagonal-tiertiary-light); /* Inactive surface for – lightest diagonal teal */ --inactive-surface-gradient: var(--gradient-teal-diagonal-tiertiary-light); --hover-surface-gradient: var(--gradient-teal-diagonal-hover-glass-soft); --active-surface-gradient-dark: var(--gradient-slate-diagonal-active-strong); --hover-surface-gradient-dark: var(--gradient-slate-diagonal-hover-glass-soft); } /* ========================================================================== GRID SEMANTIC TOKENS Canonical grid template and span patterns Used by 04-utility-classes/grid-utilities.scss ========================================================================== */ :root { /* Column count templates */ --grid-template-cols-1: var(--grid-template-1fr); --grid-template-cols-2: var(--grid-template-2fr); --grid-template-cols-3: var(--grid-template-3fr); --grid-template-cols-4: var(--grid-template-4fr); --grid-template-cols-12: var(--grid-template-12fr); /* Responsive 3-column pattern (mobile → tablet → desktop) */ --grid-template-responsive-3-base: var(--grid-template-1fr); --grid-template-responsive-3-tablet: var(--grid-template-2fr); --grid-template-responsive-3-desktop: var(--grid-template-3fr); --grid-template-responsive-3-widescreen: var(--grid-template-3fr); /* Dashboard / draggable tiles grid */ --grid-template-dashboard-tiles-base: var(--grid-template-1fr); --grid-template-dashboard-tiles-tablet: var(--grid-template-dashboard-tiles-tablet-fr); --grid-template-dashboard-tiles-desktop: var(--grid-template-dashboard-tiles-desktop-fr); --grid-template-dashboard-tiles-wide: var(--grid-template-dashboard-tiles-wide-fr); --grid-dashboard-tile-min-height-semantic: var(--grid-dashboard-tile-min-height); /* Calendar grid patterns */ --grid-template-calendar-month: var(--grid-template-calendar-month-fr); --grid-auto-rows-calendar-month: var(--grid-auto-rows-calendar-month-fr); --grid-template-calendar-week: var(--grid-template-calendar-week-fr); --grid-template-rows-calendar-week: var(--grid-template-rows-calendar-week-fr); --grid-template-calendar-day: var(--grid-template-calendar-day-fr); --grid-template-rows-calendar-day: var(--grid-template-rows-calendar-day-fr); /* Full-span row helper (start at first column line, end at last) */ --grid-span-full-start: var(--grid-span-full-start-raw); --grid-span-full-end: var(--grid-span-full-end-raw); } /* ============================================================================= IMAGE PRIMITIVE - STRICT BEM, NO CLASS STACKING Single class per use case, all properties bundled ============================================================================= */ .image { display: block; width: var(--size-100pct); margin: 0; } .image__media { width: var(--size-100pct); height: auto; object-fit: contain; object-position: center; display: block; } /* Avatar - circular profile picture, border always enabled. */ .image--avatar { --avatar-size: var(--size-28px); display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-size); height: var(--avatar-size); padding: var(--space-0); border-radius: var(--radius-pill); background: var(--gradient-slate-diagonal-active-strong); border: none; flex-shrink: 0; overflow: hidden; position: relative; font-size: var(--font-size-12); font-weight: var(--weight-semibold); text-transform: uppercase; color: var(--text-on-primary); } a.image--avatar { text-decoration: none; color: var(--text-on-primary); } .image--avatar-column { --avatar-size: var(--size-22px); } .image--avatar-small { --avatar-size: var(--size-22px); } .image--avatar-profile { --avatar-size: var(--avatar-size-header, var(--size-28px)); border: var(--input-border-width-thin) solid var(--slate-glass-light-20); } .image--avatar-torch { width: var(--size-32px); height: var(--size-36px); border-radius: var(--radius-standard); } .image--avatar-map { --avatar-size: var(--size-20px); } .image--avatar-large { --avatar-size: var(--size-40px); } .image--avatar-xl { --avatar-size: var(--size-64); } .image--with-badge { overflow: visible; } .image__media--avatar { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; display: block; border-radius: var(--radius-pill); } .image__media--avatar-torch { border-radius: var(--radius-standard); } /* Thumbnail - rectangular with rounded corners for */ .image--thumbnail { display: inline-flex; align-items: center; justify-content: center; max-width: var(--width-120px); max-height: var(--height-120px); border-radius: var(--radius-standard); background: var(--dark-slate); box-shadow: var(--shadow-soft); overflow: hidden; flex-shrink: var(--flex-shrink-none); position: relative; } .image--watermark { display: block; width: var(--size-100pct); height: var(--size-100pct); } .image__media--watermark { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; object-position: center; display: block; } .image__media--thumbnail { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; display: block; } .image__media--panel-thumbnail { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; display: block; } .image__media--panel-footer { width: auto; max-width: var(--size-100pct); height: auto; object-fit: contain; display: block; } .image__media--receipt-thumb { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; display: block; } .image--panel-thumbnail { display: inline-flex; align-items: center; justify-content: center; width: var(--width-120px); height: var(--height-120px); max-width: var(--width-120px); max-height: var(--height-120px); border-radius: var(--radius-standard); background: var(--dark-slate); box-shadow: var(--shadow-soft); overflow: hidden; flex-shrink: var(--flex-shrink-none); position: relative; } .image--panel-footer { display: inline-block; width: fit-content; max-width: var(--size-100pct); background: transparent; box-shadow: none; overflow: visible; flex-shrink: 0; position: relative; } /* Receipt thumbnail - small rectangular preview for table cells */ .image--receipt-thumb { display: inline-flex; align-items: center; justify-content: center; width: var(--size-36px); height: var(--size-56px); border-radius: var(--radius-standard); background: var(--dark-slate); box-shadow: var(--shadow-soft); overflow: hidden; flex-shrink: 0; position: relative; } /* ============================================================================= SIZE MODIFIERS - Semantic, context-specific sizes ============================================================================= */ /* Emoji size - for emoji picker and reactions (24px, matches emoji-picker__char) */ .image--emoji { width: var(--size-1-5rem); height: var(--size-1-5rem); } /* Thumbnail medium - for recap modal photo grid */ .image--thumbnail-md { width: var(--width-120px); height: var(--height-120px); } /* Login logo - wide centered hero for the login panel */ .image--login-logo { width: min(var(--login-logo-width-fluid), var(--size-100pct)); aspect-ratio: 3000 / 1688; margin-inline: auto; } .image--footer-signature { width: fit-content; max-width: var(--size-100pct); } /* Layout semantic tokens */ :root { /* Container widths */ --layout-width-container: var(--w-1200); --layout-width-3xl: var(--w-920); --layout-width-4xl: var(--w-1024); --layout-width-5xl: var(--w-1280); --layout-width-6xl: var(--w-1400); /* Structural layout */ --layout-header-height: var(--h-64); --layout-sidebar-width: var(--w-240); --layout-sidebar-collapsed-width: calc(var(--size-24px) + (2 * var(--space-12px))); --layout-sidebar-collapsed-width-mobile: var(--layout-sidebar-collapsed-width); --sidebar-width: var(--layout-sidebar-width); --page-side-panel-width-fluid: clamp(var(--width-280px), 24vw, var(--width-380px)); --page-side-panel-width-mobile: min(var(--viewport-modal-max-width), var(--width-480px)); --sidebar-collapsed-width: var(--layout-sidebar-collapsed-width); --sidebar-width-collapsed: var(--sidebar-collapsed-width); --sidebar-collapsed-width-mobile: var(--layout-sidebar-collapsed-width-mobile); /* Content constraints */ --content-max-width: var(--layout-width-6xl); /* Layout spacing */ --gap-header-controls: var(--space-3); --gap-stack-2: var(--space-2); /* Embed aspect ratios */ --embed-aspect-16x9: var(--aspect-16x9); --embed-aspect-4x3: var(--aspect-4x3); --embed-aspect-1x1: var(--aspect-1x1); } /* ============================================================================ LIST ITEM PRIMITIVE Reusable interactive list item pattern (used by sidebar, pills, etc.) Card/tile appearance lives in data-tile.css — not here. ============================================================================ */ /** * Base list-item block */ .list-item { display: flex; align-items: var(--align-vertical-center); text-align: left; position: relative; z-index: 1; width: var(--size-100pct); max-width: var(--size-100pct); flex: 0 1 auto; height: auto; min-height: var(--size-36px); padding: var(--space-1-5px) var(--space-9px); gap: var(--space-1px); border: none; border-radius: var(--radius-standard); background: transparent; color: var(--text-primary); white-space: nowrap; cursor: pointer; transition: transform var(--animation-quick) var(--easing-smooth), background-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } /* Hover: soft pill background (base, overridden by appearance variants) */ .list-item:hover::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--space-1px); right: var(--space-1px); border-radius: var(--radius-standard); background: var(--white-glass-visible-15); z-index: -1; } /* ============================================================================ MODIFIER: --active (selected state) ============================================================================ */ .list-item--active { position: relative; z-index: 0; } .list-item--active::before { content: ''; position: absolute; top: var(--space-1px); bottom: var(--space-1px); left: var(--space-1px); right: var(--space-1px); border-radius: var(--radius-standard); background: var(--white-glass-frosted-90); box-shadow: var(--shadow-glass-soft); z-index: -1; } /* ============================================================================ MODIFIER: --pill (sidebar-like gradient appearance) ============================================================================ */ .list-item--pill { border-radius: var(--radius-standard); position: relative; overflow: hidden; transition: transform var(--animation-quick) var(--easing-smooth), background-color var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth); } /* Pill hover: gradient background */ .list-item--pill:hover::before { background: var(--gradient-teal-diagonal-hover-glass-soft); left: 0; right: 0; border-radius: var(--radius-standard); } /* Pill active: stronger gradient with stripe + shine */ .list-item--pill-active::before { background: var(--gradient-teal-diagonal-secondary-light); left: 0; right: 0; top: 0; bottom: 0; border-radius: var(--radius-standard); box-shadow: inset var(--size-3px) 0 0 var(--vibrant-teal), var(--shadow-soft); } .list-item--pill-active::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--size-40pct); background: var(--overlay-shine-subtle); pointer-events: none; z-index: 1; opacity: 0.5; } /* ============================================================================ MODIFIER: --on-dark (dark background context) ============================================================================ */ .list-item--on-dark { color: var(--text-on-dark); } .list-item--on-dark:hover::before { background: var(--white-glass-visible-15); } .list-item--on-dark-active { color: var(--text-primary); } /* ============================================================================ MODIFIER: --on-light (light background context, e.g. chat panel) ============================================================================ */ .list-item--on-light { color: var(--text-primary); } .list-item--on-light:hover::before { background: var(--white-glass-subtle-04); } /* on-light active: teal tint with sidebar-style active stripe */ .list-item--on-light-active::before { background: var(--teal-400-alpha-60); box-shadow: inset var(--size-3px) 0 0 var(--vibrant-teal), var(--shadow-glass-soft); } /* ============================================================================ SIZE MODIFIERS ============================================================================ */ .list-item--sm { min-height: var(--size-32px); padding: var(--space-1px) var(--space-1-5px); gap: var(--space-0-5px); } .list-item--md { min-height: var(--size-36px); padding: var(--space-1-5px) var(--space-9px); gap: var(--space-1px); } .list-item--lg { min-height: var(--size-44px); padding: var(--space-9px) var(--space-9px); gap: var(--space-1-5px); } /* ============================================================================ CHILD ELEMENTS ============================================================================ */ .list-item__content { display: flex; align-items: var(--align-vertical-center); gap: var(--space-1-5px); flex: 1 1 auto; min-width: 0; position: relative; z-index: 2; } .list-item__icon { width: var(--size-20px); height: var(--size-20px); flex-shrink: 0; } .list-item__text { display: flex; flex-direction: column; gap: var(--space-0-5px); flex: 1 1 auto; min-width: 0; } .list-item__actions { display: flex; align-items: var(--align-vertical-center); gap: var(--space-0-5px); margin-inline-start: var(--space-0); flex-shrink: 0; position: relative; z-index: 2; } @media (max-width: 767px) { /* All list items are interactive — enforce 44px touch target (WCAG 2.5.5) */ .list-item { min-height: var(--size-44px); } .list-item--sm { min-height: var(--size-44px); } .list-item--md { min-height: var(--size-44px); } } :root { /* Login logo sizing and halo geometry */ --login-logo-width-fluid: var(--w-480); --login-panel-width-fluid: clamp(var(--width-320px), 92vw, var(--w-920)); --login-panel-max-height: calc(var(--height-screen-full) - (2 * var(--space-9px))); --login-logo-halo-width-fluid: min(var(--viewport-fluid-width-lg), var(--width-480px)); --login-logo-halo-height-fluid: min(var(--viewport-fluid-width-md), var(--height-240px)); /* Login logo halo gradients - elliptical radial glow matching production */ --login-logo-halo-gradient-light: radial-gradient( ellipse 60% 55% at center, var(--white-glass-visible-15), transparent 70% ); --login-logo-halo-gradient-dark: radial-gradient( ellipse 60% 55% at center, var(--teal-dark-glass-faint-10), transparent 70% ); } /** * Map Pin Semantic Tokens * Centralized color definitions for map * Use cssVar() to read these in JS for SVG generation */ :root { /* === PUNCH TRACKING STATUS COLORS === */ --pin-active: var(--strong-teal); --pin-upcoming: var(--strong-sunset); --pin-completed: var(--medium-slate); --pin-default: var(--vibrant-teal); /* === EVENT URGENCY COLORS === */ --pin-critical: var(--strong-red); --pin-urgent: var(--strong-sunset); --pin-warning: var(--medium-sunset); --pin-normal: var(--vibrant-teal); /* === BRAND AMBASSADOR STATUS === */ --pin-ba-active: var(--soft-teal); --pin-ba-available: var(--light-teal); --pin-ba-unavailable: var(--medium-slate); /* === BONUS EVENT TIERS === */ --pin-bonus-high: var(--strong-sunset); --pin-bonus-medium: var(--medium-sunset); --pin-bonus-low: var(--light-sunset); /* === TYPES === */ --pin-job-new: var(--vibrant-teal); --pin-job-urgent: var(--strong-red); --pin-user-client: var(--medium-teal); --pin-user-ba: var(--strong-sunset); } /* Mobile Navigation Geometric Values */ :root { /* Bar height */ --mobile-nav-height: var(--size-56px); /* Icon elevation */ --mobile-nav-icon-elevation: calc(var(--size-28) * -1); --mobile-nav-icon-ring-width: var(--size-6); /* Notch geometry */ --mobile-nav-notch-top: calc(var(--size-20) * -1); --mobile-nav-notch-width: var(--size-70); --mobile-nav-notch-height: var(--size-20); --mobile-nav-notch-radius: var(--size-35); /* Notch cutout geometry */ --mobile-nav-cutout-width: var(--size-22); --mobile-nav-cutout-offset: var(--size-11); /* Badge positioning */ --mobile-nav-badge-active-top: var(--mobile-nav-notch-top); --mobile-nav-badge-active-right: var(--size-6); --mobile-nav-label-hide-offset: calc(var(--size-4) * -1); /* Keyframe transform values */ --mobile-nav-bounce-scale-start: var(--scale-multiplier-80); --mobile-nav-bounce-translate-start: var(--size-10); --mobile-nav-bounce-scale-mid: var(--scale-multiplier-105); --mobile-nav-bounce-translate-mid: calc(var(--size-2) * -1); /* Icon badge sizing */ --mobile-nav-icon-badge-size: var(--size-20px); --mobile-nav-icon-badge-bottom: var(--space-12px); /* Notch illusion custom geometry (percentage-based for SVG-like effects) */ --mobile-nav-notch-illusion-width-scale: 1.3; /* 130% scale */ --mobile-nav-notch-illusion-height-scale: 0.9; /* 90% scale */ --mobile-nav-notch-illusion-top-offset: -0.38; /* -38% offset */ --mobile-nav-notch-illusion-radius: var(--half) var(--half) 60% 60% / 0% 0% var(--full) var(--full); /* U-carve facing downward */ } /* Pill semantic gradient aliases */ :root { /* Inactive pill surface: match teal glass header */ --pill-gradient-default: var(--teal-glass-soft-gradient); /* hover: use unified hover surface gradient */ --pill-gradient-hover: var(--hover-surface-gradient); } :root { /* Tooltip centering patterns */ --tooltip-position-center-inline: var(--half); --tooltip-offset-center-inline: calc(-1 * var(--half)); --tooltip-offset-below: var(--full); } /* Shadow semantic tokens */ :root { /* Tabs: rest outline */ --shadow-tab-outline-subtle: var(--shadow-tab-outline-subtle-combo); /* Tabs: hover lift (subtle) */ --shadow-tab-hover-subtle: var(--shadow-glass-subtle); /* Tabs: hover lift (moderate) */ --shadow-tab-hover-moderate: var(--shadow-glass-moderate); /* Tabs: active */ --shadow-tab-active-none: var(--shadow-none); /* Modal inner highlight */ --shadow-modal-inner-highlight: var(--shadow-modal-inner-highlight-combo); /* Surface shadows */ --shadow-surface-subtle: var(--shadow-crisp); --shadow-surface-medium: var(--shadow-moderate); --shadow-surface-elevated: var(--shadow-float-md); --shadow-surface-high: var(--shadow-float-high); /* Surface shadows matching gradient semantic naming */ --active-surface-shadow: var(--shadow-none); --secondary-surface-shadow: var(--shadow-glass-subtle); --hover-surface-shadow: var(--shadow-glass-moderate); --active-surface-shadow-dark: var(--shadow-none); --hover-surface-shadow-dark: var(--shadow-glass-moderate); /* Unified surface shadow semantics */ --shadow-surface-active: var(--shadow-surface-active-combo); --shadow-surface-secondary: var(--shadow-surface-secondary-combo); --shadow-surface-hover: var(--shadow-surface-hover-combo); --shadow-section-tab-highlight: var(--shadow-section-tab-highlight-combo); --shadow-surface-active-dark: var(--shadow-surface-active-dark-combo); } /* Only and related semantics remain here. */ /* Sidebar semantic gradient aliases */ :root { /* Same palette as active-surface, but flipped so it's light at the top and deeper at the bottom-right */ --sidebar-background-gradient: linear-gradient( calc(var(--angle-diagonal) + 180deg), var(--surface-gradient-sidebar-start) var(--stop-start), var(--surface-gradient-sidebar-mid) var(--stop-mid), var(--surface-gradient-sidebar-mid) var(--stop-far), var(--surface-gradient-sidebar-end) var(--stop-end) ); --sidebar-active-item-stripe: var(--gradient-teal-vertical-vibrant-to-strong); --sidebar-divider-gradient: linear-gradient( 90deg, transparent 0%, var(--white-glass-whisper-08) 20%, var(--white-glass-medium-25) 50%, var(--white-glass-whisper-08) 80%, transparent 100% ); --sidebar-section-header-divider-gradient: var(--sidebar-divider-gradient); /* Divider tokens for different backgrounds */ --divider-on-dark: linear-gradient( 90deg, transparent 0%, var(--white-glass-whisper-08) 18%, var(--white-glass-medium-25) 50%, var(--white-glass-whisper-08) 82%, transparent 100% ); --divider-on-dark-shadow: 0 1px 1px var(--white-glass-whisper-08); --divider-on-light: linear-gradient( 90deg, transparent 0%, var(--black-glass-subtle-07) 18%, var(--black-glass-medium-25) 50%, var(--black-glass-subtle-07) 82%, transparent 100% ); --divider-on-light-shadow: 0 1px 1px var(--black-glass-subtle-06); } :root { /* Form component sizing semantics */ --form-checkbox-size: var(--size-16px); --input-height: var(--size-24px); --button-height: var(--size-40px); --search-input-width: var(--width-200px); /* Progress bar sizing */ --width-progress-indeterminate: var(--forty-percent); /* Code preview heights (specialized use cases) */ --height-code-preview: var(--h-200); --height-code-preview-tall: var(--h-400); /* Media query responsive heights */ --height-150px-media: var(--h-300); /* Modal / dialog specific heights and layout */ --height-modal-md: var(--h-480); --height-modal-lg: var(--h-600); --modal-max-height-page: var(--height-400px); /* Allow true large modals; max-width is still controlled by `.modal--*` classes. */ --modal-width-fluid: clamp(var(--ninety-percent), var(--viewport-modal-max-width), var(--width-1200px)); --modal-margin-fluid: clamp(var(--space-1-5px), var(--viewport-modal-margin-block), var(--space-18px)); --modal-close-offset-block: clamp(var(--space-9px), var(--viewport-modal-margin-block), var(--space-12px)); --modal-close-offset-inline: clamp(var(--space-9px), var(--viewport-modal-margin-inline), var(--space-12px)); --modal-photo-viewer-width: min(var(--viewport-photo-viewer-width), var(--container-md)); /* Tooltip / help sizing */ --tooltip-help-max-width-fluid: min(var(--width-280px), var(--viewport-tooltip-max-width)); /* Viewport sizing semantics */ --height-screen-full: var(--viewport-height); --width-screen-full: var(--viewport-width); /* Fullscreen bird / preview sizing semantics */ --fullscreen-bird-width-max: min(var(--viewport-bird-full-vmin), var(--h-520)); --fullscreen-bird-preview-width: min(var(--viewport-bird-preview-width-vmin), var(--w-360)); --fullscreen-bird-preview-height: min(var(--viewport-bird-preview-height-vmin), var(--h-220)); /* Table / page-specific max heights */ --table-max-height-page: var(--max-height-table-page); /* Container widths (PURPOSE: content area max-widths) */ --container-md: var(--w-640); /* Aspect ratios (PURPOSE: component shape constraints) */ --aspect-square-quality: var(--aspect-square); /* Shared control shell size for icon-only buttons, switches, and similar affordances. */ --control-size: var(--input-height); /* Shared glyph size for button, sidebar, and action icons. */ --control-icon-size: var(--size-20px); /* Switch component sizing - correlates with the shared icon glyph size (not the full control hit-area) so switches visually scale alongside the icon buttons they sit next to. */ --switch-track-height: var(--control-icon-size); --switch-track-width: calc(var(--switch-track-height) * 1.8); --switch-thumb-size: calc(var(--switch-track-height) - var(--space-2)); --switch-thumb-icon-size: calc(var(--switch-thumb-size) * 0.75); --switch-thumb-offset: var(--space-1); /* 4px offset */ --switch-thumb-offset-checked: calc(var(--switch-track-width) - var(--switch-track-height) + var(--space-1)); } /* Status semantic tokens */ :root { --text-info: var(--vibrant-teal); --danger-50: var(--red-glass-faint-10); --warning-50: var(--sunset-glass-faint-10); --warning-surface: var(--sunset-glass-faint-10); --warning-text: var(--strong-sunset); --color-success-border: var(--vibrant-teal); --color-success-subtle: var(--teal-glass-faint-10); } /* Surface semantic tokens */ :root { /* Primary page background surface — soft white derived from palette */ --page-bg-surface: var(--pale-off-white); /* Card surfaces */ --card-surface: var(--white-glass-frosted-90); --card-border: var(--teal-glass-soft-12); /* Tile surface — teal glass gradient used by list-item cards and housekeeping nav */ --tile-surface: var(--gradient-teal-diagonal-tiertiary-light); --tile-surface-hover: var(--gradient-teal-diagonal-hover-glass-soft); --tile-surface-active: var(--gradient-teal-diagonal-secondary-light); --tile-border: var(--card-border); --card-full-border: var(--vibrant-teal); /* Modal surfaces: neutral depth without bright flat white */ --modal-surface: var(--white-glass-frosted-90); --modal-surface-elevated: var(--white-glass-full-95); --modal-border: var(--input-border); /* Loading panels: slightly more opaque than card surface to avoid teal bleed-through in light mode */ --loading-panel-surface: var(--white-glass-full-95); /* Generic tokens used by component-level CSS */ --surface-subtle: var(--palest-teal); --surface-secondary: var(--teal-light-glass-soft-12); --border-subtle: var(--teal-glass-soft-12); --border-default: var(--pale-teal); --color-border-subtle: var(--black-glass-medium-25); /* Subtle dotted overlay used in header (palette-driven) */ --canvas-dotted-texture: radial-gradient(circle at center, var(--slate-glass-hairline-08) 0.5px, transparent 0.6px), radial-gradient(circle at center, var(--white-glass-whisper-08) 0.5px, transparent 0.6px); } /* Table semantic tokens */ :root { /* UniversalTable sizing semantics */ --table-head-height: var(--size-44); /* Table cell dimensions (consumed from density tokens) */ --table-cell-padding: var(--table-padding); --table-header-padding: var(--table-padding); --table-cell-line-height: var(--table-line-height); --table-header-line-height: var(--table-line-height); --table-cell-font-size: var(--table-font-size); --table-row-height: var(--input-height); --table-nested-indent-columns: 2; /* Table row colors */ /* Header surface: slightly teal-tinted, not frosted white glass */ --table-header-background: var(--teal-glass-light-20); /* Shine overlay intensity for table headers ( can over-brighten). */ --table-header-shine-opacity: 1; --table-row-alt-background: var(--soft-teal-glow); --table-row-hover-background: var(--teal-glass-light-20); /* Table gridline tokens (used by table-gridlines.css) */ --ut-gridline-width: var(--input-border-thin); --ut-gridline-color: var(--teal-glass-soft-12); /* Private gridline border tokens (customized per cell type in table-gridlines.css) */ --gl-side: none; --gl-bottom: none; --gl-top: none; } /* : reduce the header shine overlay to avoid a washed-out top band. */ @supports (-webkit-touch-callout: none) { :root { --table-header-shine-opacity: 0.75; } } /* Dark mode: the light-mode header/zebra-row alpha percentages (20%/10%) read as clearly distinct against a near-white cell background, but collapse into near-identical shades against the dark cell background — there was no dark-specific tuning at all. Bump both alphas so the same visual separation survives the theme switch. */ :root.dark { --table-header-background: var(--teal-600-alpha-30); --table-row-alt-background: var(--teal-600-alpha-18); } /** * Text Semantic Tokens * Semantic color tokens for text hierarchy and emphasis * References base palette tokens directly to avoid circular dependencies */ :root { /* ⚠️ --text-primary, --text-secondary, and --text-emphasis all resolve to the same color in light mode (--slate-500 / #5A6B75). They are aliases. Use --darker-slate / --deep-slate directly when you need genuine contrast against light surfaces (e.g. teal or off-white backgrounds). */ --text-primary: var(--text-color-primary); --text-default: var(--text-primary); --text-secondary: var(--text-color-secondary); --text-muted: var(--text-color-muted); --text-emphasis: var(--text-color-primary); --text-disabled: var(--text-color-disabled); /* Aliases used across the codebase */ --text-on-dark: var(--text-color-on-dark); --text-on-light: var(--text-color-primary); --text-on-primary: var(--true-white); /* Text on light backgrounds */ --text-color-on-light: var(--text-color-primary); --text-on-light: var(--text-color-on-light); } /* ========================================================================== Z-INDEX SEMANTIC TOKENS & UTILITIES ========================================================================== Semantic z-index tokens mapped to scale values Plus utility classes for layering control ========================================================================== */ :root { /* Semantic z-index tokens */ --z-base: var(--z-0); --z-nav: var(--z-100); --z-sticky: var(--z-200); --z-dropdown: var(--z-400); --z-popover: var(--z-600); --z-tooltip: var(--z-800); --z-banner: var(--z-1000); --z-modal: var(--z-1000); --z-overlay: var(--z-1050); --z-toast: var(--z-1100); --z-devtools: var(--z-2000); --z-topmost: var(--z-100000); } .activity-feed { --activity-feed-divider: var(--border-default); --activity-feed-summary: var(--text-secondary); --activity-feed-item-bg: var(--surface-hover-subtle); border-top: var(--input-border-width-thin) solid var(--activity-feed-divider); padding-top: var(--space-9px); } .activity-feed--tone-warning { --activity-feed-divider: var(--warning-text); --activity-feed-summary: var(--warning-text); --activity-feed-item-bg: var(--warning-50); } .activity-feed__summary { cursor: pointer; color: var(--activity-feed-summary); } .activity-feed__items { list-style: none; margin: var(--space-9px) var(--space-0) var(--space-0); padding: var(--space-0); display: grid; gap: var(--space-9px); } .activity-feed__item { padding: var(--space-9px) var(--space-12px); border-radius: var(--radius-standard); background: var(--activity-feed-item-bg); display: grid; gap: var(--space-2px); } .activity-feed__preview { overflow-wrap: anywhere; word-break: break-word; } .activity-feed__preview--preserve-line-breaks { white-space: pre-wrap; } .activity-feed__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12px); } @media (max-width: 767px) { .activity-feed__meta { align-items: flex-start; flex-direction: column; } } /* Top-level layout root: constrains banner + shell to exactly 100dvh */ .app-layout-root { height: var(--height-screen-full); display: flex; flex-direction: column; overflow: hidden; } /* Shell frame: fills remaining height after the impersonation banner */ .app-shell-frame { flex: 1 1 auto; height: var(--height-screen-full); max-height: var(--height-screen-full); min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* AppShell wrapper between frame and shell must preserve the bounded height chain. */ .app-shell-providers { flex: 1 1 auto; height: var(--size-100pct); max-height: var(--size-100pct); min-height: 0; width: var(--size-100pct); display: flex; flex-direction: column; overflow: hidden; } .app-shell { position: relative; display: flex; flex-direction: row; align-items: stretch; gap: var(--space-0); flex: 1 1 auto; height: var(--size-100pct); max-height: var(--size-100pct); min-height: 0; width: var(--size-100pct); max-width: var(--size-100pct); overflow: hidden; box-sizing: border-box; } /* Optional global app-level banner (above sidebar + header) */ .app-shell__banner { width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; padding: 0; flex-shrink: 0; } .app-shell__sidebar { flex-shrink: 0; } .app-shell__main { display: flex; flex-direction: column; flex: 1 1 auto; width: var(--size-100pct); min-width: 0; min-height: 0; align-self: stretch; align-items: stretch; overflow: hidden; box-sizing: border-box; } .app-shell__header { flex-shrink: 0; width: var(--size-100pct); min-width: 0; box-sizing: border-box; overflow: visible; } /* Login variant: centered card with bird background */ .app-shell--login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12px); padding: var(--space-9px); background: linear-gradient(var(--angle-vertical), var(--light-teal), var(--medium-teal), var(--strong-teal)); z-index: var(--z-modal); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; /* Login must stay visually consistent even if app theme is persisted dark. */ color-scheme: light; --light-teal: var(--teal-200); --soft-teal: var(--teal-300); --medium-teal: var(--teal-400); --strong-teal: var(--teal-500); --dark-slate: var(--slate-600); --darker-slate: var(--slate-700); --deep-slate: var(--slate-800); --white: var(--neutral-white); --white-glass-whisper-08: rgb(255 255 255 / 8%); --white-glass-light-20: rgb(255 255 255 / 20%); --white-glass-medium-25: rgb(255 255 255 / 25%); --white-glass-medium-30: rgb(255 255 255 / 30%); --white-glass-solid-70: rgb(255 255 255 / 70%); --white-glass-bright-86: rgb(255 255 255 / 86%); --white-glass-frosted-90: rgb(255 255 255 / 90%); --white-glass-full-95: rgb(255 255 255 / 95%); --form-row-field-grid-column: 1 / -1; --form-row-field-width: var(--size-100pct); --form-row-field-max-width: var(--size-100pct); --width: var(--size-100pct); } @media (max-width: 767px), (max-height: 767px) { .app-shell--login { justify-content: flex-start; } } .app-shell--login::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: var(--dark-slate); opacity: 0.1; mask-image: url('/images/birds/sandpiper_bird_square_teal.svg'); mask-repeat: no-repeat; mask-position: right bottom; mask-size: auto 70vh; filter: drop-shadow(0 10px 26px var(--teal-glass-light-20)); } .login-chooser__logo { display: block; inline-size: min(var(--size-100pct), var(--size-220px)); block-size: auto; margin-inline: auto; } .login-chooser__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-9px); width: var(--size-100pct); } .login-chooser__choice { justify-content: center; width: fit-content; } .login-chooser__request-link { display: flex; flex-direction: column; align-items: center; gap: var(--space-9px); width: var(--size-100pct); text-align: center; } .page-watermark-title { position: absolute; top: 0; left: 0; width: var(--size-100pct); z-index: var(--z-base); pointer-events: none; padding-left: var(--space-0); margin: var(--space-0); font-family: "Feeling Passionate", serif; font-size: var(--page-header-title-font-size); line-height: var(--page-header-title-line-height); font-weight: var(--weight-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--medium-teal); user-select: none; } /* Watermark variant pinned to a `.card` container (not the page). */ .page-watermark-title--card { top: var(--space-9px); left: var(--space-9px); width: auto; max-width: calc(var(--size-100pct) - (2 * var(--space-9px))); } .page--scrollable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .page__body { opacity: var(--opacity-visible); /* IMPORTANT: Do not apply an identity transform here. Any transform (even translateY(0)) creates a new containing block for position:fixed descendants, which breaks full-viewport overlays like `.login-page` on desktop. */ transform: none; transition: opacity var(--animation-smooth) var(--easing-smooth), transform var(--animation-smooth) var(--easing-smooth); } .page-card { opacity: var(--opacity-visible); /* IMPORTANT: Do not apply an identity transform here. Any transform (even translateY(0)) creates a new containing block for position:fixed descendants, which breaks full-viewport overlays like `.login-page` on desktop. */ transform: none; transition: opacity var(--animation-smooth) var(--easing-smooth), transform var(--animation-smooth) var(--easing-smooth); } .page__body--route-entering { opacity: var(--opacity-soft); transform: var(--page-route-entering-transform, translateY(var(--lift-subtle))); } .page-card--route-entering { opacity: var(--opacity-soft); transform: var(--page-route-entering-transform, translateY(var(--lift-subtle))); } /* Login view uses full-viewport fixed overlays (.login-page). Any transform on an ancestor turns fixed descendants into containing-block-fixed, which visually "shrinks" and offsets the login canvas on desktop. */ .view--login { --page-route-entering-transform: none; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) { /* On , page__body contains position:fixed children (side panel, FAB). Any transform on an ancestor creates a new containing block for fixed descendants, which breaks their viewport-relative positioning. Strip the transform on mobile. */ .page__body--route-entering { --page-route-entering-transform: none; } } .page__nav-integration { --page-nav-inline-gap: var(--space-9px); --page-nav-top-right-fab-reserve: calc(var(--fab-offset-inline-end) + var(--fab-size-fluid) + var(--space-18px)); --section-tabs-end-gap: var(--page-nav-top-right-fab-reserve); flex-shrink: 0; width: var(--size-100pct); min-height: var(--space-0); padding: 0; padding-inline-start: var(--page-nav-inline-gap); padding-inline-end: max(var(--page-nav-inline-gap), var(--page-nav-top-right-fab-reserve)); background: transparent; box-shadow: var(--shadow-none); grid-area: page__nav-integration; /* Flex row so a right-side FAB slot can share the tab bar without overlap. */ display: flex; align-items: stretch; box-sizing: border-box; /* Smooth nav-integration height change to prevent content jumping on navigation between sections with and without section tabs. */ overflow: hidden; max-height: 0; transition: max-height var(--animation-smooth) var(--easing-smooth); } .page__nav-integration--visible { /* Use the tab strip footprint exactly; extra height creates a visible gap above the card. */ max-height: var(--section-tabs-block-size); } @media (max-width: 767px) { .page__nav-integration { padding-inline: var(--page-nav-inline-gap); } .page__nav-integration--visible { max-height: var(--size-44px); } } /* Optional per-page banner (rendered above `.page__body` via PageBannerContext) */ .page__banner { flex-shrink: 0; width: var(--size-100pct); padding: 0; margin-top: 0; } /* :empty rule removed — max-height: 0 handles the collapsed state with animation */ /* Page container (formerly .page-shell) */ .page { flex: 1 1 auto; block-size: var(--size-100pct); min-height: var(--space-0); width: var(--size-100pct); min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 0; background-color: var(--page-bg-surface); overflow-x: hidden; overflow-y: hidden; box-sizing: border-box; } .page__body { --side-panel-width: var(--page-side-panel-width-fluid, clamp(280px, 24vw, 380px)); --side-panel-grid-width: var(--side-panel-width); position: relative; flex: 1 1 auto; block-size: var(--size-100pct); min-height: 0; width: var(--size-100pct); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-panel-grid-width); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "page__nav-integration page__nav-integration" "page__header page__header" "page__content page__side-panel"; padding: var(--space-9px); column-gap: var(--space-9px); overflow-x: hidden; overflow-y: hidden; box-sizing: border-box; } .page__body--side-panel-collapsed { --side-panel-width: var(--space-0); --side-panel-grid-width: var(--space-0); column-gap: var(--space-0); padding-inline-end: var(--space-0); } .page__body--side-panel-open { --grid-template-responsive-3-desktop: var(--grid-template-responsive-3-desktop); --grid-template-responsive-3-widescreen: var(--grid-template-responsive-3-widescreen); } .page__body--scrollable { overflow-y: auto; overscroll-behavior-y: contain; } .page__body--scrollable .page__content { overflow: visible; } .page__header { grid-area: page__header; padding: 0; /* The watermark title is absolutely positioned. IMPORTANT: Do NOT reserve vertical space here. Dashboard grids own their own top padding so content can scroll "over" the watermark naturally. */ position: relative; min-height: 0; height: 0; overflow: visible; } /* Main page content */ .page__content { position: relative; /* Containing block for content-scoped modal overlays */ padding: var(--space-9px); width: var(--size-100pct); block-size: var(--size-100pct); min-block-size: 0; min-width: 0; flex: 1 1 auto; grid-area: page__content; display: flex; flex-direction: column; gap: var(--space-9px); min-height: 0; /* Critical for flex children to shrink */ align-self: stretch; justify-self: stretch; overflow: hidden; container-type: inline-size; container-name: page-content; } .page__content--with-nav-integration { padding: 0 var(--space-9px) var(--space-9px); } .page__content--flush { padding: 0; } /* Shared shell footer slot. Concrete surfaces own the visual treatment. */ .page__footer { width: var(--size-100pct); min-width: 0; flex-shrink: 0; box-sizing: border-box; } /* Explicit route-content surface owner within page content. */ /* Side panel drawer (for chat, etc.) */ .page__side-panel { /* Match PageShell body semantics: outer container has no background and no extra padding; inner content (OpsChatTray) owns its own spacing. */ padding: 0; flex: 0 0 auto; width: var(--side-panel-width); min-width: var(--side-panel-width); max-width: var(--side-panel-width); align-self: stretch; display: flex; flex-direction: column; height: var(--size-100pct); background-color: transparent; border-left: none; /* Strict contract: Side panel is a fixed-height shell. Scrolling is owned by the canonical inner surface (Panel → .panel__scrollable-body). */ overflow-x: visible; overflow-y: hidden; transition: flex-basis var(--animation-smooth) var(--easing-smooth), width var(--animation-smooth) var(--easing-smooth), min-width var(--animation-smooth) var(--easing-smooth), max-width var(--animation-smooth) var(--easing-smooth), border-left-width var(--animation-smooth) var(--easing-smooth), opacity var(--animation-smooth) var(--easing-smooth), visibility 0s; /* ← NO DELAY on visibility (instant show/hide) */ grid-area: page__side-panel; box-sizing: border-box; position: relative; } .page__side-panel-content { flex: 1 1 auto; min-height: 0; height: var(--size-100pct); overflow: hidden; display: flex; flex-direction: column; padding: var(--space-9px); } .ops-chat-side-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-9px); } .chat-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-9px); } .ops-chat-side-panel__sticky { flex: 0 0 auto; } .ops-chat-side-panel__sticky-toggle { flex: 0 0 auto; display: flex; justify-content: flex-start; } .ops-chat-side-panel__chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .chat-panel__queue-controls { display: flex; gap: var(--space-6px); margin-bottom: var(--space-6px); } .chat-panel__compose-row { display: flex; justify-content: flex-start; margin-bottom: var(--space-6px); } /* Closed state - collapse the width */ .page__side-panel--closed { padding: 0; flex-basis: 0; width: 0; min-width: 0; max-width: 0; opacity: 0; visibility: hidden; pointer-events: none; } /* Dashboard page variant - aligns with first tile in grid */ .page__side-panel--dashboard-page { margin-top: var(--page-header-title-block-size); /* Dashboard uses the same strict contract: shell never scrolls. */ overflow: hidden; } .page__side-panel-content--dashboard-page { overflow: hidden; } /* Floating toggle button to reopen side panel */ .page__side-panel-toggle { position: fixed; right: var(--space-9px); bottom: var(--space-18px); width: var(--width-56px); height: var(--height-56px); border-radius: var(--radius-pill); background-color: var(--vibrant-teal); border: none; box-shadow: var(--shadow-float-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--duration-fast) var(--easing-smooth); z-index: var(--z-topmost); color: var(--white); } .page__side-panel-toggle:hover { background-color: var(--strong-teal); box-shadow: var(--shadow-float-lg); transform: scale(1.05); } .page__side-panel-toggle:active { transform: scale(0.95); } /* Tablet and below: overlay mode — bottom sheet anchored above the nav bar */ @media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) { .page__body--with-mobile-navbar { --side-panel-grid-width: var(--space-0); --side-panel-width: var(--page-side-panel-width-mobile, min(95vw, 480px)); } .page__side-panel--with-mobile-navbar { padding: 0; position: fixed; left: 0; right: 0; top: var(--app-header-height); bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); height: auto; max-height: none; width: auto; min-width: 0; max-width: none; flex-basis: auto; opacity: 1; visibility: visible; z-index: var(--z-modal); box-shadow: var(--shadow-elevated); background: var(--card-surface); border-radius: 0; border: none; overflow: hidden; transform: translateY(110%); transition: transform var(--animation-smooth) var(--easing-smooth); } .page__side-panel--mobile-navbar-open { transform: translateY(0); visibility: visible; pointer-events: auto; } .page__side-panel--mobile-navbar-closed { transform: translateY(110%); visibility: hidden; transition: transform var(--animation-smooth) var(--easing-smooth), visibility 0s var(--animation-smooth); width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; flex-basis: auto; opacity: 1; } } .page__nav-panel { height: var(--size-auto); /* fit contents */ padding: var(--space-0); /* no gaps */ margin: var(--space-0); background: transparent; box-shadow: var(--shadow-none); } @media (max-width: 767px) { .page { padding: 0; } .page__body { padding: var(--space-9px); column-gap: var(--space-9px); } .page__content { padding: var(--space-9px); gap: var(--space-9px); } .page__content--with-nav-integration { padding: 0 var(--space-9px) var(--space-9px); } .page__content--flush { padding: 0; } } /* Grid helper for auto-fit cards (chat compose, etc.) */ .grid-auto-fit-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-240px), 1fr)); gap: var(--space-9px); } .users-type-tabs { display: flex; align-items: center; gap: var(--space-0-5px); overflow-x: auto; padding: var(--space-0-5px) var(--space-1-5px); } /* Profile review shell container. * Keeps the public profile form centered and bounded like the login page, * but with a wider profile-friendly reading width. */ .app-shell__profile-content { position: relative; z-index: 2; flex: 0 1 auto; align-self: center; width: min(var(--modal-width-fluid), calc(var(--size-100pct) - (var(--space-9px) * 2))); max-width: var(--width-960px); height: auto; min-height: 0; overflow: visible; margin-inline: auto; } .public-profile-review-form .form__section-body, #base-profile-form .form__section-body { --_form-section-body-cols: repeat(12, minmax(0, 1fr)); --_form-section-body-gap: var(--space-18px); align-items: start; } .public-profile-review-form .form__row-field, #base-profile-form .form__row-field { --form-row-field-grid-column: span 12; --form-row-field-grid-column-mobile: 1 / -1; --form-row-field-width: auto; --form-row-field-max-width: none; } .public-profile-review-form .field__label, #base-profile-form .field__label { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; } .public-profile-review-form .form__section-instructions, #base-profile-form .form__section-instructions { margin: 0 0 var(--space-18px); } .public-profile-review-form__notice { display: flex; flex-direction: column; gap: var(--space-9px); width: var(--size-100pct); padding: var(--space-18px); border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); border-radius: var(--radius-large); background: radial-gradient(circle at top left, var(--white-glass-light-20), transparent 58%), linear-gradient(180deg, var(--card-surface), var(--modal-surface-elevated)); box-shadow: var(--shadow-subtle); } .public-profile-review-form__notice > p { margin: 0; } .public-profile-review-form__certificate-controls { display: flex; flex-direction: column; gap: var(--space-12px); width: var(--size-100pct); } .public-profile-review-form__certificate-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-18px); align-items: start; width: var(--size-100pct); } .public-profile-review-form__certificate-preview-card { display: flex; flex-direction: column; gap: var(--space-12px); width: min(var(--size-100pct), var(--width-280px)); min-width: 0; } .public-profile-review-form__certificate-preview-surface { display: grid; place-items: center; gap: var(--space-9px); width: var(--size-100pct); aspect-ratio: 1 / 1; min-height: 0; padding: var(--space-18px); border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); border-radius: var(--radius-large); background: radial-gradient(circle at top, var(--white-glass-light-20), transparent 60%), linear-gradient(180deg, var(--card-surface), var(--modal-surface-elevated)); box-shadow: var(--shadow-soft); overflow: hidden; } .public-profile-review-form__certificate-preview-image { width: var(--size-100pct); height: var(--size-100pct); object-fit: contain; border-radius: var(--radius-large); } .public-profile-review-form__certificate-preview-empty, .public-profile-review-form__certificate-preview-file { display: flex; flex-direction: column; align-items: center; gap: var(--space-9px); text-align: center; color: var(--text-secondary); } .public-profile-review-form__certificate-preview-file { width: var(--size-100pct); } .public-profile-review-form__certificate-preview-file > .table__cell-text--caption { word-break: break-word; } .public-profile-review-form__certificate-input { display: none; } .public-profile-review-form__certificate-button-row { justify-content: flex-start; } .public-profile-review-form__certificate-upload-button, .public-profile-review-form__photo-edit-button, .public-profile-review-form__photo-editor-cancel-button { flex: 0 0 auto; } .public-profile-review-form__certificate-link { display: inline-flex; margin-top: var(--space-9px); } .public-profile-review-form__photo-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-18px); align-items: start; width: var(--size-100pct); } .public-profile-review-form__photo-preview-card, .public-profile-review-form__photo-controls { display: flex; flex-direction: column; gap: var(--space-12px); min-width: 0; } .public-profile-review-form__photo-preview-surface { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: var(--size-100pct); min-height: var(--width-240px); padding: var(--space-18px); border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); border-radius: var(--radius-large); background: radial-gradient(circle at top, var(--white-glass-light-20), transparent 60%), linear-gradient(180deg, var(--card-surface), var(--modal-surface-elevated)); box-shadow: var(--shadow-soft); overflow: hidden; } .public-profile-review-form__photo-preview-image { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; border-radius: var(--radius-large); } .public-profile-review-form__photo-preview-empty { display: flex; flex-direction: column; justify-content: center; gap: var(--space-9px); text-align: center; color: var(--text-secondary); } .public-profile-review-form__photo-input { display: none; } .public-profile-review-form__photo-button-row { justify-content: flex-start; } .public-profile-review-form__photo-editor-shell { width: min(var(--size-100pct), var(--width-840px)); max-width: min(var(--size-100pct), var(--width-840px)); max-height: min(var(--size-viewport-photo-viewer-width), calc(var(--size-100vh) - (var(--space-18px) * 2))); } .public-profile-review-form__photo-editor-body { padding: var(--space-18px); } .public-profile-review-form__photo-editor-header, .public-profile-review-form__photo-editor-footer { display: flex; flex-direction: column; gap: var(--space-9px); } .public-profile-review-form__photo-editor-button-row { justify-content: flex-end; } .public-profile-review-form__photo-editor-apply-button { display: inline-flex; align-items: center; gap: var(--space-6px); } .public-profile-review-form .data--location, .public-profile-review-form .data--notes, .public-profile-review-form .data--number, #base-profile-form .data--location, #base-profile-form .data--notes, #base-profile-form .data--number { --form-row-field-grid-column: span 12; } .public-profile-review-form .data--city, #base-profile-form .data--city { --form-row-field-grid-column: span 5; } .public-profile-review-form .data--state, #base-profile-form .data--state { --form-row-field-grid-column: span 3; } .public-profile-review-form .data--zip, #base-profile-form .data--zip { --form-row-field-grid-column: span 4; } .public-profile-review-form .data--choice, #base-profile-form .data--choice { --form-row-field-grid-column: span 12; } .public-profile-review-form__radius-field .field__control { align-items: stretch; } .public-profile-review-form__radius-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-18px); row-gap: var(--space-9px); align-items: center; width: var(--size-100pct); } .public-profile-review-form__radius-input { grid-column: 1; width: var(--size-100pct); min-width: 0; max-width: none; } .public-profile-review-form__radius-value { grid-column: 2; min-width: fit-content; white-space: nowrap; text-align: right; } .public-profile-page .page__content { overflow-x: hidden; overflow-y: auto; } .public-profile-page .app-shell__main { background: radial-gradient(circle at top left, rgb(255 255 255 / 82%) 0%, rgb(255 255 255 / 0%) 32%), linear-gradient(180deg, rgb(248 252 252 / 98%) 0%, rgb(240 249 249 / 94%) 100%); } @media (max-width: 767px) { .public-profile-page .app-shell__main { overflow-x: hidden; overflow-y: auto; } .public-profile-page .app-shell__main .page { flex: none; height: auto; overflow: visible; } .public-profile-page .page__content { flex: none; overflow: visible; } .public-profile-review-form .form__section-body, #base-profile-form .form__section-body { --_form-section-body-cols: minmax(0, 1fr); } .public-profile-review-form .form__row-field, #base-profile-form .form__row-field { --form-row-field-grid-column: 1 / -1; } .public-profile-review-form__channel-grid { grid-template-columns: minmax(0, 1fr); } .public-profile-review-form__photo-layout { grid-template-columns: minmax(0, 1fr); } .public-profile-review-form__certificate-layout { grid-template-columns: minmax(0, 1fr); } .public-profile-review-form__certificate-preview-card { width: var(--size-100pct); } .public-profile-review-form__radius-control { grid-template-columns: minmax(0, 1fr); } .public-profile-review-form__radius-value { grid-column: 1; justify-self: end; } .public-profile-review-form__photo-editor-body { padding: var(--space-12px); } .public-profile-review-form__photo-editor-button-row { justify-content: stretch; } } /* App Header * NOTE: This layout must stay in sync with render/__00-birthplace/globalAppHeader.tsx. * If you change .app-header structure or key classes here, update the JSX * to match the expected DOM and token usage. */ .app-header { backdrop-filter: none; border-bottom: var(--input-border-width-thin) solid var(--slate-glass-soft-12); color: var(--text-on-primary); position: sticky; top: 0; left: 0; box-shadow: var(--shadow-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-9px); padding-block: clamp(var(--space-9px), 2vh, var(--space-12px)); padding-inline: clamp(var(--space-9px), 2vw, var(--space-18px)); min-width: 0; width: var(--size-100pct); box-sizing: border-box; /* Allow anchored in the header to render outside the header's height (profile menu, view-as, etc.). */ overflow: visible; flex-shrink: 0; z-index: var(--z-sticky); background: var(--app-header-gradient); max-width: var(--size-100pct); isolation: isolate; --app-header-bird-filter: brightness(0) invert(1); --app-header-sandpiper-logo-filter: brightness(0.82) contrast(1.18); } .app-header--marketing { background: var(--white); border-bottom-color: var(--card-border); color: var(--text-primary); box-shadow: var(--shadow-soft); --app-header-bird-filter: none; --app-header-sandpiper-logo-filter: none; } :root.dark .app-header { color: var(--text-on-primary); } .app-header__avatar-menu { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* Anchor for the header View-As (impersonation) dropdown. Holds no visible chrome of its own: the trigger is the toolbar eyeball, this element only positions the anchored menu surface. */ .app-header__view-as-menu { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .app-header__ba-mode-switch { display: inline-flex; align-items: center; justify-content: center; width: var(--control-size); height: var(--control-size); flex-shrink: 0; flex: 0 0 auto; } .app-header__theme-mode-switch { display: inline-flex; align-items: center; justify-content: center; width: var(--control-size); height: var(--control-size); flex-shrink: 0; flex: 0 0 auto; } .switch-row--app-header { flex: 0 0 auto; min-width: 0; max-width: var(--size-100pct); margin-inline-start: auto; } .app-header > .switch-row.switch-row--app-header.switch-row--stack { align-items: flex-end; } .app-header__logo-wrap { display: flex; align-items: center; justify-content: flex-start; /* Rigid: logo wrapper never grows or shrinks; width is just the bird. */ flex: 0 0 auto; flex-shrink: 0; flex-grow: 0; width: max-content; min-width: max-content; } /* service health indicators (). */ .app-header__service-dots { display: flex; align-items: center; gap: var(--size-2px); } .service-status { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-1px); height: var(--size-20px); min-width: var(--size-18px); min-height: var(--size-20px); padding: 0 var(--space-1px); background: transparent; } .service-status__dot { font-size: var(--size-11px); line-height: var(--line-height-110pct); filter: drop-shadow(0 1px 3px var(--black-glass-opaque-65)); text-shadow: 0 0 4px currentColor; } .service-status__dot::before { content: '•'; } .service-status__label { font-size: var(--size-8px); font-weight: var(--weight-bold); line-height: var(--line-height-110pct); letter-spacing: 0.03em; text-shadow: 0 1px 3px var(--black-glass-deep-80); } .service-status--success { color: var(--rainbow-green); } .service-status--warning { color: var(--strong-sunset); } .service-status--danger { color: var(--strong-red); } .service-status--neutral { color: var(--medium-slate); } .app-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: var(--canvas-dotted-texture); background-repeat: repeat, repeat; background-size: var(--space-1px) var(--space-1px), var(--space-1px) var(--space-1px); background-position: 0 0, calc(var(--space-1px) / 2) calc(var(--space-1px) / 2); opacity: 0.04; } .app-header--marketing::before { opacity: 0; } .app-header__logo { /* Explicit size so the bird never collapses to 0x0 when moved into its own flex slot. */ max-height: var(--app-header-logo-size); height: var(--app-header-logo-size); width: var(--app-header-logo-size); flex-shrink: 0; will-change: transform, filter; cursor: pointer; } .app-header__logo-icon { /* Container owns the size; overrides the SVG's own width/height attrs so the bird scales with .app-header__logo at every breakpoint. */ width: 100%; height: 100%; } .app-header__logo-icon > svg { width: 100%; height: 100%; } .app-header__logo:hover { filter: drop-shadow(var(--shadow-glow-depth-soft) var(--color-bird-glow)); animation: var(--animation-bird-run); } .app-header__logo:active { animation: var(--animation-bird-run); } @media (prefers-reduced-motion: reduce) { .app-header__logo:hover { animation: none; } .app-header__logo:active { animation: none; } } /* Greeting + name-row vertical group. */ .app-header__greeting-group { /* The name row is taken out of flow (absolute) so it can never influence this container's width — otherwise a long name stretches the box and the "75% into the greeting" math below stops being 75% of the greeting. With the name out of flow, the container's shrink-to-fit width is driven by the greeting text alone, so `left: 75%` on the name lands exactly 3/4 of the way into the greeting's own rendered width, regardless of name length. min-height reserves room for both stacked lines since the absolutely positioned line no longer contributes to layout height. Being out of flow, the name can no longer push this flex item's own width, so nothing in the flex layout reserves room for it — without help it can render past this box's right edge into the next header item (avatar menu). margin-right reserves that room. Its value is exactly the name's own `max-width: 24ch` cap, so this element's font-family/font-size are set to match .app-header__greeting-name's (font-family-hero at font-size-14) purely so `ch` here resolves in the same glyph metrics as the name's cap — making margin-right >= the name's worst-case rendered width by construction, not approximation. Given name-left-edge = 75% of this box's own width and name-max-width = this margin, the name's right edge can never exceed box-width + margin for any greeting length. .app-header__greeting re-declares its own font-family below to undo this font change for the visible greeting text, which keeps its original sans font. */ position: relative; display: block; min-height: calc(var(--font-size-16) * var(--line-height-dense) + var(--space-1px) + var(--font-size-14) * var(--line-height-tight)); flex: 0 0 auto; min-width: max-content; white-space: nowrap; font-family: var(--font-family-hero); font-size: var(--font-size-14); margin-right: 24ch; } .app-header__greeting-group--anonymous { /* No name row: only the greeting line renders, so no stacked-line height or name-overflow buffer needs to be reserved. */ min-height: 0; margin-right: 0; } .app-header__client-brand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 0; max-width: var(--width-200px); min-height: var(--size-56px); } .app-header__client-brand--sandpiper { max-width: clamp(240px, 18vw, 320px); } .app-header__client-brand--pour-portal { max-width: clamp(208px, 16vw, 280px); } .app-header__client-brand-logo--sandpiper { width: clamp(158px, 14vw, 220px); max-width: none; filter: var(--app-header-sandpiper-logo-filter); } .app-header__client-brand-logo--pour-portal { width: clamp(112px, 9vw, 156px); max-width: none; } .app-header__greeting--group-leading { /* Normal in-flow block: the only content sizing .app-header__greeting-group. */ display: block; } .app-header__logo--bird { /* Force the teal SVG to render as the header's configured logo tone. */ filter: var(--app-header-bird-filter); } .app-header__logo-icon { width: 100%; height: 100%; } /* User name */ .app-header__greeting-name { position: relative; font-family: var(--font-family-hero); font-size: var(--font-size-14); line-height: var(--line-height-tight); text-align: left; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 24ch; --logo-sheen-duration: 1.8s; --logo-sheen-easing: var(--easing-gentle); } .app-header__greeting-name--header-offset { /* Positioned 3/4 into the greeting row's own width — see .app-header__greeting-group for why the name must stay out of flow. Declared after .app-header__greeting-name (same specificity) so this `position: absolute` wins the cascade over that rule's `position: relative`. */ position: absolute; top: calc(var(--font-size-16) * var(--line-height-dense) + var(--space-1px)); left: 75%; } .app-header__greeting-name > .text { font-size: inherit; line-height: inherit; font-family: inherit; } .app-header__greeting-name::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; font: inherit; line-height: inherit; color: transparent; background: linear-gradient( var(--angle-diagonal), transparent var(--stop-mid), var(--white-glass-prominent-55) var(--stop-center), transparent var(--stop-fade-near) ); background-size: var(--size-200pct) var(--size-100pct); background-position: var(--size-200pct) var(--inset-0); background-clip: text; opacity: 0; /* hidden at rest */ } .app-header__greeting-name:hover::after { opacity: 1; animation: var(--animation-logo-sheen-reverse); } .app-header__greeting-name:focus-visible::after { opacity: 1; animation: var(--animation-logo-sheen-reverse); } /* Greeting text above user name */ .app-header__greeting { /* font-family override: .app-header__greeting-group sets font-family-hero so its margin-right's `ch` unit matches .app-header__greeting-name's `ch`-based max-width exactly (see that rule for why). Restore this element's own sans font so the visible greeting text is unaffected. */ font-family: var(--font-family-primary); font-size: var(--font-size-16); line-height: var(--line-height-dense); font-weight: var(--weight-normal); white-space: nowrap; text-align: left; margin: 0; padding: 0; min-width: max-content; } .app-header__greeting > .text { font-size: inherit; line-height: inherit; } .app-header > .toolbar { flex: 0 1 auto; min-width: 0; margin-inline-start: auto; justify-content: flex-end; } .app-header > .toolbar.toolbar--wrap { order: 99; flex: 1 0 100%; width: 100%; max-width: 100%; } /* ============================================================================ MOBILE RESPONSIVE APP HEADER Optimized layout and spacing for mobile/tablet breakpoints ============================================================================ */ /* Mobile (≤768px): Dense header for small screens */ @media (max-width: 767px) { .app-header { gap: var(--space-1px); padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-1px)); padding-bottom: var(--space-1px); padding-inline: var(--space-1-5px); align-items: center; overflow: visible; } .app-header__greeting-group { display: inline-flex; align-items: center; gap: var(--space-1px); min-width: 0; white-space: nowrap; margin-right: 0; min-height: 0; } .app-header__greeting-group--anonymous { min-width: 0; margin-right: 0; } .app-header__avatar-menu { margin-inline-start: auto; } /* Logo: Smaller on mobile */ .app-header__logo { max-height: var(--size-40px); max-width: var(--size-40px); } .app-header__greeting-name--header-offset { position: static; top: auto; left: auto; max-width: none; } .app-header__greeting { min-width: 0; white-space: nowrap; } .app-header__greeting-name { display: inline-flex; max-width: none; } .app-header > .toolbar.toolbar--wrap { flex: 1 0 100%; width: 100%; max-width: 100%; } /* Toolbar buttons: WCAG 2.5.5 minimum 44×44px touch target. * Note: Button primitive should handle this via --size-touch-target. */ } /* Tablet (769px - 1024px): Intermediate sizing */ @media (min-width: calc(var(--breakpoint-mobile-max) + 1px)) and (max-width: var(--breakpoint-tablet-max)) { .app-header { gap: var(--space-1-5px); padding-block: var(--space-9px); padding-inline: var(--space-9px); } .app-header__logo { max-height: var(--size-48px); max-width: var(--size-48px); } .switch-row--app-header { flex: 0 0 auto; min-width: 0; max-width: var(--size-100pct); margin-inline-start: auto; justify-content: flex-end; flex-wrap: nowrap; } .app-header > .toolbar { flex: 0 1 auto; min-width: 0; margin-inline-start: auto; justify-content: flex-end; max-width: var(--size-100pct); } .app-header > .toolbar.toolbar--wrap { flex: 1 0 100%; width: 100%; max-width: 100%; } } /* Touch devices: Ensure all interactive elements are tappable */ @media (hover: none) and (pointer: coarse) { /* Deleted architectural override - buttons should control their own size */ /* Disable logo hover animation on touch */ .app-header__logo:hover { animation: none; } /* Disable name sheen on touch */ .greeting-name:hover::after { animation: none; opacity: 0; } } /** * Applied Filters Component Styles * Strategy 2: Persistent & Visible "Applied Filters" Overview * * Displays active filters as for easy visibility and removal. */ .applied-filters { width: var(--size-100pct); min-width: 0; display: flex; justify-content: flex-start; align-items: flex-start; align-self: start; padding: 0; margin: 0; } .applied-filters__actions { width: var(--size-100pct); min-width: 0; display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: var(--space-2px); align-items: center; } .applied-filters__actions .chip-group { min-width: 0; } @keyframes chip-enter { from { opacity: 0; transform: scale(0.88) translateY(-2px); } to { opacity: 1; transform: scale(1) translateY(0); } } .applied-filters__pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip--applied-filter { gap: var(--space-0-5px); } .applied-filters__pill-x { display: inline-flex; align-items: center; justify-content: center; width: var(--size-14px); height: var(--size-14px); margin-inline-start: var(--space-0-5px); line-height: 1; flex: 0 0 auto; opacity: var(--opacity-visible); font-weight: var(--weight-normal); font-size: var(--font-size-12); border-radius: var(--radius-pill); } /* Negated filter chip — treatment so exclusions are visually distinct from inclusions */ .pill--negated { background: var(--light-sunset); border-color: var(--sunset-glass-heavy-70); color: var(--strong-sunset); } .pill--negated:hover { background: var(--pale-sunset); border-color: var(--strong-sunset); color: var(--strong-sunset); } /* Responsive: stack vertically on mobile */ @media (max-width: 639px) { .applied-filters__actions { width: var(--size-100pct); } } /* Breadcrumb semantics - BEM-style block with quality tokens only */ /* Block */ .breadcrumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-0-5px); color: var(--medium-slate); } /* Item element */ .breadcrumbs__item { display: inline-flex; align-items: center; } /* Links */ .breadcrumbs__link { color: currentColor; text-decoration: none; } .breadcrumbs__link:hover { color: var(--dark-slate); text-decoration: underline; text-underline-offset: var(--space-0-5px); } /* Active link modifier */ .breadcrumbs__link--active { color: var(--vibrant-teal); font-weight: var(--weight-medium); text-decoration: none; cursor: default; } /* Separator element */ .breadcrumbs__separator { opacity: var(--opacity-soft); } /** * Calendar Components * Styles for calendar grid, events, and filters */ /* Calendar container (wraps CalendarGrid views) */ .calendar { border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); border-radius: var(--radius-standard); background: var(--white-glass-faint-10); padding: var(--space-0-5px); } .calendar-view__month-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6px); padding: var(--space-6px) var(--space-9px); } .calendar-view__month-title { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: var(--input-height); } /* Month-view event text behavior: strict cell-bounded single-line truncation */ .calendar-event--month { width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-event__more { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Calendar Filters Sidebar */ .calendar-filters { width: var(--size-64px); flex-shrink: 0; overflow-y: auto; } /* Color indicator dot for event type filters */ .event-color-dot { width: var(--size-4px); height: var(--size-4px); border-radius: var(--radius-pill); flex-shrink: 0; } /* view event positioning uses CSS custom properties */ .calendar-week-event { /* Dynamic event color - set via CSS custom property */ background-color: var(--vibrant-teal); } .calendar-day-event { /* Dynamic event color - set via CSS custom property */ background-color: var(--vibrant-teal); } .calendar-week-event { /* Dynamic positioning - set via CSS custom properties */ top: 0; height: auto; } .cards-view { margin: 0; padding: var(--space-12px); width: var(--size-100pct); } .cards-view--loading { min-height: var(--size-200px); display: flex; align-items: center; justify-content: center; text-align: center; } .cards-view--empty { min-height: var(--size-200px); display: flex; align-items: center; justify-content: center; text-align: center; } .cards-view__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-12px); } .cards-view__card { display: flex; flex-direction: column; gap: var(--space-12px); padding: var(--space-12px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--input-border); background: var(--white); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); min-width: 0; } .cards-view__card--interactive { cursor: pointer; } .cards-view__card--interactive:hover { background: var(--surface-hover-subtle); box-shadow: 0 2px 6px rgb(0 0 0 / 0.07); } .cards-view__card--interactive:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 2px; } .cards-view__card-header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-12px); } .cards-view__avatar { flex-shrink: 0; } .cards-view__avatar-image { inline-size: 40px; block-size: 40px; border-radius: 999px; } .cards-view__avatar-fallback { inline-size: 40px; block-size: 40px; border-radius: 999px; } .cards-view__avatar-image { object-fit: cover; display: block; } .cards-view__avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-hover-subtle); color: var(--text-primary); font-weight: 600; } .cards-view__heading { display: flex; flex: 1 1 14rem; min-width: 0; flex-direction: column; gap: var(--space-3px); } .cards-view__title { margin: 0; min-width: 0; overflow-wrap: anywhere; word-break: normal; } .cards-view__subtitle { margin: 0; min-width: 0; overflow-wrap: anywhere; word-break: normal; } .cards-view__status { margin: 0; } .cards-view__badge { margin: 0; } .cards-view__title { font-size: var(--font-size-18px); line-height: 1.25; } .cards-view__subtitle { color: var(--text-secondary); } .cards-view__signals { display: flex; flex: 0 0 auto; min-width: 0; max-width: 100%; flex-direction: column; gap: var(--space-6px); align-items: flex-end; } .cards-view__status { padding: var(--space-3px) var(--space-6px); border-radius: 999px; background: var(--surface-hover-subtle); max-width: 100%; overflow-wrap: anywhere; white-space: nowrap; } .cards-view__badge { padding: var(--space-3px) var(--space-6px); border-radius: 999px; background: var(--surface-hover-subtle); max-width: 100%; overflow-wrap: anywhere; white-space: normal; align-self: flex-start; } @media (max-width: 767px) { .cards-view { padding: var(--space-9px); } .cards-view--loading, .cards-view--empty { min-height: var(--size-120px); } .cards-view__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-9px); } .cards-view__card { gap: var(--space-9px); padding: var(--space-9px); } .cards-view__card-header { flex-direction: column; align-items: stretch; gap: var(--space-6px); } .cards-view__signals { align-items: flex-start; } } /* ============================================================ * Checklist View (UTStack view mode) * ============================================================ */ .checklist-view { margin: 0; padding: var(--space-9px) var(--space-12px); display: flex; flex-direction: column; gap: var(--space-9px); width: var(--size-100pct); } .checklist-view--loading { min-height: var(--size-200px); } .checklist-view__legend { padding: 0 var(--space-1px); opacity: 0.7; } .checklist-view__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-9px); width: var(--size-100pct); } .checklist-view__item { display: flex; align-items: center; gap: var(--space-9px); padding: var(--space-9px) var(--space-12px); border-radius: var(--radius-standard); cursor: grab; background: var(--white); border: var(--input-border-width-thin) solid var(--input-border); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); transition: box-shadow 0.1s ease, opacity 0.15s ease; } .checklist-view__item:hover { background: var(--surface-hover-subtle); box-shadow: 0 2px 6px rgb(0 0 0 / 0.07); } .checklist-view__item--done { opacity: 0.55; } .checklist-view__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } .checklist-view__title { margin: 0; } .checklist-view__title--done { text-decoration: line-through; } .checklist-view__detail-row--done { text-decoration: line-through; } .checklist-view__detail-row { display: flex; flex-wrap: wrap; gap: var(--space-9px); } .checklist-view__empty { padding: var(--space-12px); text-align: center; } /* Dev Debug Overlay */ .dev-debug-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; background: var(--strong-red); color: var(--white); padding: var(--space-6px) var(--space-10px); font-size: var(--size-11px); font-family: monospace; border-bottom: 2px solid var(--light-red); pointer-events: none; } .dev-debug-overlay__section { margin-top: var(--size-4px); } .disclosure { border-top: var(--input-border-width-thin) solid var(--border-default); padding-top: var(--space-9px); } .disclosure__summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-6px); color: var(--text-secondary); list-style: none; } .disclosure__summary::-webkit-details-marker { display: none; } .disclosure__caret { display: inline-flex; align-items: center; transition: transform var(--animation-quick) var(--easing-smooth); } details[open] > .disclosure__summary .disclosure__caret { transform: rotate(90deg); } .disclosure__body { margin-top: var(--space-9px); } .disclosure__entry-list { list-style: none; margin: var(--space-0); padding: var(--space-0); display: grid; gap: var(--space-9px); } .disclosure__entry { padding: var(--space-9px) var(--space-12px); border-radius: var(--radius-standard); background: var(--surface-hover-subtle); display: grid; gap: var(--space-2px); } .disclosure__entry-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12px); } .disclosure__entry-meta { margin: var(--space-0); } .disclosure__entry-message { overflow-wrap: anywhere; word-break: break-word; } .disclosure__entry-message--preserve-line-breaks { white-space: pre-wrap; } @media (max-width: 767px) { .disclosure__entry-header { align-items: flex-start; flex-direction: column; } } /** * Divider Component Styles * * Horizontal dividers with gradient styling for different background contexts. * Uses semantic tokens that provide appropriate contrast on dark or light backgrounds. */ .divider { display: block; height: var(--size-1px); border: none; background: transparent; margin-inline: auto; width: var(--size-75pct); margin-block-start: var(--space-1px); margin-block-end: var(--space-1px); } /* Variant: Light divider for dark backgrounds */ .divider--on-dark { background: var(--divider-on-dark); box-shadow: var(--divider-on-dark-shadow); } /* Variant: Dark divider for light backgrounds */ .divider--on-light { background: var(--divider-on-light); box-shadow: var(--divider-on-light-shadow); } /* * Canonical shared surface primitives used by React previews and mirrored by * Django email HTML. New surface-prefixed names are canonical. */ .surface-banner { margin: 0 0 var(--space-6px); border-radius: var(--radius-standard); overflow: hidden; background: var(--active-surface-gradient); padding: var(--space-20px) var(--space-24px); } .surface-banner__title { margin: 0; font-size: var(--font-size-24); line-height: 1.25; font-weight: var(--weight-bold); color: var(--text-on-dark); } .surface-banner__subtitle { margin: var(--space-8px) 0 0; font-size: var(--font-size-16); line-height: 1.45; color: var(--light-teal); } .surface-callout { width: var(--size-100pct); margin: 0 0 var(--space-14px); border: var(--input-border-width-thin) solid var(--amber-border); border-radius: var(--radius-standard); background: var(--amber-soft); border-spacing: 0; } .surface-callout__body { padding: var(--space-14px) var(--space-16px); } .surface-callout__text { margin: 0; font-size: var(--font-size-15); line-height: 1.45; color: var(--text-primary); } .surface-button { margin: 0 0 var(--space-14px); border-spacing: 0; } .surface-button--primary .surface-button__cell { border-radius: var(--radius-standard); background: var(--active-surface-gradient); text-align: center; } .surface-button--secondary .surface-button__cell { border: var(--input-border-width-md) solid var(--vibrant-teal); border-radius: var(--radius-standard); text-align: center; } .surface-button__cell { border-radius: var(--radius-standard); text-align: center; } .surface-button__link { display: inline-block; padding: var(--space-10px) var(--space-18px); text-decoration: none; font-size: var(--font-size-16); line-height: 1.2; font-weight: var(--weight-semibold); } .surface-button--primary .surface-button__link { color: var(--text-on-dark); } .surface-button--secondary .surface-button__link { min-width: var(--size-96px); padding: var(--space-10px) var(--space-16px); font-size: var(--font-size-15); font-weight: var(--weight-bold); color: var(--strong-teal); } @media only screen and (max-width: 600px) { .surface-banner { padding: var(--space-18px) var(--space-16px); } .surface-card__summary { display: block; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; } .surface-card__aside { display: block; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; } .surface-list-card__main, .surface-list-card__aside { display: block; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; } .surface-list-card__aside { padding-top: 0; } .surface-card__time-arrival { display: block; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; padding: 0 0 var(--space-12px); } .surface-card__time-departure { display: block; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; padding: 0; } .surface-card__aside-value { font-size: var(--font-size-22); line-height: 1.25; } } /* Easter Eggs and Fun UI Semantics (tokenized) */ .confetti-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--z-topmost); } /* Refresh indicator state tokenization */ .refresh-indicator { display: inline-block; color: var(--dark-slate); transition: color var(--animation-quick) ease; } .refresh-indicator--loading { color: var(--soft-teal); } .refresh-indicator--error { color: var(--strong-red); } .refresh-indicator--unknown { color: var(--dark-slate); } /* Generic visibility flag used by existing contextual selectors. Use a no-op custom property so the selector is non-empty without changing layout or color tokens. */ .is-visible { --easter-egg-visible: 1; } /* Generic unknown tag used in some utilities - same neutral marker. */ .unknown { --easter-egg-unknown: 1; } /* ============================================================================ ERROR BOUNDARY SEMANTIC CLASSES Fallback UI for component error states ============================================================================ */ .error-boundary__message { font-size: var(--font-size-12); margin-top: var(--space-1px); opacity: var(--opacity-medium); } /* Page-level error boundary — sits inside the shell, inline in the content area */ .page-error-boundary { padding: var(--space-24px); } .page-error-boundary__message { margin: 0 0 var(--space-12px); } .page-error-boundary__actions { display: flex; gap: var(--space-9px); flex-wrap: wrap; } .page-error-boundary__details { margin-top: var(--space-12px); font-size: var(--font-size-12); } /* ============================================================================ FEEDBACK SEMANTICS (CANONICAL SOURCE) This file is the exclusive home for shared feedback/error semantic classes. ============================================================================ */ .error-boundary { padding: var(--space-1-5px); background: var(--pale-red); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--strong-red); color: var(--deepest-red); font-size: var(--font-size-12); font-weight: var(--weight-medium); } .error-content { max-width: var(--size-100pct); overflow: hidden; font-size: var(--font-size-12); line-height: var(--line-height-normal); border-radius: var(--radius-standard); padding: var(--space-9px); display: flex; align-items: center; gap: var(--space-9px); background: var(--red-glass-whisper-05); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--strong-red); color: var(--strong-red); max-width: var(--width-280px); text-align: center; border-radius: var(--radius-standard); border-width: var(--input-border-width-none); } .inline-error { max-width: var(--size-100pct); overflow: hidden; font-size: var(--font-size-12); line-height: var(--line-height-normal); border-radius: var(--radius-standard); padding: var(--space-1-5px); align-items: center; gap: var(--space-1-5px); background: var(--red-glass-whisper-05); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--strong-red); color: var(--strong-red); text-align: left; margin-bottom: var(--space-1px); } .error-message { color: var(--strong-red); margin: var(--space-1px) 0; font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); } .error-boundary-inline { padding: var(--space-1-5px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--white-glass-strong-40); background: var(--dark-slate); color: var(--text-on-dark); } .error-boundary-popup-callout { padding: var(--space-1-5px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--white-glass-strong-40); background: var(--dark-slate); color: var(--text-on-dark); } .error-boundary-stack-trace { padding: var(--space-1-5px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--white-glass-strong-40); background: var(--dark-slate); color: var(--text-on-dark); } .error-boundary-inline__title { display: block; font-size: var(--font-size-12); } .error-boundary-inline-message { margin-top: var(--space-0-5px); font-size: var(--font-size-12); opacity: 0.75; } .error-boundary-inline-actions { margin-top: var(--space-1px); display: flex; flex-wrap: wrap; gap: var(--space-1px); } .error-boundary-action-group { margin-top: var(--space-1px); display: flex; flex-wrap: wrap; gap: var(--space-1px); } .error-boundary-message-block { margin-top: var(--space-1-5px); } .error-boundary-diagnosis { border-left: var(--input-border-width-thin) solid var(--white-glass-strong-40); padding-inline-start: var(--space-1-5px); margin-top: var(--space-1-5px); } .error-boundary-hook-details { margin-top: var(--space-1-5px); } .error-boundary-stack-trace { overflow-y: auto; max-height: var(--height-240px); } /* ============================================================ * Filter Surface (Canonical BEM Block) * ============================================================ */ .filter-surface { display: grid; grid-template-columns: var(--grid-template-cols-12); gap: var(--space-9px); container-type: inline-size; container-name: filter-surface; align-items: start; align-self: stretch; justify-content: flex-start; width: var(--size-100pct); min-width: 0; margin-bottom: 0; } /* Narrow hosts (side panels/drawers and mid-width panels) should stack instead of compressing multiple semantic-width controls into unreadable slivers. */ @container filter-surface (width < 720px) { .filter-surface > * { grid-column: var(--grid-span-full-start) / var(--grid-span-full-end); } .filter-surface > [class*="data--"] { width: var(--size-100pct); min-width: 0; max-width: none; } } .filter-surface__logic-label { font-size: var(--font-size-12); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 var(--space-1px); user-select: none; flex-shrink: 0; } .filter-surface > * { min-width: 0; grid-column: span var(--filter-surface-column-span); } /* Data-width classes (e.g. .data--id) set a hardcoded pixel width/max-width sized for a plain-text table cell — too narrow for an interactive filter control, which needs room for a chevron icon and padding on top of the text. Reused as a filter control's dataClassName, that undersized cap crushed the trigger down to an unreadable sliver (T-2249 follow-up). FIX: raise the floor to a size that fits an icon-bearing trigger, but keep it as a real max — do NOT remove the cap outright. Removing it entirely let some fields (e.g. .data--date, a 12ch-wide class) balloon to fill their full grid-column span: .form__row-field (a same-specificity, unrelated class also present on these elements, owned by the vertical form layout, not filter surfaces) defaults its OWN max-width to `none` and grid-column to `span 12`, and an unbounded max-width here left that default free to stretch the box across the whole row. max() only ever raises a too-small value; it never removes a real one, so a class whose own width already exceeds the floor (or whose grid-column genuinely spans wide on purpose) is unaffected. Also re-assert the intended grid-column span here (this selector's specificity beats .form__row-field's) so a correctly-narrow field doesn't sit inside an oversized grid cell either. */ .filter-surface > [class*="data--"] { /* ch, not rem: every other width token in this system (--width-Nch) is character-based so a human can eyeball "how wide is this" by the number alone. 16ch covers icon + padding + a short value/placeholder for any select-style trigger; --width-8ch measured ~53px for 8ch, so 16ch lands comfortably over the ~90-110px an icon-bearing trigger needs. */ --filter-surface-trigger-min-width: var(--width-16ch); width: max(var(--width, 0px), var(--filter-surface-trigger-min-width)); min-width: max(var(--width, 0px), var(--filter-surface-trigger-min-width)); max-width: max(var(--width, 0px), var(--filter-surface-trigger-min-width)); grid-column: span var(--filter-surface-column-span, 3); } .filter-surface__actions-cell { min-width: 0; display: flex; align-items: flex-end; justify-content: flex-end; } .filter-surface__state-filter-cluster { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-3px); grid-column: span 4; } .filter-surface__state-operator-cell { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-3px); } .filter-surface__operator-text { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--font-size-12); } #state-filter-operator-label { display: block; } .filter-surface__operator-switch { display: block; align-self: center; --switch-track-width: var(--size-44px); --switch-track-height: var(--size-24px); --switch-thumb-size: var(--size-18px); --switch-thumb-offset: var(--space-3px); --switch-thumb-offset-checked: calc(var(--size-44px) - var(--size-24px) + var(--space-3px)); } @media (max-width: 767px) { .filter-surface { grid-template-columns: var(--grid-template-cols-1); } .filter-surface > * { grid-column: var(--grid-span-full-start) / var(--grid-span-full-end); } .filter-surface > [class*="data--"] { width: var(--size-100pct); min-width: 0; max-width: none; } } .staffing-map__container { width: var(--size-100pct); height: var(--space-72); min-height: var(--size-200px); max-height: var(--size-max-height-screen-30); } .live-punch-map-section { position: relative; isolation: isolate; contain: paint; } .live-punch-tracking__fine-print { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: var(--size-100pct); } .live-punch-tracking__fine-print-legend { flex: 0 0 auto; } .live-punch-tracking__fine-print-meta { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; margin-inline-start: auto; white-space: nowrap; } .kpi-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--kpi-tile-padding-block) var(--kpi-tile-padding-inline); width: 100%; background: var(--tiertiary-surface-gradient); backdrop-filter: var(--backdrop-glass-medium); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-depth-crisp) var(--black-glass-whisper-08), var(--shadow-depth-soft) var(--black-glass-soft-12), var(--inset-0) var(--input-border-width-thin) var(--space-0) var(--white-glass-visible-15); color: var(--text-primary); cursor: default; transition: background var(--animation-smooth) var(--easing-smooth), border-color var(--animation-smooth) var(--easing-smooth), box-shadow var(--animation-smooth) var(--easing-smooth), transform var(--animation-smooth) var(--easing-smooth); } .kpi-tile[role="button"]:hover { transform: translateY(var(--lift-subtle)); filter: brightness(1.04); cursor: pointer; } /* Active KPI tiles (used as filters) */ .kpi-tile--active { background: var(--active-surface-gradient); border-color: var(--accent-teal); box-shadow: var(--shadow-depth-crisp) var(--black-glass-soft-12), var(--shadow-depth-soft) var(--black-glass-whisper-08), var(--inset-0) var(--input-border-width-thin) var(--space-0) var(--white-glass-medium-30); transform: translateY(var(--lift-subtle)); cursor: pointer; color: var(--text-on-primary); } .kpi-tile__label--active { color: var(--text-on-primary); } .kpi-tile__content { display: grid; grid-template-columns: auto auto; gap: var(--kpi-tile-content-gap); align-items: center; justify-content: stretch; width: fit-content; margin-inline: 0; } .kpi-tile__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; justify-self: center; } .kpi-tile__svg { width: var(--kpi-tile-icon-size); height: var(--kpi-tile-icon-size); display: block; stroke: currentColor; } .kpi-tile__text-column { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2px); width: fit-content; } .kpi-tile__value { font-size: var(--kpi-tile-value-font-size); font-weight: var(--weight-light); white-space: nowrap; text-align: center; line-height: var(--line-height-tight); } .kpi-tile__label { font-size: var(--kpi-tile-label-font-size); font-weight: var(--weight-medium); line-height: 1.2; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; word-break: normal; overflow-wrap: normal; hyphens: none; white-space: normal; } .kpi-grid { display: flex; flex-direction: column; gap: var(--kpi-grid-gap); container-type: inline-size; width: 100%; } .kpi-grid__group { display: flex; flex-direction: column; gap: var(--kpi-grid-group-gap); padding-block: var(--kpi-grid-group-padding-block); width: 100%; } .kpi-grid__label { display: flex; align-items: center; } .kpi-grid__tiles { /* Batch owner: each row measures the widest tile content, then repeats one shared track width so every KPI cell in the batch stays uniform and the tile shell fills it. */ display: grid; grid-auto-flow: row; align-items: stretch; align-content: start; justify-content: start; justify-items: stretch; gap: var(--kpi-grid-gap); margin-inline: 0; width: 100%; grid-template-columns: repeat(auto-fit, max-content); } /* ============================================================================ INLINE KPI TILES (smaller normal tiles with label omitted) ============================================================================ */ .kpi-tile--inline { padding-block: var(--space-1px); padding-inline: var(--space-2px); --kpi-tile-icon-size: var(--size-14px); --kpi-tile-value-font-size: var(--size-14px); --kpi-tile-content-gap: var(--space-1px); } .kpi-tile-tide-tracker { padding: var(--space-2px) var(--space-3px); --kpi-tile-icon-size: var(--size-18px); --kpi-tile-value-font-size: var(--size-18px); } .kpi-tile__content-tide-tracker { gap: var(--space-2px); } .kpi-tile__value-tide-tracker { font-size: var(--kpi-tile-value-font-size); line-height: var(--line-height-tight); } .kpi-tile__label-tide-tracker { white-space: normal; overflow-wrap: normal; word-break: normal; } /* Lonely bird for empty states */ .bird--lonely { width: var(--size-80px); height: var(--size-80px); } .public-marketing-page-scroll { min-height: 100%; } .mkt-section { padding-block: var(--size-48px); } .mkt-container { width: min(var(--size-100pct), var(--size-1200px)); margin-inline: auto; padding-inline: var(--size-24px); } .mkt-split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-24px); } .mkt-section-label { margin: 0; } .mkt-section-title { margin: 0; } .mkt-section-title > * { margin: 0; } .mkt-section-body { margin: 0; } .mkt-section-body > * { margin: 0; } .mkt-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: var(--size-10px) var(--size-16px); text-decoration: none; transition: background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } .mkt-split__text { display: flex; flex: 1 1 var(--size-320px); flex-direction: column; gap: var(--size-16px); } .mkt-split__actions { display: flex; flex-wrap: wrap; gap: var(--size-12px); margin-top: var(--size-8px); } .mkt-btn--outline { border: var(--size-1px) solid var(--color-brand); color: var(--color-brand); } .mkt-btn--primary { background: var(--color-brand); border: var(--size-1px) solid var(--color-brand); color: var(--white); } .mkt-split__image { flex: 1 1 var(--size-320px); } .mkt-split__image-photo { border-radius: var(--mkt-card-radius); box-shadow: var(--mkt-shadow-image); display: block; height: auto; inline-size: 100%; } .mkt-hero__overlay { background: linear-gradient( to bottom, var(--black-glass-faint-10), var(--black-glass-subtle-05) ); inset: 0; position: absolute; } .mkt-hero { position: relative; display: grid; align-items: end; } .mkt-hero > img { grid-area: 1 / 1; width: 100%; height: auto; display: block; } .mkt-hero__overlay, .mkt-hero__content { grid-area: 1 / 1; } .mkt-hero__content { position: relative; z-index: 2; margin: 0; padding: var(--size-32px) var(--size-12px) var(--size-72px); inline-size: min(100%, var(--width-643px)); } .mkt-hero__title { display: block; inline-size: 100%; max-inline-size: var(--width-643px); } .mkt-hero__eyebrow { margin: 0; } .mkt-hero__subtitle { margin: 0; } .mkt-hero__title { margin: 0; } .mkt-hero__title > * { margin: 0; } .mkt-hero__eyebrow > * { margin: 0; } .mkt-hero__subtitle > * { margin: 0; } .mkt-hero__content > article > * { margin: 0; } .mkt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--size-12px); } .mkt-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--size-12px); } .mkt-cta-band__content { display: flex; flex-direction: column; gap: var(--size-12px); margin: 0 auto; max-inline-size: var(--size-840px); } .mkt-cta-band__title { margin: 0; } .mkt-cta-band__title > * { margin: 0; } .mkt-cta-band__subtitle { margin: 0; } .mkt-cta-band__subtitle > * { margin: 0; } .mkt-cta-band__content > article > * { margin: 0; } .mkt-section--alt { background: var(--white-smoke); } .mkt-section--dark { background: var(--color-ink-900); color: var(--white); } .mkt-feature-grid--mt { margin-top: var(--size-24px); } .mkt-intro-text--sm { max-inline-size: var(--size-720px); } .mkt-section-title--on-dark { color: inherit; } .mkt-feature-card__icon { margin-bottom: var(--size-8px); } .mkt-feature-card__title { margin: 0; } .mkt-feature-card__body { margin: 0; } .mkt-feature-card__title > * { margin: 0; } .mkt-feature-card__body > * { margin: 0; } .mkt-feature-card > article > * { margin: 0; } .mkt-feature-card--link { color: inherit; text-decoration: none; } .mkt-feature-card { display: flex; flex-direction: column; gap: var(--size-10px); } .mkt-feature-icon { margin-bottom: var(--size-8px); } .mkt-features-grid { display: grid; gap: var(--size-16px); } .mkt-features { display: flex; flex-direction: column; gap: var(--size-16px); } .mkt-join-role-card__icon { margin-bottom: var(--size-10px); } .mkt-join-role-card__content { display: flex; flex: 1; flex-direction: column; gap: var(--size-8px); } .mkt-join-role-card__title { margin: 0; } .mkt-join-role-card__title > * { margin: 0; } .mkt-join-role-card__body { margin: 0; } .mkt-join-role-card__body > * { margin: 0; } .mkt-join-role-card__content > article > * { margin: 0; } .mkt-join-role-card__tags { display: flex; flex-wrap: wrap; gap: var(--size-8px); } .mkt-step__number { margin-bottom: var(--size-6px); } .mkt-step__content { display: flex; flex-direction: column; gap: var(--size-6px); } .mkt-step__title { margin: 0; } .mkt-step__title > * { margin: 0; } .mkt-step__body { margin: 0; } .mkt-step__body > * { margin: 0; } .mkt-step__content > article > * { margin: 0; } .mkt-testimonial__author { display: flex; flex-direction: column; gap: var(--size-4px); } .mkt-stat { display: flex; flex-direction: column; gap: var(--size-4px); } .mkt-testimonial { display: flex; flex-direction: column; gap: var(--size-10px); } .mkt-testimonial__role { display: inline-flex; opacity: var(--opacity-75); } .mkt-testimonial__quote { margin: 0; } .mkt-testimonial__role { margin: 0; } .mkt-testimonial__quote > * { margin: 0; } .mkt-testimonial__role > * { margin: 0; } .mkt-testimonial > article > * { margin: 0; } .mkt-stats { display: grid; gap: var(--size-16px); grid-template-columns: repeat(auto-fit, minmax(var(--size-120px), 1fr)); } .mkt-hero--bg-image { background-position: center; background-repeat: no-repeat; background-size: cover; } /** * MobileNavBar - Modern mobile bottom navigation * * Features: * - aesthetic (iOS-style) * - Smooth sliding active indicator * - Spring animations * - Glassmorphism backdrop * - Always-visible labels * - Grid-based layout * - Performance optimized */ /* ============================================================================= Container & Island ============================================================================= */ .mobile-nav-bar { --active-index: 0; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--active-surface-gradient); border-top: 1px solid var(--teal-glass-soft-12); padding: var(--space-0-5px) var(--space-1-5px); padding-bottom: calc(var(--space-0-5px) + env(safe-area-inset-bottom)); pointer-events: auto; } /* Island container - floating pill design */ .mobile-nav-bar__island { position: relative; width: var(--size-100pct); max-width: none; margin: 0; background: transparent; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; pointer-events: auto; overflow: visible; /* Subtle animation on mount */ animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-nav-bar__island::before { display: none; } @keyframes slide-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================= Active Indicator (Sliding Pill) ============================================================================= */ .mobile-nav-bar__active-indicator { position: absolute; top: 0; left: 0; height: var(--nav-item-size); width: var(--nav-item-size); background: var(--white-glass-soft-12); border-radius: var(--radius-standard); border: 1px solid var(--white-glass-strong-20); box-shadow: inset 0 1px 0 var(--white-glass-visible-15), 0 6px 12px var(--black-glass-whisper-08); /* Spring animation */ transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; } /* ============================================================================= Tab Items Grid ============================================================================= */ .mobile-nav-bar__items { --nav-item-size: var(--size-52px); --nav-gap: var(--space-0-5px); position: relative; z-index: 2; display: flex; gap: var(--nav-gap); align-items: center; padding: 0; min-height: var(--nav-item-size); overflow-x: auto; scroll-snap-type: x mandatory; } /* Individual tab item (Button / Button primitives inside nav container) * Note: Use .mobile-nav-bar__btn class on buttons for proper styling */ .mobile-nav-bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5px); padding: var(--space-1px) var(--space-0-5px); min-height: var(--nav-item-size); min-width: 0; flex: 1 1 0; width: auto; height: var(--nav-item-size); scroll-snap-align: center; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-standard); position: relative; z-index: 2; box-shadow: none; align-self: center; border: 0; max-width: none; max-height: none; /* Smooth transitions */ transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Hover state () */ @media (hover: hover) { .mobile-nav-bar__btn:hover { color: var(--text-primary); } } /* Active state */ .mobile-nav-bar__btn[aria-current='page'] { color: var(--text-on-primary); } .mobile-nav-bar__btn--active { color: var(--text-on-primary); } /* Press feedback */ .mobile-nav-bar__btn:active { transform: scale(0.95); } /* Focus visible for keyboard navigation */ .mobile-nav-bar__btn:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: var(--size-2px); } /* ============================================================================= Icon & Label ============================================================================= */ /* ============================================================================= Notification Badge ============================================================================= */ .mobile-nav-bar__badge { position: absolute; top: calc(-1 * var(--size-4px)); right: calc(-1 * var(--size-4px)); min-width: var(--size-18px); height: var(--size-18px); padding: 0 var(--space-4px); display: flex; align-items: center; justify-content: center; background: var(--strong-red); color: var(--text-on-primary); border-radius: var(--radius-pill); font-size: var(--font-size-12); font-weight: var(--weight-bold); line-height: var(--line-height-110pct); box-shadow: 0 2px 6px var(--red-glass-heavy-40), 0 0 0 2px var(--white-glass-faint-10); /* Pop-in animation */ animation: badge-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes badge-pop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } /* ============================================================================= Responsive Adjustments ============================================================================= */ /* Tablet: keep same dense square sizing */ @media (min-width: 640px) { .mobile-nav-bar { padding: var(--space-0-5px) var(--space-9px); padding-bottom: calc(var(--space-0-5px) + env(safe-area-inset-bottom)); } } /* Very small screens: tighten padding */ @media (max-width: 359px) { .mobile-nav-bar { padding: var(--space-1-5px); padding-bottom: calc(var(--space-1px) + env(safe-area-inset-bottom)); } } /* ============================================================================= Layout Adjustment for Content ============================================================================= */ /* Ensure content doesn't sit under the nav bar — 52px item + 2*(space-2xs ~4px) + safe area */ .layout--with-mobile-navbar { padding-bottom: calc(52px + var(--space-1-5px) + env(safe-area-inset-bottom)); } /* ============================================================================= Reduced Motion Support ============================================================================= */ /* Accessibility: disable motion for users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { .mobile-nav-bar__island { animation: none; transition-duration: 0.01ms; } .mobile-nav-bar__active-indicator { animation: none; transition-duration: 0.01ms; } .mobile-nav-bar__btn { animation: none; transition-duration: 0.01ms; } .mobile-nav-bar__badge { animation: none; transition-duration: 0.01ms; } .fab__button--mobile-nav { animation: none; transition-duration: 0.01ms; } } /* ============================================================================= Dark Mode Support (Future) ============================================================================= */ @media (prefers-color-scheme: dark) { .mobile-nav-bar__island { background: var(--black-glass-solid-60); border-color: var(--white-glass-faint-10); } .mobile-nav-bar__btn { color: var(--text-on-dark); } .mobile-nav-bar__btn[aria-current='page'] { color: var(--text-on-primary); } } /* ============================================================================= Server-rendered public app shell — CSS-only responsive nav switch. The React app decides sidebar-vs-bottom-nav via useMobileLayout(); the Django-rendered public shell has no JS layout hook, so it renders both and lets these breakpoints pick one. ============================================================================= */ @media (max-width: 767px) { .public-app-shell-responsive .app-shell__sidebar { display: none; } .public-app-shell-responsive .app-shell__main { padding-bottom: calc(52px + var(--space-1-5px) + env(safe-area-inset-bottom)); } } @media (min-width: 768px) { .public-app-shell-responsive .mobile-nav-bar { display: none; } } /* ============================================================================= MOBILE TAB SEMANTICS ============================================================================= Mobile bottom tab bar navigation with elevated active state. iOS-style notched design with circular elevated icon. Tokens in semantic-tokens/77-tab-semantics-tokens.css ============================================================================= */ .mobile-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-nav-height); display: flex; justify-content: space-around; align-items: flex-end; /* Match active section tabs chrome */ background: var(--active-surface-gradient); border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12); z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: var(--shadow-subtle); } .mobile-tab-bar__link { flex: 1; align-items: center; justify-content: flex-end; min-height: var(--size-32px); padding: var(--space-9px); padding-bottom: var(--space-2-5px); color: var(--text-on-dark); transition: all var(--animation-quick) ease; text-decoration: none; gap: var(--space-0-5px); position: relative; } .mobile-tab-bar__link:hover { color: var(--deepest-slate); } /* Active tab - creates the elevated circular icon */ .mobile-tab-bar__link--active { color: var(--text-on-dark); } /* Icon container */ .mobile-tab-bar__icon { transition: all var(--animation-smooth) cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; z-index: 2; } /* Active tab icon - elevated in a circle */ .mobile-tab-bar__icon--active { position: absolute; top: var(--mobile-nav-icon-elevation); background: var(--active-surface-gradient); color: var(--text-on-primary); border-radius: var(--radius-pill); padding: var(--space-9px); width: var(--size-56px); height: var(--size-56px); box-shadow: var(--shadow-glow-soft); animation: bounce-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* effect behind active tab */ .mobile-tab-bar__link--active::before { content: ''; position: absolute; top: var(--mobile-nav-notch-top); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)); width: var(--mobile-nav-notch-width); height: var(--mobile-nav-notch-height); background: var(--active-surface-gradient); border-radius: 0 0 var(--mobile-nav-notch-radius) var(--mobile-nav-notch-radius); box-shadow: 0 -2px 0 0 var(--active-surface-gradient), inset 0 2px 8px var(--white-glass-visible-15); z-index: 1; } /* Curved cutout shadows on either side of the notch */ .mobile-tab-bar__link--active::after { content: ''; position: absolute; top: var(--mobile-nav-notch-top); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)); width: var(--mobile-nav-cutout-width); height: var(--mobile-nav-notch-height); box-shadow: calc(var(--mobile-nav-cutout-offset) * -1) 0 0 0 var(--active-surface-gradient), var(--mobile-nav-cutout-offset) 0 0 0 var(--active-surface-gradient); z-index: 0; } .mobile-tab-bar__label { display: none; } .mobile-tab-bar__badge { position: absolute; top: var(--space-1px); right: calc(50% - var(--space-9px)); background: var(--strong-red); color: var(--text-on-primary); border-radius: var(--radius-pill); width: var(--space-12px); height: var(--space-12px); font-size: var(--font-size-12); /* 12px min for badge readability */ display: flex; align-items: center; justify-content: center; min-width: var(--space-12px); font-weight: var(--weight-bold); box-shadow: var(--shadow-soft); } /* Badge position adjustment for active tab */ .mobile-tab-bar__badge--active { top: var(--mobile-nav-badge-active-top); right: calc(50% - var(--mobile-nav-badge-active-right)); } /* Mobile tab animations */ /* Navigation tiles (scoped) — used for section landing pages like ShaneSpot */ .navigation-tiles { padding: var(--space-18px); } .navigation-tiles__header { margin-bottom: var(--space-12px); } .navigation-tiles__title-row { display: inline-flex; gap: var(--space-1-5px); align-items: center; } .navigation-tiles__title { margin: 0; line-height: var(--line-height-tight); } .navigation-tiles__item-title { margin: 0; line-height: var(--line-height-tight); } .navigation-tiles__description { margin: var(--space-1px) 0 0; } /* .navigation-tiles__body intentionally left without base rules; add only when needed. */ .navigation-tiles__category { margin-top: var(--space-18px); } .navigation-tiles__category-title { margin: 0 0 var(--space-1-5px); } /* Responsive grid for tiles (inline grid semantics; no @extend) */ .navigation-tiles__grid { display: grid; gap: var(--space-18px); grid-template-columns: repeat(auto-fill, minmax(var(--width-240px), 1fr)); } /* Wrapper so the favorite button can be absolutely positioned */ .navigation-tiles__item-wrapper { position: relative; } .navigation-tiles__favorite { position: absolute; top: var(--space-1-5px); left: var(--space-1-5px); /* Removed fallback literal to satisfy lint rule */ z-index: var(--z-overlay); border: none; background: transparent; color: var(--medium-slate); padding: var(--space-1px); border-radius: var(--radius-standard); } .navigation-tiles__favorite:hover { color: var(--dark-slate); background: var(--light-slate); } /* Use semantic emphasis token instead of raw warning to pass restricted color rule */ .navigation-tiles__favorite--active { color: var(--strong-sunset); } /* Clickable tile styles */ .navigation-tiles__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6px); width: var(--size-100pct); text-align: left; padding: var(--space-6px) var(--space-7px); min-height: var(--size-104px); border-radius: var(--radius-standard); text-decoration: none; color: var(--text-primary); } .navigation-tiles__item:hover { text-decoration: none; color: var(--text-primary); } .navigation-tiles__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-32px); height: var(--size-32px); border-radius: var(--radius-pill); color: var(--dark-teal); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-dark-glass-clear-18); } .navigation-tiles__content { display: grid; gap: var(--space-1px); } .navigation-tiles__item-description { margin: 0; } .navigation-tiles__chevron { color: var(--medium-slate); } .navigation-tiles__chevron-icon { display: block; } /* Dense variant tightens spacing */ .navigation-tiles__grid--dense { gap: var(--space-9px); } .navigation-tiles__item--dense { padding: var(--space-9px); } @media (max-width: 767px) { /* Favorite button: 20px icon + 4px padding = 28px total. Needs 44px. */ .navigation-tiles__favorite { min-width: var(--touch-target-min); min-height: var(--touch-target-min); display: flex; align-items: center; justify-content: center; } } .banner { /* Banner is part of layout flow (must push content down, never overlay the app). */ position: relative; /* Must outrank fixed-position widgets (e.g. the top-right FAB) that can otherwise sit on top of banner actions and swallow their clicks. */ z-index: var(--z-banner); display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; padding: 0; font-family: var(--font-family-primary); font-size: var(--font-size-16); font-weight: var(--weight-medium); line-height: var(--line-height-tight); animation: slideDownIn var(--animation-smooth) var(--easing-snappy); } @keyframes slideDownIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .banner--clickable { cursor: pointer; } /* Mobile responsive banner styles */ @media (max-width: 767px) { .banner { flex-wrap: nowrap; font-size: var(--font-size-15); } } /* Toast notifications */ :root { /* Keep toast stacks clear of bottom-right floating action buttons (FAB). */ --toast-bottom-offset: calc( var(--fab-offset-fluid) + var(--fab-size-fluid) + var(--space-9px) + env(safe-area-inset-bottom, 0) ); } @media (max-width: 767px) { :root { /* On mobile, also clear the bottom navigation bar. */ --toast-bottom-offset: calc( var(--mobile-nav-height) + var(--fab-offset-fluid) + var(--fab-size-fluid) + var(--space-9px) + env(safe-area-inset-bottom, 0) ); } /* Mobile legibility: larger text and better spacing */ .toast { font-size: var(--font-size-14); max-width: calc(var(--size-viewport-full) - var(--space-12px)); padding: var(--space-3-5px); } .toast__message { font-size: var(--font-size-14); } .toast__content--stacked { gap: var(--space-1px); } .toast__text { gap: var(--space-1px); line-height: var(--line-height-150pct); } /* Ensure buttons are touch-friendly (min 44x44px tap target) */ .toast__close-button { min-width: var(--size-44px); min-height: var(--size-44px); padding: var(--space-1-5px); } /* Dense toast action buttons on mobile (still tap-friendly). */ .toast__actions { gap: var(--space-1px); } } .toast { min-width: var(--width-240px); max-width: var(--width-280px); font-size: var(--font-size-12); line-height: var(--line-height-138pct); color: var(--deepest-slate); background: var(--white-glass-frosted-90); /* Fallback for browsers without backdrop-filter support */ background-color: var(--white-glass-full-95); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--teal-glass-medium-30); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); overflow: hidden; backdrop-filter: var(--blur-md); padding: var(--space-9px); /* Entrance animation: start off-screen and fade in */ transform: translateY(var(--space-12px)); opacity: 0; transition: opacity var(--animation-smooth) var(--easing-snappy), box-shadow var(--animation-quick) ease, transform var(--animation-smooth) var(--easing-snappy); } /* Visible state - toast slides up and fades in */ .toast--visible { transform: translateY(0); opacity: 1; } /* Closing state - toast slides down and fades out */ .toast--closing { transform: translateY(var(--space-12px)); opacity: 0; transition: opacity var(--animation-quick) ease, transform var(--animation-quick) ease; } .toast:hover { box-shadow: var(--shadow-float-sm); transform: translateY(calc(var(--transform-lift) * -1)); } /* Ensure hover doesn't override closing animation */ .toast--closing:hover { transform: translateY(var(--space-12px)); } /* Focus state for accessibility */ .toast:focus-within { box-shadow: var(--focus-ring), var(--shadow-float-sm); } /* Reduced motion: disable animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--animation-instant) ease; transform: none; } .toast--visible { transform: none; } .toast--closing { transform: none; transition: opacity var(--animation-instant) ease; } .toast:hover { transform: none; } .toast__close-button:hover { transform: none; } .toast__close-button:active { transform: none; } } /* RTL support: mirror toast position for right-to-left languages — apply .toast__stack--rtl in JS */ /* Print styles: hide toasts when printing */ @media print { .toast { display: none; } } /* Dark mode: enhance contrast for better readability */ @media (prefers-color-scheme: dark) { .toast { /* Dark mode uses slate-850-alpha-92 for frosted glass */ /* Ensure border is visible in dark mode */ border-color: var(--teal-glass-medium-30); /* Stronger shadow for better depth perception */ box-shadow: var(--shadow-float-sm); } .toast:hover { box-shadow: var(--shadow-float-md); } .toast__icon { /* Brighter teal in dark mode for better visibility */ color: var(--vibrant-teal); } } .toast__content { display: grid; grid-template-columns: var(--space-20px) 1fr auto; gap: var(--space-9px); align-items: start; padding: 0; } @media (max-width: 767px) { .toast__content { /* Stack vertically on mobile for better readability */ grid-template-columns: var(--space-20px) 1fr; grid-template-rows: auto auto; gap: var(--space-1-5px); } .toast__text { grid-column: 1 / -1; padding-left: calc(var(--space-20px) + var(--space-9px)); } .toast__actions { grid-column: 1 / -1; justify-content: flex-end; padding: 0 var(--space-1-5px); } } /* Stacked variant for action toasts: icon+text in row, actions below */ /* NOTE: No padding here — when used inside react-toastify (ActionToast), toastify's wrapper already provides padding via --toastify-toast-padding */ .toast__content--stacked { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: var(--space-1-5px); padding: 0; } .toast__content-row { display: grid; grid-template-columns: var(--space-20px) 1fr; gap: var(--space-9px); align-items: start; } .toast__text { display: flex; flex-direction: column; gap: var(--space-1px); } .toast__icon { color: var(--deep-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toast__title { font-weight: var(--weight-semibold); font-size: var(--font-size-12); margin-bottom: var(--space-0-5px); color: var(--deepest-slate); line-height: var(--line-height-125pct); } .toast__message { color: var(--deeper-slate); font-size: var(--font-size-12); line-height: var(--line-height-150pct); word-break: break-word; overflow-wrap: anywhere; } @media (max-width: 767px) { .toast__title { font-size: var(--font-size-14); } .toast__message { font-size: var(--font-size-14); } } .toast__actions { display: flex; align-items: center; gap: var(--space-1px); flex-shrink: 0; flex-wrap: nowrap; } @media (max-width: 767px) { .toast__actions { gap: var(--space-0-5px); } } /* For stacked toasts, actions appear below content and need full width */ .toast__actions--stacked { margin-left: 0; padding-left: 0; justify-content: flex-start; } .toast__action { padding: var(--space-1px) var(--space-9px); border-radius: var(--radius-standard); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); background: var(--white-glass-frosted-90); cursor: pointer; font-size: var(--font-size-12); transition: all var(--animation-quick) var(--easing-smooth); } .toast__action:hover { background: var(--white-glass-bright-86); border-color: var(--medium-teal); color: var(--deep-teal); } .toast__action:focus-visible { box-shadow: var(--focus-ring-subtle); } .toast__action:active { transform: scale(0.98); } .toast__undo-button { display: inline-flex; align-items: center; gap: var(--space-1px); padding: var(--space-1px) var(--space-1-5px); background: var(--teal-light-glass-heavy-65); border: none; border-radius: var(--radius-standard); font-size: var(--font-size-12); font-weight: var(--weight-medium); cursor: pointer; color: var(--text-on-primary); transition: background var(--animation-quick) var(--easing-smooth), transform var(--animation-quick) var(--easing-smooth); } .toast__undo-button:hover { background: var(--teal-light-glass-heavy-80); transform: translateY(calc(var(--transform-lift) * -1)); } .toast__undo-button:focus-visible { box-shadow: var(--focus-ring-subtle); } .toast__undo-button:active { transform: translateY(0); } .toast__close-button { padding: var(--space-1px); color: var(--soft-slate); border-radius: var(--radius-standard); transition: all var(--animation-quick) var(--easing-smooth); } .toast__close-button:hover { background: var(--white-glass-medium-30); color: var(--deepest-slate); transform: scale(1.1); } .toast__close-button:focus-visible { box-shadow: var(--focus-ring-subtle); } .toast__close-button:active { transform: scale(0.95); } .toast__progress { position: absolute; inset-inline: 0; bottom: 0; height: var(--dark-slate); background: var(--white-glass-medium-30); overflow: hidden; } .toast__progress-bar { height: var(--size-100pct); transition: width 0.016s linear; background: var(--medium-teal); } /* All toasts use the same glassy teal design - icons differentiate type, not colors */ .toast__progress-bar--success { background: var(--strong-teal); } .toast__progress-bar--warning { background: var(--strong-sunset); } .toast__progress-bar--error { background: var(--strong-red); } .toast__progress-bar--info { background: var(--medium-teal); } /* icon alignment */ .alert__icon /* DEPRECATED: use .alert__icon */ { flex-shrink: 0; margin-top: var(--space-0-5px); } .alert-icon /* DEPRECATED: use .alert__icon */ { flex-shrink: 0; margin-top: var(--space-0-5px); } .alert__icon--inline /* DEPRECATED: use .alert__icon--inline */ { flex-shrink: 0; margin-top: 0; } .alert-icon--inline /* DEPRECATED: use .alert__icon--inline */ { flex-shrink: 0; margin-top: 0; } /* Context Menu - Right-click contextual actions */ .context-menu__trigger /* DEPRECATED: use .context-menu__trigger */ { display: contents; } .context-menu-trigger /* DEPRECATED: use .context-menu__trigger */ { display: contents; } .context-menu__anchor { --context-menu-anchor-x: var(--inset-0); --context-menu-anchor-y: var(--inset-0); position: fixed; left: var(--context-menu-anchor-x); top: var(--context-menu-anchor-y); width: 0; height: 0; pointer-events: none; } .context-menu { position: fixed; left: var(--inset-0); top: var(--inset-0); z-index: var(--z-popover); background: var(--white); border: var(--soft-slate); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); padding: var(--space-1px); min-width: var(--width-200px); max-width: var(--width-280px); animation: contextMenuFadeIn var(--animation-quick) var(--easing-smooth); } @keyframes contextMenuFadeIn { from { opacity: 0; transform: scale(0.95) translateY(var(--transform-lift)); } to { opacity: 1; transform: scale(1) translateY(0); } } .context-menu__separator /* DEPRECATED: use .context-menu__separator */ { height: var(--size-1px); background: var(--soft-slate); margin: var(--space-1px) 0; } .context-menu-separator /* DEPRECATED: use .context-menu__separator */ { height: var(--size-1px); background: var(--soft-slate); margin: var(--space-1px) 0; } .context-menu__item /* DEPRECATED: use .context-menu__item */ { all: unset; display: flex; align-items: center; justify-content: space-between; width: var(--size-100pct); padding: var(--space-1-5px) var(--space-9px); border-radius: var(--radius-standard); cursor: pointer; font-size: var(--font-size-12); color: var(--deepest-slate); transition: background var(--animation-quick) var(--easing-smooth); user-select: none; } .context-menu-item /* DEPRECATED: use .context-menu__item */ { all: unset; display: flex; align-items: center; justify-content: space-between; width: var(--size-100pct); padding: var(--space-1-5px) var(--space-9px); border-radius: var(--radius-standard); cursor: pointer; font-size: var(--font-size-12); color: var(--deepest-slate); transition: background var(--animation-quick) var(--easing-smooth); user-select: none; } .context-menu__item:hover /* DEPRECATED: use .context-menu__item */ { background: var(--soft-slate); } .context-menu-item:hover /* DEPRECATED: use .context-menu__item */ { background: var(--soft-slate); } .context-menu__item:active /* DEPRECATED: use .context-menu__item */ { background: var(--slate-glass-light-20); } .context-menu-item:active /* DEPRECATED: use .context-menu__item */ { background: var(--slate-glass-light-20); } .context-menu__item--danger /* DEPRECATED: use .context-menu__item--danger */ { color: var(--strong-red); } .context-menu-item--danger /* DEPRECATED: use .context-menu__item--danger */ { color: var(--strong-red); } .context-menu__item--danger:hover /* DEPRECATED: use .context-menu__item--danger */ { background: var(--red-glass-faint-10); } .context-menu-item--danger:hover /* DEPRECATED: use .context-menu__item--danger */ { background: var(--red-glass-faint-10); } .context-menu__item--disabled /* DEPRECATED: use .context-menu__item--disabled */ { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .context-menu-item--disabled /* DEPRECATED: use .context-menu__item--disabled */ { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .context-menu__item-content /* DEPRECATED: use .context-menu__item-content */ { display: flex; align-items: center; gap: var(--space-9px); } .context-menu-item-content /* DEPRECATED: use .context-menu__item-content */ { display: flex; align-items: center; gap: var(--space-9px); } .context-menu__item-icon /* DEPRECATED: use .context-menu__item-icon */ { width: var(--size-16px); height: var(--size-16px); flex-shrink: 0; } .context-menu-item-icon /* DEPRECATED: use .context-menu__item-icon */ { width: var(--size-16px); height: var(--size-16px); flex-shrink: 0; } .context-menu__item-label /* DEPRECATED: use .context-menu__item-label */ { white-space: nowrap; } .context-menu-item-label /* DEPRECATED: use .context-menu__item-label */ { white-space: nowrap; } .context-menu__item-shortcut /* DEPRECATED: use .context-menu__item-shortcut */ { font-size: var(--font-size-12); color: var(--soft-slate); font-family: var(--font-family-mono); margin-left: var(--space-9px); padding: var(--space-0-5px) var(--space-1px); background: var(--soft-slate); border-radius: var(--radius-standard); border: var(--input-border-width-thin); } .context-menu-item-shortcut /* DEPRECATED: use .context-menu__item-shortcut */ { font-size: var(--font-size-12); color: var(--soft-slate); font-family: var(--font-family-mono); margin-left: var(--space-9px); padding: var(--space-0-5px) var(--space-1px); background: var(--soft-slate); border-radius: var(--radius-standard); border: var(--input-border-width-thin); } /* Action toasts */ /* ============================================================ * Panel Notice — inline alert/notice rendering owned by Panel * Card Item — data card tiles owned by cardsView * ============================================================ */ /* Panel notice base — strict BEM: element of panel block */ .panel__notice { --panel-notice-bg-start: var(--light-teal); --panel-notice-bg-end: var(--strong-teal); --panel-notice-border: var(--vibrant-teal); --panel-notice-ink: var(--deepest-slate); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-12px); row-gap: var(--space-9px); width: 100%; max-width: var(--size-100pct); overflow: hidden; margin: var(--space-2px) 0; padding: var(--space-12px) var(--space-16px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--panel-notice-border); background: linear-gradient(90deg, var(--panel-notice-bg-start) 0%, var(--panel-notice-bg-end) 100%); box-shadow: 0 12px 24px rgb(28 53 70 / 10%), inset 0 1px 0 rgb(255 255 255 / 24%); font-size: var(--text-size-body); line-height: var(--text-line-height-body); color: var(--panel-notice-ink); } /* Panel notice variants — modifiers with -- */ .panel__notice--danger { --panel-notice-bg-start: var(--light-red); --panel-notice-bg-end: var(--medium-red); --panel-notice-border: var(--strong-red); --panel-notice-ink: var(--dark-red); } .panel__notice--error { --panel-notice-bg-start: var(--pale-red); --panel-notice-bg-end: var(--light-red); --panel-notice-border: var(--light-red); --panel-notice-ink: var(--strong-red); } .panel__notice--warning { --panel-notice-bg-start: var(--amber-softest); --panel-notice-bg-end: var(--amber-soft); --panel-notice-border: var(--amber-border); --panel-notice-ink: var(--deepest-charcoal); } .panel__notice--info { --panel-notice-bg-start: var(--light-teal); --panel-notice-bg-end: var(--strong-teal); --panel-notice-border: var(--vibrant-teal); --panel-notice-ink: var(--deepest-slate); } .panel__notice--success { --panel-notice-bg-start: var(--light-teal); --panel-notice-bg-end: var(--strong-teal); --panel-notice-border: var(--vibrant-teal); --panel-notice-ink: var(--deepest-slate); } /* Panel notice sub-elements — compound element names with single hyphen */ .panel__notice-header { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-12px); min-width: 0; } .panel__notice-body { grid-column: 1 / 2; display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } .panel__notice-footer { grid-column: 2 / 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2px); flex-wrap: wrap; min-width: 0; justify-self: end; } .panel__notice .button-row { justify-content: center; } @media (max-width: 767px) { .panel__notice { grid-template-columns: minmax(0, 1fr); padding: var(--space-9px) var(--space-12px); row-gap: var(--space-9px); } .panel__notice-footer { grid-column: 1 / -1; justify-content: flex-start; justify-self: start; } } /* ============================================================ * Panel Base Layout Container * ============================================================ */ .panel { position: relative; display: flex; flex-direction: column; width: var(--size-100pct); min-width: 0; max-width: var(--size-100pct); max-inline-size: var(--size-100pct); box-sizing: border-box; container-type: inline-size; color: var(--text-primary); height: var(--size-100pct); min-height: 0; overflow-x: hidden; overflow-y: hidden; word-break: break-word; overflow-wrap: anywhere; padding: var(--space-12px); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-soft); background: var(--modal-surface-elevated); } .panel__main { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; } .popup { position: relative; width: var(--size-100pct); min-width: 0; } .popup--top-right { position: fixed; z-index: var(--z-overlay); width: var(--width-400px); max-width: calc(100% - (var(--space-9px) * 2)); height: auto; min-height: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .popup--top-left { position: fixed; z-index: var(--z-overlay); width: var(--width-400px); max-width: calc(100% - (var(--space-9px) * 2)); height: auto; min-height: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .popup--bottom-right { position: fixed; z-index: var(--z-overlay); width: var(--width-400px); max-width: calc(100% - (var(--space-9px) * 2)); height: auto; min-height: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .popup--bottom-left { position: fixed; z-index: var(--z-overlay); width: var(--width-400px); max-width: calc(100% - (var(--space-9px) * 2)); height: auto; min-height: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .popup--bottom-center { position: fixed; z-index: var(--z-overlay); width: var(--width-400px); max-width: calc(100% - (var(--space-9px) * 2)); height: auto; min-height: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .popup--center { position: fixed; z-index: var(--z-overlay); width: var(--width-400px); max-width: calc(100% - (var(--space-9px) * 2)); height: auto; min-height: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .popup--top-right { top: var(--space-9px); right: var(--space-9px); } .popup--top-left { top: var(--space-9px); left: var(--space-9px); } .popup--bottom-right { bottom: var(--space-9px); right: var(--space-9px); } .popup--bottom-left { bottom: var(--space-9px); left: var(--space-9px); } .popup--top-right { bottom: auto; } .popup--top-left { bottom: auto; } .popup--center { bottom: auto; } .popup--top-right { left: auto; } .popup--bottom-right { left: auto; } .popup--top-left { right: auto; } .popup--bottom-left { right: auto; } .popup--bottom-center { right: auto; } .popup--center { right: auto; } .popup--bottom-right { top: auto; } .popup--bottom-left { top: auto; } .popup--bottom-center { top: auto; } .popup--bottom-center { bottom: var(--space-9px); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)); } .popup--center { top: var(--position-center-block); left: var(--position-center-inline); transform: translate(var(--offset-center-inline), var(--offset-center-block)); } .panel { border-color: var(--soft-teal); } .panel__skin--glass-teal { flex: 0 0 auto; height: auto; min-height: 0; overflow-y: visible; background: var(--white-glass-medium-30); backdrop-filter: var(--backdrop-glass-light); border: var(--input-border-width-thin) solid var(--white-glass-light-20); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); transition: background var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth); z-index: var(--z-nav); --_form-section-border: none; --_form-section-border-radius: 0; --_form-section-bg: transparent; --_form-section-mb: 0; --_form-section-heading-display: none; --_form-section-instructions-display: none; --_form-section-body-cols: minmax(0, 1fr); --_form-row-item-semantic-col: 1 / -1; --_alert-margin: 0 0 var(--space-9px) 0; --_alert-padding: var(--space-3px) var(--space-9px); --_alert-border-radius: var(--radius-standard); --_alert-font-size: var(--font-size-13); --_alert-line-height: var(--line-height-relaxed); } .panel__skin--dark { color: var(--text-on-dark); background: linear-gradient(165deg, rgb(79 99 112 / 98%) 0%, rgb(70 89 103 / 98%) 58%, rgb(63 82 95 / 98%) 100%); border: var(--input-border-width-thin) solid var(--white-glass-strong-40); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); --text-color-primary: var(--text-color-on-dark); --text-color-secondary: var(--text-color-on-dark); --text-color-muted: var(--text-color-on-dark-muted); --text-color-disabled: var(--text-color-on-dark-muted); --text-primary: var(--text-on-dark); --text-secondary: var(--text-color-on-dark); --text-muted: var(--text-color-on-dark-muted); --text-emphasis: var(--text-on-dark); --text-disabled: var(--text-color-on-dark-muted); --_form-section-border: none; --_form-section-border-radius: 0; --_form-section-bg: transparent; --_form-section-mb: 0; --_form-section-heading-display: none; --_form-section-instructions-display: none; --_form-section-body-cols: minmax(0, 1fr); --_form-row-item-semantic-col: 1 / -1; --_alert-margin: 0 0 var(--space-9px) 0; --_alert-padding: var(--space-3px) var(--space-9px); --_alert-border-radius: var(--radius-standard); --_alert-font-size: var(--font-size-13); --_alert-line-height: var(--line-height-relaxed); } .panel__skin--info { color: var(--text-on-dark); background: var(--deep-teal); border: var(--input-border-width-thin) solid var(--vibrant-teal); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); --text-color-primary: var(--text-color-on-dark); --text-color-secondary: var(--text-color-on-dark); --text-color-muted: var(--text-color-on-dark-muted); --text-color-disabled: var(--text-color-on-dark-muted); --text-primary: var(--text-on-dark); --text-secondary: var(--text-color-on-dark); --text-muted: var(--text-color-on-dark-muted); --text-emphasis: var(--text-on-dark); --text-disabled: var(--text-color-on-dark-muted); } .panel__skin--success { color: var(--text-on-dark); background: var(--strong-teal); border: var(--input-border-width-thin) solid var(--accent-teal); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); --text-color-primary: var(--text-color-on-dark); --text-color-secondary: var(--text-color-on-dark); --text-color-muted: var(--text-color-on-dark-muted); --text-color-disabled: var(--text-color-on-dark-muted); --text-primary: var(--text-on-dark); --text-secondary: var(--text-color-on-dark); --text-muted: var(--text-color-on-dark-muted); --text-emphasis: var(--text-on-dark); --text-disabled: var(--text-color-on-dark-muted); } .panel__skin--danger { color: var(--white); background: var(--dark-red); border: var(--input-border-width-thin) solid var(--strong-red); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); --text-color-primary: var(--white); --text-color-secondary: var(--white); --text-color-muted: var(--white-glass-strong-70); --text-color-disabled: var(--white-glass-strong-70); --text-primary: var(--white); --text-secondary: var(--white); --text-muted: var(--white-glass-strong-70); --text-emphasis: var(--white); --text-disabled: var(--white-glass-strong-70); } .panel__skin--glass-teal:hover { background: var(--card-bullseye-login); border: var(--input-border-width-thin) solid var(--white-glass-medium-25); box-shadow: 0 0 0 var(--input-border-width-thin) var(--white-glass-whisper-08), var(--shadow-moderate); } .panel__form-region { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; width: var(--size-100pct); } .panel__scrollable-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: contain; gap: var(--space-9px); align-items: stretch; width: var(--size-100pct); min-width: 0; box-sizing: border-box; padding: 0; isolation: isolate; /* Safari compositing guard: prevent gradient washout */ } .panel__content-region { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; align-self: stretch; height: 100%; } .panel__table-view { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; width: 100%; align-self: stretch; height: 100%; } .panel__split { display: flex; flex-direction: row; gap: 0; align-items: stretch; width: var(--size-100pct); min-width: 0; min-height: 0; flex: 1 1 auto; } .panel__left-pane-scrollable { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow-x: hidden; overflow-y: auto; } .panel__left-pane-scrollable--in-split { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow-x: hidden; overflow-y: auto; } /* Split layout left pane: thread list / tiles */ .panel__left-pane-scrollable--in-split { /* Match Page side-panel shell width for consistent UX. */ flex: 0 0 var(--page-side-panel-width-fluid); width: var(--page-side-panel-width-fluid); min-width: var(--width-280px); max-width: var(--width-380px); max-height: var(--size-viewport-height-full); } .panel__right-pane-scrollable { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space-9px); overflow-x: hidden; overflow-y: auto; align-self: stretch; height: 100%; } @media (max-width: 767px) { .panel__split { flex-direction: column; } .panel__left-pane-scrollable--in-split { width: var(--size-100pct); max-height: none; border-right: none; border-bottom: var(--input-border-width-thin) solid var(--input-border); } } .panel__footer { display: flex; flex-direction: column; align-items: stretch; border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12); position: relative; z-index: 1; padding: var(--space-12px) 0; gap: var(--space-9px); background: transparent; min-width: 0; width: var(--size-100pct); } .panel__footer:empty { display: none; } .panel__footer--data-separator { padding-top: var(--space-9px); border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12); } .panel__footer-gap-row { flex: 0 0 auto; width: var(--size-100pct); min-height: var(--button-height); } .panel__footer-row { min-width: 0; flex: 0 0 auto; } .panel__actions { display: inline-flex; gap: var(--space-5px); align-items: center; justify-content: center; width: var(--size-100pct); } .panel__actions--wrap { flex-wrap: wrap; justify-content: flex-start; } /* ============================================================ * Panel Header — shared chrome for Panel primitive * ============================================================ */ .panel__header { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-9px); flex-wrap: wrap; flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; overflow-wrap: normal; word-break: normal; overflow-x: hidden; overflow-y: hidden; padding-block: 0; padding-inline: 0; position: relative; z-index: 1; background: transparent; backdrop-filter: none; } .panel__header--mobile-filter-modal { justify-content: space-between; } .panel__instructions { display: flex; flex-direction: column; gap: var(--space-4px); flex: 1 1 auto; min-width: 0; } .panel__bulk-actions { display: block; width: var(--size-100pct); min-width: 0; margin-block-start: var(--space-9px); padding: 0; border: 0; background: transparent; } .panel--nested { padding: var(--space-9px); border-color: var(--teal-glass-soft-12); box-shadow: none; background: var(--modal-surface); } .panel__table-instructions { display: flex; flex-direction: column; gap: var(--space-4px); } .panel__table-instructions-header { display: flex; align-items: center; } .panel__table-instructions-actions { display: flex; align-items: center; } .panel__stepper { display: flex; align-items: center; } .panel__stepper__item { display: flex; align-items: center; } .panel__table-instructions-body { display: flex; } .panel__table-instructions-bullets { margin: 0; padding-inline-start: var(--space-12px); display: grid; gap: var(--space-2px); } @media (max-width: 767px) { .popup--top-right { left: auto; right: var(--space-9px); transform: none; width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2))); max-width: calc(100% - (var(--space-9px) * 2)); } .popup--top-left { left: var(--space-9px); right: auto; transform: none; width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2))); max-width: calc(100% - (var(--space-9px) * 2)); } .popup--bottom-right { left: auto; right: var(--space-9px); transform: none; width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2))); max-width: calc(100% - (var(--space-9px) * 2)); } .popup--bottom-left { left: var(--space-9px); right: auto; transform: none; width: min(var(--width-400px), calc(100% - (var(--space-9px) * 2))); max-width: calc(100% - (var(--space-9px) * 2)); } .popup--bottom-center { left: var(--space-9px); right: var(--space-9px); transform: none; width: auto; max-width: calc(100% - (var(--space-9px) * 2)); } .popup--center { left: var(--space-9px); right: var(--space-9px); transform: none; width: auto; max-width: calc(100% - (var(--space-9px) * 2)); } .popup--top-right { top: var(--space-9px); bottom: auto; } .popup--top-left { top: var(--space-9px); bottom: auto; } .popup--center { top: var(--space-9px); bottom: auto; } .popup--bottom-right { bottom: var(--space-9px); top: auto; } .popup--bottom-left { bottom: var(--space-9px); top: auto; } .popup--bottom-center { bottom: var(--space-9px); top: auto; } } .title-edit { display: flex; align-items: center; gap: var(--space-4px); min-width: 0; } .panel__title-editview { display: inline-flex; align-items: center; gap: var(--space-3px); min-width: 0; } .panel__title-input { min-width: var(--size-180px); max-width: var(--size-320px); } .panel__stepper__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5px); padding: 0; margin: 0; list-style: none; } .panel__stepper__button { display: inline-flex; align-items: center; } .panel__stepper__marker { display: inline-flex; align-items: center; } .panel__stepper__button { gap: var(--space-0-5px); padding: var(--space-0-5px) var(--space-1px); border-radius: var(--radius-standard); border: none; background: var(--teal-glass-soft-gradient); backdrop-filter: var(--backdrop-glass-medium); box-shadow: var(--secondary-surface-shadow); outline: var(--shadow-tab-outline-subtle); color: var(--text-primary); font-size: var(--font-size-12); font-weight: var(--weight-medium); user-select: none; cursor: pointer; white-space: nowrap; transition: all var(--animation-quick) var(--easing-smooth); } .panel__stepper__button--static { cursor: default; } .panel__stepper__button:disabled { cursor: not-allowed; opacity: var(--opacity-muted-strong); } .panel__stepper__marker { justify-content: center; width: 1.4em; height: 1.4em; border-radius: var(--size-999px); border: 1px solid var(--modal-border); background: var(--modal-surface-elevated); color: currentColor; font-size: var(--font-size-12); line-height: var(--line-height-110pct); } .panel__stepper__button:hover:not(:disabled) { background: var(--hover-surface-gradient); box-shadow: var(--hover-surface-shadow); transform: translateY(var(--lift-subtle)); } .panel__stepper__button--current { background: var(--active-surface-gradient); box-shadow: var(--active-surface-shadow); color: var(--text-on-primary); font-weight: var(--weight-bold); } .panel__stepper__marker--current { background: transparent; border-color: currentColor; } /* PDF page layout semantics for invoices. These classes are explicitly PDF/print‑only and should not be used for interactive web UI. Typography/colors come from existing tokens. NOTE: All selectors currently unused in codebase per audit. */ /* ============================================================================= PHOTO GALLERY SEMANTICS Semantic classes for photo gallery components ============================================================================= */ /* ===== GALLERY IMAGE THUMBNAIL ===== */ .gallery__image-thumbnail { display: block; width: var(--size-100pct); height: var(--size-100pct); max-width: var(--size-100pct); max-height: var(--size-100pct); object-fit: contain; object-position: center; /* Multi-layer shadow for depth - makes PP letters pop off screen */ filter: drop-shadow(0 1px 1px var(--black-glass-strong-30)) drop-shadow(0 3px 6px var(--black-glass-medium-25)) drop-shadow(0 6px 12px var(--black-glass-light-20)) drop-shadow(0 0 2px var(--white-glass-faint-10)); } /* Cover variant (used for gallery thumbnails) */ .gallery__image-cover { display: block; width: var(--size-100pct); height: var(--size-100pct); max-width: var(--size-100pct); max-height: var(--size-100pct); object-fit: cover; object-position: center; } /* Clickable image thumbnail wrapper (max-size variants) */ .image-thumbnail { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .image-thumbnail--80px { max-width: var(--width-80px); max-height: var(--height-80px); } .image-thumbnail--120px { max-width: var(--width-120px); max-height: var(--height-120px); } .image-thumbnail--160px { max-width: var(--width-160px); max-height: var(--height-200px); } /* ===== GALLERY THUMBNAIL CONTAINER ===== */ .gallery__thumbnail /* DEPRECATED: use .gallery__thumbnail */ { width: var(--size-48px); height: var(--size-48px); aspect-ratio: 1 / 1; overflow: hidden; background: var(--light-slate); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px var(--white-glass-soft-12), 0 0 0 1px var(--black-glass-subtle-02); } .gallery-thumbnail /* DEPRECATED: use .gallery__thumbnail */ { width: var(--size-48px); height: var(--size-48px); aspect-ratio: 1 / 1; overflow: hidden; background: var(--light-slate); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px var(--white-glass-soft-12), 0 0 0 1px var(--black-glass-subtle-02); } /* Subtle gradient bevel overlay - matches sidebar logo */ .gallery__thumbnail::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, var(--white-glass-soft-12) 0%, transparent 45%, transparent 55%, var(--black-glass-soft-12) 100% ); mix-blend-mode: screen; pointer-events: none; } .gallery-thumbnail::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, var(--white-glass-soft-12) 0%, transparent 45%, transparent 55%, var(--black-glass-soft-12) 100% ); mix-blend-mode: screen; pointer-events: none; } .gallery__thumbnail--sm { width: var(--size-40px); height: var(--size-40px); } .gallery__thumbnail--md { width: var(--size-60px); height: var(--size-60px); } .gallery__thumbnail--lg { width: var(--size-80px); height: var(--size-80px); } .gallery__thumbnail--selected /* DEPRECATED: use .gallery__thumbnail--selected */ { outline: var(--input-border-width-thin) solid var(--accent-teal); outline-offset: var(--inset-0); } .gallery-thumbnail--selected /* DEPRECATED: use .gallery__thumbnail--selected */ { outline: var(--input-border-width-thin) solid var(--accent-teal); outline-offset: var(--inset-0); } /* ===== GALLERY THUMBNAIL PLACEHOLDER ===== */ .gallery-thumbnail__placeholder { font-size: var(--font-size-12); color: var(--text-muted); } /* Lightweight row container for stacked photo thumbnails in table cells */ .photo-gallery__row { display: flex; flex-direction: row; align-items: center; gap: var(--space-1px); overflow-x: auto; max-width: var(--width-280px); } /* ===== PHOTO EDITOR CONTROL BLOCKS ===== */ .photo-filter-controls { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5px); width: var(--size-100pct); min-width: 0; } .photo-annotation-controls { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5px); width: var(--size-100pct); min-width: 0; } .photo-filter-controls__presets { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; } .photo-annotation-controls__tools { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; } .photo-annotation-controls__colors { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; } .photo-annotation-controls__widths { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; } .photo-annotation-controls__text-sizes { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; } .photo-annotation-controls__actions { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; } /* Recent photos mini-grid used in dashboard tiles */ .recent-photos-grid { display: grid; gap: var(--space-12px); } .recent-photos-grid--min-96 { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .recent-photos-grid--min-120 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .recent-photos-grid--min-140 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .recent-photos-grid--min-160 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .recent-photos-grid__item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-standard); background-color: var(--light-slate); } .recent-photos-grid__item--interactive { cursor: pointer; } .recent-photos-grid__image { width: var(--size-100pct); height: var(--size-100pct); object-fit: cover; } /* ========================================================================== PRESENCE INDICATOR Real-time user presence indicators for collaborative features Works with .avatar utility class from avatar-utilities.scss ========================================================================== */ /* Presence grid - displays user types as columns */ .presence__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-12px); padding: var(--space-9px); } /* Presence grid column - one per user type */ .presence__grid-column { display: flex; flex-direction: column; gap: var(--space-1-5px); } .presence__group-heading { font-weight: var(--weight-semibold); margin-bottom: var(--space-1-5px); } /* Presence tile - individual user row */ .presence__tile { display: flex; flex-direction: row; align-items: center; gap: var(--space-1-5px); padding: var(--space-1-5px); } .presence__member-meta { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; flex: 1 1 auto; } .presence__member-divider { display: block; width: var(--size-78pct); height: var(--size-1px); margin: var(--space-0-5px) auto; background: var(--divider-on-light); box-shadow: var(--divider-on-light-shadow); } /* Avatar-overlaid presence indicator — absolutely positioned at a corner of the avatar button */ .presence-indicator-avatar { position: absolute; z-index: 1; line-height: 0; } .presence-indicator-avatar--top-left { inset: 0 auto auto 0; transform: translate( calc(-1 * var(--avatar-presence-offset, 10%)), calc(-1 * var(--avatar-presence-offset, 10%)) ); } .presence-indicator-avatar--top-right { inset: 0 0 auto auto; transform: translate( var(--avatar-presence-offset, 10%), calc(-1 * var(--avatar-presence-offset, 10%)) ); } .presence-indicator-avatar--bottom-left { inset: auto auto 0 0; transform: translate( calc(-1 * var(--avatar-presence-offset, 10%)), var(--avatar-presence-offset, 10%) ); } .presence-indicator-avatar--bottom-right { inset: auto 0 0 auto; transform: translate( var(--avatar-presence-offset, 10%), var(--avatar-presence-offset, 10%) ); } /* Semantic layout classes for product feature components */ /* PaymentSummary — label-value definition list */ .payment-summary { display: flex; flex-direction: column; gap: var(--space-3px); } .payment-summary__row { display: flex; justify-content: space-between; align-items: center; } /* StatusIndicators — inline row of status icon badges */ .status-indicators { display: flex; align-items: center; gap: var(--space-3px); } /* CourseTemplateCard — course header and module list */ .course-template-card__info { display: flex; flex-direction: column; gap: var(--space-1-5px); min-width: 0; } .course-module__info { display: flex; flex-direction: column; gap: var(--space-1-5px); min-width: 0; } .course-module-list { display: flex; flex-direction: column; gap: var(--space-1-5px); list-style: none; padding: 0; margin: 0; } .course-module { display: flex; flex-direction: column; gap: var(--space-1-5px); } .course-module__meta { display: flex; align-items: center; gap: var(--space-9px); flex-shrink: 0; } /* ============================================================================ PROGRESS BAR - BEM Component Single-class BEM pattern for progress indicators ============================================================================ */ /* Base progress bar */ .progress-bar { position: relative; width: var(--size-100pct); height: var(--size-8px); background-color: var(--soft-gray); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-pill); overflow: hidden; } /* Fill element */ .progress-bar__fill { height: var(--size-100pct); width: 0; background-color: var(--vibrant-teal); border-radius: var(--radius-pill); transition: width var(--animation-smooth) var(--easing-smooth); } /* Indeterminate animation */ .progress-bar__fill--indeterminate { height: var(--size-100pct); width: var(--width-progress-indeterminate); background-color: var(--vibrant-teal); border-radius: var(--radius-pill); transition: width var(--animation-smooth) var(--easing-smooth); animation: progress-indeterminate 1.5s ease-in-out infinite; } /* Container element for progress bar with label */ .progress-bar__container { display: flex; align-items: center; gap: var(--space-1-5px); width: var(--size-100pct); } /* Native progress element (no inline styles needed) */ .progress-bar__native { width: var(--size-100pct); height: var(--size-8px); } @keyframes progress-indeterminate { 0% { transform: translateX(calc(-1 * var(--size-100pct))); } 50% { transform: translateX(calc(2.5 * var(--size-100pct))); } 100% { transform: translateX(calc(-1 * var(--size-100pct))); } } * { box-sizing: border-box; } .public-marketing-root { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; --font-size-density-step: 0px; } .public-marketing-page { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; margin: 0; font-family: "Poppins", var(--font-family-primary); color: var(--text-primary); background: var(--page-bg-surface); --font-size-density-step: 0px; } .public-marketing-shell { max-width: var(--width-1200px); margin: 0 auto; padding: 0 var(--space-20px) var(--space-24px); } .public-marketing-shell--home { max-width: none; padding-inline: 0; } .public-marketing-panel { margin-top: var(--space-14px); height: auto; overflow: visible; } .public-marketing-section { width: 100%; } .public-marketing-surface { position: relative; width: 100%; background: var(--card-surface); box-shadow: var(--shadow-soft); } .public-marketing-surface--hero { background: var(--white-glass-medium-30); border-color: var(--white-glass-light-20); } .public-marketing-carousel { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; } .public-marketing-gallery-header { position: relative; width: 100vw; margin-top: var(--space-16px); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .public-marketing-services-header { position: relative; width: 100vw; margin-top: var(--space-16px); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .public-marketing-gallery-header__hero { min-height: var(--size-420px); display: flex; align-items: center; justify-content: center; color: var(--white); background-size: cover; background-position: center; border: var(--input-border-width-thin) solid var(--card-border); } .public-marketing-gallery-header__inner { width: min(100%, var(--width-1320px)); padding: var(--size-48px) var(--size-12px); } .public-marketing-gallery-header__title { margin: 0 auto; text-align: center; width: 100%; } .public-marketing-gallery-header__subtitle { margin: var(--space-18px) auto 0; text-align: center; width: 100%; } .public-marketing-shell--gallery { max-width: none; padding-inline: 0; } .public-marketing-carousel-block--gallery { margin-left: var(--space-20px); margin-right: var(--space-20px); } .public-marketing-gallery-cta--gallery { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--size-48px) var(--space-20px) var(--size-56px); } .public-marketing-gallery-cta__surface { width: min(100%, var(--width-1320px)); margin: 0 auto; min-height: var(--size-240px); padding: var(--size-48px) calc(var(--size-48px) + var(--size-36px)); display: grid; grid-template-columns: minmax(0, var(--width-768px)) minmax(0, auto); gap: var(--space-24px); align-items: center; border-radius: 32px; background: linear-gradient(135deg, #a8bdc4 0%, #748491 48%, #5f6c76 100%); box-shadow: none; } .public-marketing-gallery-cta__copy { width: min(100%, var(--width-768px)); padding-inline: var(--size-12px); min-width: 0; } .public-marketing-gallery-cta__title { width: min(100%, var(--width-744px)); } .public-marketing-gallery-header__title--display { font-family: var(--font-accent); font-size: var(--font-size-56); font-weight: var(--weight-bold); letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } .public-marketing-gallery-header__subtitle--display { font-family: "Poppins", var(--font-family-primary); font-size: var(--font-size-20); font-weight: var(--weight-normal); line-height: 1.2; } .public-marketing-services-header__hero { min-height: var(--size-780px); height: calc(100svh - var(--size-120px)); max-height: var(--size-980px); display: flex; align-items: center; color: var(--white); background-size: cover; background-position: center; background-repeat: no-repeat; border: 0; overflow: hidden; } .public-marketing-services-header__inner { width: min(100%, var(--width-1240px)); margin: 0 auto; padding: clamp(var(--size-96px), 11vw, var(--size-164px)) var(--space-24px) clamp(var(--size-80px), 10vw, var(--size-140px)) clamp(var(--space-24px), 11vw, var(--size-196px)); } .public-marketing-services-header__eyebrow { margin: 0; } .public-marketing-services-header__title { margin: var(--space-12px) 0 0; max-width: var(--width-360px); } .public-marketing-services-header__title--display { display: block; font-family: var(--font-accent); font-size: clamp(var(--font-size-52), 4.8vw, var(--font-size-84)); font-weight: var(--weight-bold); line-height: 0.96; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); } .public-marketing-services-header__subtitle { margin: var(--space-24px) 0 0; max-width: var(--width-560px); } .public-marketing-services-header__subtitle--display { display: block; font-family: "Poppins", var(--font-family-primary); font-size: clamp(var(--font-size-20), 2vw, var(--font-size-28)); font-weight: var(--weight-normal); line-height: 1.22; color: var(--white); text-shadow: 0 2px 8px rgb(0 0 0 / 25%); } .public-marketing-carousel__viewport { position: relative; min-height: var(--size-520px); max-height: var(--size-920px); height: calc(100svh - var(--size-180px)); overflow: hidden; border: var(--input-border-width-thin) solid var(--card-border); } .public-marketing-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 520ms ease; } .public-marketing-carousel__slide--active { opacity: 1; } .public-marketing-carousel__overlay { position: absolute; inset: 0; background: linear-gradient(80deg, rgb(44 24 25 / 92%), rgb(44 24 25 / 0%)), linear-gradient(180deg, rgb(44 24 25 / 24%), rgb(44 24 25 / 34%)); pointer-events: none; } .public-marketing-carousel__content { position: absolute; left: var(--size-11px); right: auto; bottom: 34%; z-index: 2; color: var(--white); width: min(100%, var(--width-643px)); } .public-marketing-carousel__eyebrow { margin: 0 0 var(--space-10px); } .public-marketing-carousel__title { margin: 0; max-width: var(--width-643px); width: 100%; } .public-marketing-carousel__title--display { display: block; font-family: var(--font-accent); font-size: var(--font-size-64); font-weight: var(--weight-bold); line-height: 1.2; } .public-marketing-carousel__subtitle { margin: var(--space-12px) 0 0; } .public-marketing-carousel__actions { margin-top: var(--space-18px); display: flex; flex-wrap: wrap; gap: var(--space-12px); } .public-marketing-carousel__dots { position: absolute; left: 50%; bottom: var(--size-20px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-10px); z-index: 3; } .public-marketing-carousel__dot { width: var(--size-14px); height: var(--size-14px); border-radius: var(--radius-pill); border: var(--input-border-width-thin) solid var(--white-glass-bright-35); background: var(--white-glass-soft-12); cursor: pointer; } .public-marketing-carousel__dot--active { background: var(--vibrant-teal); border-color: var(--vibrant-teal); } .public-marketing-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-20px); align-items: stretch; padding: var(--size-26px); background: radial-gradient(580px 260px at 18% -12%, var(--teal-light-glass-light-24), transparent), linear-gradient(135deg, var(--vibrant-teal), var(--strong-teal), var(--medium-teal)); border-color: var(--teal-light-glass-medium-26); } .public-marketing-hero__body { color: var(--white); } .public-marketing-hero__eyebrow { margin: 0 0 var(--space-10px); } .public-marketing-hero__title { margin: 0; } .public-marketing-hero__subtitle { margin: var(--space-14px) 0; max-width: var(--width-640px); } .public-marketing-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12px); } .public-marketing-hero__image { width: 100%; min-height: var(--size-310px); max-height: var(--size-420px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--white-glass-elevated-45); background: var(--white-glass-faint-10); object-fit: contain; object-position: center; padding: var(--space-6px); } .public-marketing-hero__action-button--compact { min-height: var(--size-44px); padding-inline: var(--space-18px); } .public-marketing-join__kicker { margin: 0; text-align: center; } .public-marketing-join__headline { margin: 0; text-align: center; } .public-marketing-join__hero-image-wrap { overflow: hidden; } .public-marketing-join__hero-image { width: 100%; display: block; min-height: var(--size-340px); max-height: var(--size-560px); object-fit: cover; } .public-marketing-join__hero-overlay { position: absolute; left: var(--space-18px); bottom: var(--space-18px); color: var(--white); text-shadow: 0 2px 8px rgb(0 0 0 / 35%); } .public-marketing-join__coast-wrap { padding: 0; } .public-marketing-join__coast-image { width: 100%; display: block; object-fit: cover; } .public-marketing-join__headline-wrap { padding-top: var(--size-28px); padding-bottom: var(--size-28px); } .public-marketing-join__hiring-grid { display: grid; grid-template-columns: minmax(var(--width-300px), 1fr) minmax(var(--size-320px), 1.25fr); gap: var(--space-18px); padding: var(--size-22px); } .public-marketing-join__hiring-photo-image { width: 100%; display: block; border-radius: var(--radius-standard); object-fit: cover; } .public-marketing-join__hiring-copy { min-width: 0; } .public-marketing-join__hiring-copy-list { margin: var(--space-12px) 0; padding-left: var(--space-20px); } .public-marketing-join__hiring-copy-list-item { margin-bottom: var(--space-6px); } .public-marketing-hero__image--join { object-fit: cover; padding: 0; background: transparent; } .public-marketing-hero__image--about { object-fit: cover; padding: 0; background: transparent; } .public-marketing-card { padding: var(--space-20px); } .public-marketing-cta { padding: var(--space-20px); } .public-marketing-services { padding: var(--space-20px); } .public-marketing-testimonials { padding: var(--space-20px); } .public-marketing-testimonials--carousel { color: var(--white); background: linear-gradient(135deg, #5f6f7d, #556370 72%, #4d5b68); } .public-marketing-cta__title { margin: 0; } .public-marketing-services__title { margin: 0; } .public-marketing-testimonials__title { margin: 0; } .public-marketing-testimonials__header { flex-direction: column; justify-content: flex-start; align-items: center; gap: var(--space-16px); } .public-marketing-testimonials__title { font-family: var(--font-family-primary); font-size: var(--font-size-24); font-weight: var(--weight-semibold); letter-spacing: 0.22em; line-height: var(--line-height-tight); text-transform: uppercase; color: inherit; } .public-marketing-testimonials__controls { display: flex; width: 100%; margin-top: var(--space-14px); justify-content: center; } .public-marketing-cta__subtitle { margin: var(--space-12px) 0 0; } .public-marketing-card__bullets { margin: var(--space-16px) 0 0; padding-left: var(--space-18px); display: grid; gap: var(--space-6px); } .public-marketing-card__list { margin: var(--space-16px) 0 0; padding-left: var(--space-18px); display: grid; gap: var(--space-6px); } .public-marketing-card__bullet { } .public-marketing-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12px); padding: var(--space-20px); background: linear-gradient(135deg, var(--vibrant-teal), var(--strong-teal), var(--medium-teal)); } .public-marketing-stat { border: var(--input-border-width-thin) solid var(--white-glass-glow-22); border-radius: var(--radius-md); background: var(--white-glass-faint-10); padding: var(--space-16px) var(--space-14px); text-align: center; } .public-marketing-stat__value { margin: 0; } .public-marketing-stat__label { margin: var(--space-4px) 0 0; } .public-marketing-backed-by { padding: var(--space-18px) var(--space-20px); border-left: var(--size-4px) solid var(--vibrant-teal); background: linear-gradient(90deg, var(--teal-light-glass-soft-12), transparent); } .public-marketing-backed-by__eyebrow { margin: 0; } .public-marketing-backed-by__text { margin: var(--space-6px) 0 0; } .public-marketing-services__grid { margin-top: var(--space-16px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12px); } .public-marketing-testimonials__grid { margin-top: var(--space-16px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12px); } .public-marketing-carousel-block { padding: var(--size-22px); } .public-marketing-carousel-block__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12px); } .public-marketing-carousel-block__title { margin: 0; } .public-marketing-carousel-block__controls { display: inline-flex; gap: var(--space-8px); } .public-marketing-carousel-block__control { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; width: var(--size-40px); height: var(--size-40px); border-radius: var(--radius-pill); border: var(--input-border-width-thin) solid var(--card-border); background: var(--card-surface); color: var(--text-primary); font-size: var(--font-size-24); line-height: 1; cursor: pointer; } .public-marketing-carousel-block__control:hover { background: var(--surface-subtle); } .public-marketing-strip-carousel { margin-top: var(--space-14px); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--width-280px), 34%); gap: var(--space-12px); overflow-x: auto; padding-bottom: var(--space-6px); scroll-snap-type: x mandatory; } .public-marketing-strip-carousel__item { scroll-snap-align: start; } .public-marketing-services__card { display: grid; gap: var(--space-10px); scroll-snap-align: start; } .public-marketing-testimonials__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-10px); scroll-snap-align: start; } .public-marketing-testimonials__item--expanded { height: auto; } .public-marketing-logo-item { scroll-snap-align: start; } .public-marketing-strip-carousel__item { height: var(--height-220px); border: var(--input-border-width-thin) solid var(--card-border); border-radius: var(--radius-standard); overflow: hidden; } .public-marketing-strip-carousel--cards { grid-auto-columns: minmax(var(--width-300px), 36%); } .public-marketing-services__card--carousel { height: 100%; } .public-marketing-testimonials__item--carousel { height: 100%; } .public-marketing-strip-carousel--testimonials { grid-auto-columns: calc((100% - (2 * var(--space-12px))) / 3); } .public-marketing-strip-carousel--logos { grid-auto-columns: minmax(var(--width-180px), 20%); align-items: center; } .public-marketing-gallery-grid { margin-top: var(--space-14px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: var(--width-286px); justify-content: start; gap: var(--space-12px); overflow-x: auto; padding-bottom: var(--space-6px); scroll-snap-type: x mandatory; } @media (max-width: 1440px) { .public-marketing-gallery-grid { grid-auto-columns: minmax(var(--width-260px), 24vw); } } @media (max-width: 1120px) { .public-marketing-gallery-grid { grid-auto-columns: minmax(var(--width-240px), 32vw); } } @media (max-width: 820px) { .public-marketing-gallery-grid { grid-auto-columns: minmax(var(--width-220px), 42vw); } } @media (max-width: 560px) { .public-marketing-gallery-grid { grid-auto-columns: minmax(var(--width-220px), 76vw); } } .public-marketing-gallery-grid__item { display: block; width: var(--size-100pct); max-width: none; max-height: none; height: auto; aspect-ratio: 286 / 410; border: var(--input-border-width-thin) solid var(--card-border); border-radius: var(--radius-standard); overflow: hidden; scroll-snap-align: start; } .public-marketing-logo-item { min-height: var(--size-120px); display: flex; align-items: center; justify-content: center; padding: var(--space-14px); } .public-marketing-logo-item__image { max-width: 100%; max-height: var(--size-70px); } .public-marketing-services__link { margin-top: var(--space-10px); display: inline-flex; text-decoration: none; } .public-marketing-testimonials__item { min-height: 100%; padding: var(--space-24px) var(--space-20px) var(--space-18px); text-align: center; background: var(--card-surface); border: var(--input-border-width-thin) solid var(--card-border); border-radius: var(--radius-standard); box-shadow: none; } .public-marketing-testimonials__quote-icon { display: block; margin-bottom: 0; color: var(--soft-teal); font-size: var(--font-size-56); font-weight: var(--weight-semibold); line-height: 0.8; letter-spacing: -0.05em; } .public-marketing-testimonials__quote { margin: var(--space-6px) 0 0; font-size: var(--font-size-16); line-height: var(--line-height-130pct); color: var(--text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .public-marketing-testimonials__read-more { padding: 0; border: 0; background: transparent; margin-top: var(--space-8px); color: var(--soft-teal); font-size: var(--font-size-12); font-weight: var(--weight-semibold); cursor: pointer; } .public-marketing-testimonials__quote--expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .public-marketing-testimonials__read-more--expanded { color: var(--text-primary); } .public-marketing-testimonials__author { margin-top: auto; padding-top: var(--space-16px); display: flex; flex-direction: column; align-items: center; gap: var(--space-4px); } .public-marketing-testimonials__name { font-style: normal; font-size: var(--font-size-16); font-weight: var(--weight-semibold); color: var(--text-primary); } .public-marketing-testimonials__role { font-size: var(--font-size-12); color: var(--text-secondary); } .public-marketing-testimonials__quote-icon { text-wrap: balance; } .public-marketing-testimonials__name { text-wrap: balance; } .public-marketing-testimonials__role { text-wrap: balance; } .public-marketing-gallery-cta { color: var(--white); } .public-marketing-gallery-cta__title { margin: 0; } .public-marketing-gallery-cta__title--display { display: block; font-family: var(--font-accent); font-size: 56px; font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: normal; text-transform: none; } .public-marketing-gallery-cta__action { display: inline-flex; align-items: center; justify-content: center; justify-self: end; } .public-marketing-gallery-cta__button { min-height: var(--size-46px); padding-inline: var(--space-24px); } .public-marketing-card--split { background: var(--card-surface); box-shadow: var(--shadow-soft); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-24px); align-items: center; padding: var(--space-24px); } .public-marketing-card--split-primary { color: var(--white); background: linear-gradient(135deg, var(--vibrant-teal), var(--strong-teal), var(--medium-teal)); box-shadow: var(--shadow-soft); border: var(--input-border-width-thin) solid var(--teal-light-glass-medium-26); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-24px); align-items: center; padding: var(--space-24px); } .public-marketing-card__copy--split { display: grid; gap: var(--space-12px); min-width: 0; } .public-marketing-card__actions--split { display: flex; flex-wrap: wrap; gap: var(--space-12px); margin-top: var(--space-4px); } .public-marketing-card__image--split { width: 100%; min-height: var(--size-280px); max-height: var(--size-420px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--card-border); object-fit: cover; align-self: stretch; } .page__footer { margin-top: var(--space-12px); } .page__footer-surface { padding: var(--size-44px) var(--space-24px) var(--space-24px); background: linear-gradient(180deg, #a8bdc4 0%, #9bb2bb 42%, #8aa4af 100%); box-shadow: none; } .page__footer-top { display: grid; grid-template-columns: minmax(0, var(--width-320px)) minmax(0, var(--width-288px)) minmax(0, var(--width-288px)); gap: 0; justify-content: space-between; align-items: start; width: min(100%, var(--width-1320px)); margin: 0 auto; } .page__footer-brand { display: flex; flex-direction: column; gap: var(--space-12px); max-inline-size: var(--width-520px); color: var(--white); } .page__footer-logo { display: block; width: min(100%, var(--width-380px)); height: auto; margin-left: calc(var(--space-4px) * -2); } .page__footer-contact-links { display: flex; flex-direction: column; gap: var(--space-10px); } .page__footer-contact-link { display: inline-flex; align-items: center; gap: var(--space-10px); color: var(--white); text-decoration: none; font-size: var(--font-size-16); font-weight: var(--weight-medium); } .page__footer-contact-icon { display: inline-flex; width: var(--size-20px); justify-content: center; font-size: var(--font-size-20); line-height: 1; color: var(--white); } .page__footer-links { display: flex; flex-direction: column; gap: var(--space-12px); color: var(--white); width: min(100%, var(--width-288px)); } .page__footer-links-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, max-content); gap: var(--space-24px); } .page__footer-link { display: inline-flex; align-items: center; gap: var(--space-8px); color: var(--white); text-decoration: none; font-size: var(--font-size-16); font-weight: var(--weight-medium); } .page__footer-link-arrow { font-size: var(--font-size-24); line-height: 1; color: var(--white); } .page__footer-socials { margin-top: 0; display: flex; flex-direction: column; gap: var(--space-12px); color: var(--white); width: min(100%, var(--width-288px)); } .page__footer-social-list { display: flex; flex-wrap: wrap; gap: var(--space-16px); } .page__footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--size-56px); height: var(--size-56px); padding: 0; border: var(--input-border-width-thin) solid rgb(255 255 255 / 82%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 8%); color: var(--white); text-decoration: none; } .page__footer-social-label { display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-20); font-weight: var(--weight-semibold); line-height: 1; text-transform: none; color: var(--white); } .page__footer-section-title { margin: 0; color: var(--white); } .page__footer-divider { margin-top: var(--space-28px); width: 100%; height: 1px; border: 0; background: rgb(255 255 255 / 60%); } .page__footer-copyright { margin: var(--space-18px) 0 0; text-align: center; color: rgb(255 255 255 / 96%); font-size: var(--font-size-15); } @media (max-width: 960px) { .public-marketing-shell { padding: 0 var(--space-14px) var(--space-14px); } .public-marketing-carousel__viewport { min-height: var(--size-500px); height: calc(100svh - var(--size-164px)); } .public-marketing-carousel__content { left: 5%; right: 8%; bottom: 14%; } .public-marketing-carousel__title--display { font-size: var(--font-size-40); line-height: var(--line-height-130pct); } .public-marketing-hero { grid-template-columns: 1fr; padding: var(--space-18px); } .public-marketing-card--split { grid-template-columns: 1fr; padding: var(--space-18px); } .public-marketing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-marketing-services__grid { grid-template-columns: 1fr; } .public-marketing-testimonials__grid { grid-template-columns: 1fr; } .public-marketing-strip-carousel { grid-auto-columns: minmax(var(--width-260px), 70%); } .public-marketing-strip-carousel--cards { grid-auto-columns: minmax(var(--width-280px), 78%); } .public-marketing-strip-carousel--testimonials { grid-auto-columns: minmax(var(--width-300px), 31%); } .public-marketing-strip-carousel--logos { grid-auto-columns: minmax(var(--size-150px), 46%); } .public-marketing-gallery-cta__surface { grid-template-columns: 1fr; justify-items: start; } .public-marketing-gallery-cta__copy { max-inline-size: none; } .public-marketing-services-header__inner { padding: var(--size-80px) var(--space-16px) var(--size-72px) var(--space-24px); } .public-marketing-services-header__title--display { font-size: var(--font-size-60); line-height: 0.98; } .public-marketing-services-header__subtitle--display { font-size: var(--font-size-24); } .page__footer-surface { padding: var(--size-48px) var(--space-20px) var(--space-24px); } .page__footer-top { grid-template-columns: 1fr; width: 100%; } .page__footer-links-list { grid-template-columns: 1fr; } .page__footer-socials { margin-top: var(--space-28px); justify-self: start; } .page__footer-social-link { width: var(--size-48px); height: var(--size-48px); } .public-marketing-join__hiring-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .public-marketing-carousel { margin-top: var(--space-12px); } .public-marketing-gallery-header { margin-top: var(--space-12px); } .public-marketing-services-header { margin-top: var(--space-12px); } .public-marketing-gallery-header__hero { min-height: var(--size-340px); } .public-marketing-services-header__hero { min-height: var(--size-440px); height: calc(100svh - var(--size-148px)); } .public-marketing-gallery-header__inner { width: min(100%, var(--width-1296px)); padding: var(--space-48px) var(--space-16px); } .public-marketing-services-header__inner { padding: var(--size-64px) var(--space-16px) var(--size-56px) var(--space-16px); } .public-marketing-services-header__title { max-width: var(--width-320px); } .public-marketing-services-header__title--display { font-size: var(--font-size-48); line-height: 0.98; } .public-marketing-services-header__subtitle { max-width: var(--width-400px); } .public-marketing-services-header__subtitle--display { font-size: var(--font-size-18); } .public-marketing-carousel__viewport { min-height: var(--size-420px); height: calc(100svh - var(--size-148px)); } .public-marketing-carousel__content { left: 5%; right: 6%; bottom: 16%; } .public-marketing-carousel__title--display { font-size: var(--font-size-33); line-height: var(--line-height-130pct); } .public-marketing-gallery-cta__title--display { font-size: var(--font-size-28); line-height: 1.05; } .public-marketing-stats { grid-template-columns: 1fr; } .public-marketing-testimonials__title { font-size: var(--font-size-20); letter-spacing: 0.18em; } .public-marketing-testimonials__quote { font-size: var(--font-size-16); } .public-marketing-testimonials__name { font-size: var(--font-size-16); } .public-marketing-testimonials__role { font-size: var(--font-size-12); } .public-marketing-testimonials__read-more { font-size: var(--font-size-12); } } .public-marketing-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6px); width: 100%; background: var(--white-glass-frosted-90); border-bottom: var(--input-border-width-thin) solid var(--card-border); backdrop-filter: var(--backdrop-glass-medium); padding-block: var(--space-6px); padding-inline: max(var(--space-12px), calc((100vw - 1308px) / 2 + var(--space-12px))); } .public-marketing-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: var(--space-3px); text-decoration: none; } .public-marketing-nav__logo { height: auto; display: block; } .public-marketing-nav__logo--sandpiper { width: clamp(120px, 12vw, 190px); } .public-marketing-nav__logo--pour-portal { width: clamp(132px, 10vw, 168px); } .public-marketing-nav__logo--primary { width: auto; height: var(--size-56px); max-width: 320px; object-fit: contain; } .public-marketing-nav__brand-divider { align-self: stretch; width: var(--input-border-width-thin); min-height: var(--size-36px); background: var(--card-border); } .public-marketing-nav__links { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; margin-inline-start: auto; gap: var(--space-4px); } .public-marketing-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2px) var(--space-3px); border: var(--input-border-width-thin) solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); font-weight: 700; font-size: var(--font-size-15); text-decoration: none; transition: color 140ms ease, background 140ms ease, border-color 140ms ease; position: relative; white-space: nowrap; cursor: pointer; font: inherit; } [data-public-menu-toggle] { display: none; } .public-marketing-nav__link:hover { color: var(--deep-teal-slate); background: var(--surface-subtle); } .public-marketing-nav__link--active { color: var(--deep-teal-slate); background: var(--teal-light-glass-soft-12); border-color: var(--teal-light-glass-medium-26); } .public-marketing-nav__link--cta { padding-inline: var(--space-4px); background: var(--vibrant-teal); border-color: var(--vibrant-teal); color: var(--white); } .public-marketing-nav__link--cta:hover { background: var(--strong-teal); border-color: var(--strong-teal); color: var(--white); } .public-marketing-nav__link--cta-menu-item { padding-inline: var(--space-4px); background: var(--vibrant-teal); border-color: var(--vibrant-teal); color: var(--white); } .public-marketing-nav__link--cta-menu-item:hover { background: var(--strong-teal); border-color: var(--strong-teal); color: var(--white); } .public-marketing-nav__dropdown { position: relative; } .public-marketing-nav__link--dropdown { appearance: none; cursor: pointer; font: inherit; } .public-marketing-nav__link--dropdown::after { content: "▾"; margin-left: var(--space-1-5px); font-size: var(--font-size-12); } .public-marketing-nav__dropdown-menu { position: absolute; top: calc(100% + var(--space-1-5px)); left: 0; z-index: 20; min-width: var(--width-220px); padding: var(--space-2px); border: var(--input-border-width-thin) solid var(--card-border); border-radius: var(--radius-standard); background: var(--card-surface); box-shadow: var(--shadow-moderate); display: none; flex-direction: column; gap: var(--space-1-5px); } .public-marketing-nav__dropdown-menu--open { display: flex; } .public-marketing-nav__dropdown-item { color: var(--text-primary); text-decoration: none; font-weight: 700; font-size: var(--font-size-14); padding: var(--space-2px) var(--space-2-5px); border-radius: var(--radius-standard); } .public-marketing-nav__dropdown-item:hover { background: var(--surface-subtle); } .public-marketing-nav__mobile-menu { display: none; } .public-marketing-nav__mobile-menu--open { display: flex; flex-direction: column; gap: var(--space-2px); width: 100%; max-width: 1308px; margin-inline: auto; padding: 0 var(--space-12px) var(--space-6px); } @media (max-width: 820px) { .public-marketing-nav { padding-block: var(--space-5px); padding-inline: var(--space-10px); align-items: flex-start; } [data-public-menu-toggle] { display: none; } [data-public-menu-toggle] { display: flex; order: 2; margin-inline-start: auto; } .public-marketing-nav__logo--sandpiper { width: clamp(96px, 24vw, 140px); } .public-marketing-nav__logo--pour-portal { width: clamp(120px, 30vw, 150px); } .public-marketing-nav__links { display: none; order: 4; flex: 1 0 100%; width: 100%; margin-inline-start: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-2px); padding-top: var(--space-6px); } .public-marketing-nav__links--menu-open { display: flex; } .public-marketing-nav__link--menu-item { width: 100%; } .public-marketing-nav__dropdown--menu-item { width: 100%; } .public-marketing-nav__link--menu-item { justify-content: flex-start; border-color: var(--card-border); background: var(--card-surface); } .public-marketing-nav__link--menu-item-active { color: var(--deep-teal-slate); width: 100%; justify-content: flex-start; border-color: var(--teal-light-glass-medium-26); background: var(--teal-light-glass-soft-12); } .public-marketing-nav__link--cta-menu-item { width: 100%; justify-content: flex-start; border-color: var(--card-border); background: var(--card-surface); color: var(--text-primary); } .public-marketing-nav__link--menu-item-active { border-color: var(--teal-light-glass-medium-26); background: var(--teal-light-glass-soft-12); } .public-marketing-nav__dropdown-menu { position: static; width: 100%; min-width: 0; } .public-marketing-nav__utility-row { order: 3; flex: 1 0 100%; } } @media (min-width: 821px) { [data-public-menu-toggle] { display: none; } } /** * Row Details Section - BEM classes for expanded table rows * Used by DataTableRowDetails and cardsView components */ /* Section Container */ .row-details-section { padding: var(--space-1-5px) var(--space-9px); background: var(--white-glass-visible-15); border-top: var(--input-border-width-thin) solid var(--soft-slate); } /* Section Header */ .row-details-section__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-9px); margin-bottom: var(--space-1-5px); } .row-details-section__title-group { display: flex; flex-direction: column; gap: var(--space-1px); } .row-details-section__title { font-size: var(--font-size-12); font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0; } .row-details-section__description { font-size: var(--font-size-12); color: var(--text-muted); margin: 0; } /* Section Content */ .row-details-section__content { display: block; } /* Form-style row details layout using Field primitive */ .row-details-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-9px) var(--space-12px); margin-top: var(--space-9px); } .row-details-form__field { min-width: 0; } .row-details-form--empty { margin-top: var(--space-9px); } .row-details-form__empty { font-size: var(--font-size-12); color: var(--text-muted); padding: var(--space-9px); text-align: center; } /* Individual Field */ .row-details-field__label { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .row-details-field__value { font-size: var(--font-size-12); color: var(--text-primary); font-weight: var(--weight-medium); min-width: 0; } @media (max-width: 767px) { .row-details-section { padding: var(--space-9px); } .row-details-section__header { flex-direction: column; align-items: flex-start; gap: var(--space-3px); } .row-details-form { grid-template-columns: minmax(0, 1fr); gap: var(--space-6px); } } /* ============================================================ * Left Tile List * ============================================================ */ .panel__thread-list { display: flex; flex-direction: column; gap: var(--space-3px); padding: var(--space-5px); } .conversation-tile { display: flex; flex-direction: column; gap: var(--space-6px); padding: var(--space-9px); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); background: transparent; cursor: pointer; transition: background var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth); } .conversation-tile:hover { background: var(--hover-surface-gradient); box-shadow: var(--hover-surface-shadow); } .conversation-tile--selected { background: var(--active-surface-gradient); box-shadow: var(--active-surface-shadow); } .conversation-tile__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6px); } .conversation-tile__header-copy { display: flex; flex-direction: column; gap: var(--space-1px); flex: 1 1 auto; min-width: 0; } .conversation-tile__header-timestamp { flex: 0 0 auto; text-align: right; white-space: nowrap; } .conversation-tile__header-aside { flex: 0 0 auto; } .conversation-tile__preview { display: flex; flex-direction: column; gap: var(--space-2px); min-width: 0; } .conversation-tile__preview-line { display: flex; align-items: flex-start; gap: var(--space-6px); min-width: 0; } .conversation-tile__preview-line--incoming { justify-content: flex-start; } .conversation-tile__preview-line--outgoing { flex-direction: row-reverse; justify-content: flex-start; } .conversation-tile__preview-line-avatar { flex: 0 0 auto; margin-top: var(--space-1px); } .conversation-tile__preview-text { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; } .conversation-tile__preview-text--outgoing { text-align: right; } .conversation-tile__preview-text--incoming { text-align: left; } /** * State Display Semantic Classes * BEM-compliant semantic classes for states * Organized by element (__) then modifiers (--) for clarity */ /* ===== BASE BLOCK ===== */ .state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-9px); padding: var(--space-24px); text-align: center; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; overflow: visible; word-wrap: break-word; overflow-wrap: break-word; margin-inline: auto; } /* Table-context State must fit inside the overlay viewport without introducing a second internal scroll area. */ .state--table { width: 100%; max-width: 100%; min-width: 0; height: var(--size-100pct); min-height: 100%; align-self: stretch; overflow: hidden; padding: clamp(var(--space-9px), 1.5cqh, var(--space-18px)); gap: clamp(var(--space-1-5px), 1.2cqh, var(--space-9px)); --state-icon-width: min(var(--stop-fade-far), var(--size-100pct)); --state-icon-max-height: 44%; } /* Fullscreen state overlay (centered, square-ish layout) */ .state--fullscreen { min-height: calc(100vh - 120px); width: min(720px, calc(100vw - 32px)); margin: 0 auto; } /* Root boot error boundary should overlay the viewport and never reflow app chrome. */ .state--boot-crash { position: fixed; inset: 0; z-index: var(--z-modal); width: 100vw; max-width: 100vw; min-height: 100dvh; margin: 0; background: var(--surface-subtle); } /* Dev-only visual debugging helper: makes misalignment obvious without affecting prod builds. */ .state--debug-bg { background: var(--red-glass-faint-10); outline: 2px dashed var(--red-glass-visible-14); outline-offset: calc(-1 * var(--size-2px)); border-radius: var(--radius-standard); } /* UT-only debug helper (used by UniversalTableBody when UTStack debug borders are enabled). */ .ut-state-debug { outline: 3px solid var(--rainbow-blue); outline-offset: 0; box-shadow: 0 0 0 2px var(--rainbow-purple); } /* Remove min-height when state is inside table cell to prevent awkward spacing */ /* REMOVED: .table__cell--empty-state .state (illegal stacked classes) * Moved to table-base.css as .table__state (proper BEM) */ /* ===== BLOCK MODIFIERS ===== */ .state--empty { padding: var(--space-24px) var(--space-18px); width: var(--size-100pct); } /* ===== ICON ELEMENT ===== */ .state__icon { font-size: var(--font-size-16); opacity: var(--opacity-light); color: var(--soft-slate); } .state__icon--empty { display: flex; align-items: center; justify-content: center; /* Remove fixed - let the bird size itself */ width: auto; height: auto; flex-shrink: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards; } .state__icon--no-data { display: flex; align-items: center; justify-content: center; /* Remove fixed - let the bird size itself */ width: auto; height: auto; flex-shrink: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards; } .state__icon--no-results { display: flex; align-items: center; justify-content: center; /* Remove fixed - let the bird size itself */ width: auto; height: auto; flex-shrink: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards; } .state__icon--no-matches { display: flex; align-items: center; justify-content: center; /* Remove fixed - let the bird size itself */ width: auto; height: auto; flex-shrink: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards; } /* No-data and no-results should use same styling as empty */ .state__icon--error { color: var(--strong-red); opacity: var(--opacity-visible); } .state__icon--loading { /* Keep centered; gentle pulse to imply activity */ animation: pulse 1.8s var(--easing-smooth) infinite; } /* Loading panels need a solid base to cover underlying skeletons */ .state--loading-panel { /* Neutral by default (modals already have a surface; tables can still override via --loading-panel-surface). */ background: var(--loading-panel-surface); border-radius: var(--radius-standard); box-shadow: var(--shadow-surface-high); width: var(--size-100pct); max-width: var(--size-100pct); padding: var(--space-24px); margin-inline: auto; overflow: visible; } /* Ensure loading icons () are fully visible */ .state__icon--loading { opacity: var(--opacity-visible); color: var(--deep-slate); } .state__icon-bird { display: block; /* Bird size is purely a function of its container. The SVG viewBox handles aspect ratio; layout sizing is 100% driven by the card/overlay width so the same asset works in full-page tables and mini tiles. */ width: var(--state-icon-width, var(--stop-fade-far)); max-width: var(--size-100pct); max-height: var(--state-icon-max-height, none); height: auto; margin: 0 auto; object-fit: contain; --icon-emotion-color: var(--white); /* Keep empty-state bird visually quiet by default. */ opacity: var(--opacity-light); filter: var(--shadow-bird-soft) saturate(0.7); transform: translateZ(0); } .state__icon-bird--loading { opacity: var(--opacity-visible); filter: var(--shadow-bird-soft); } .state__icon-bird--success { opacity: var(--opacity-visible); filter: var(--shadow-bird-soft); } .state__icon-bird--error { opacity: var(--opacity-visible); filter: var(--shadow-bird-soft); } .state__icon--success { color: var(--accent-teal); opacity: var(--opacity-visible); } /* ===== TITLE ELEMENT ===== */ .state__title { font-size: var(--font-size-14); font-weight: var(--weight-semibold); color: var(--deepest-slate); word-wrap: break-word; overflow-wrap: break-word; } /* REMOVED: .table__cell--empty-state .state__title (illegal stacked classes) * No longer needed - .table__state uses absolute positioning with container queries */ .state__title--empty { font-size: var(--font-size-14); font-weight: var(--weight-bold); line-height: var(--line-height-relaxed); } .state__title--error { color: var(--strong-red); } .state__title--success { color: var(--accent-teal); } /* ===== ELEMENT ===== */ .state__description { font-size: var(--font-size-12); color: var(--medium-slate); max-width: var(--width-320px); word-wrap: break-word; overflow-wrap: break-word; } .state__debug { margin: var(--space-0); max-width: var(--width-360px); width: var(--size-100pct); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-9px); text-align: left; } .state__debug-text { margin: var(--space-0); width: var(--size-100pct); max-width: var(--width-360px); } /* REMOVED: .table__cell--empty-state .state__description (illegal stacked classes) * No longer needed - .table__state uses absolute positioning with container queries */ .state__message--empty { font-size: var(--font-size-12); color: var(--dark-slate); line-height: var(--line-height-standard); margin: 0; } /* ===== CONTENT WRAPPER (EMPTY VARIANT) ===== */ .state__content--empty { max-width: var(--width-360px); opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards; } /* ===== CUSTOM CONTENT (EMPTY VARIANT) ===== */ .state__custom--empty { opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards; } /* ===== ACTION ELEMENT ===== */ .state__action { margin-top: var(--space-1-5px); } .state__actions { display: flex; align-items: center; gap: var(--space-9px); flex-wrap: wrap; justify-content: center; } .state__actions--empty { opacity: 0; animation: emptyStateFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s forwards; } /* Apply .state__action-btn on individual action buttons inside .state__actions--empty. */ .state__action-btn { transition: transform var(--animation-quick) var(--easing-smooth); } .state__action-btn:hover { transform: translateY(var(--transform-lift)); } .state__action-btn:active { transform: translateY(0); } @keyframes emptyStateFadeIn { from { opacity: 0; transform: translateY(var(--transform-drop)); } to { opacity: 1; transform: translateY(0); } } @keyframes emptyStatePulse { 0% { opacity: 0.5; } 100% { opacity: 0.5; } 50% { opacity: 0.3; } } @media (max-width: 767px) { .state--empty { padding: var(--space-18px) var(--space-12px); } .state--empty-large { padding: var(--space-24px) var(--space-12px); min-height: var(--height-150px-media); } .state__content--empty { max-width: var(--size-100pct); } .state__actions { flex-direction: column; width: var(--size-100pct); } .state__action-btn { width: var(--size-100pct); } } /* ============================================================================= TABLE BASE - Consumes density tokens (from density.css) - Table rendering & patterns ============================================================================= */ /* Base table element */ .table { display: table; table-layout: auto; border-collapse: collapse; border-spacing: 0; width: var(--size-100pct); min-width: 0; } /* Column width fallback - prevent 0-width columns */ .table__col { min-width: var(--width-4ch); } /* Natural width - table sizes to content, not container */ .table--natural-width { width: var(--size-2px); /* Force shrink-to-fit */ white-space: nowrap; } .table__body { width: max-content; min-width: 0; box-sizing: border-box; table-layout: fixed; /* Canonical table chrome: always-on body grid lines. */ --gl-side: var(--input-border-thin) solid var(--input-border); --gl-bottom: var(--input-border-thin) solid var(--input-border); } .table__body--scrollable { width: var(--size-100pct); min-width: 0; box-sizing: border-box; /* Canonical table chrome: always-on body grid lines. */ --gl-side: var(--input-border-thin) solid var(--input-border); --gl-bottom: var(--input-border-thin) solid var(--input-border); } .table__body--scrollable { display: flex; flex-direction: column; gap: var(--space-9px); flex: 0 0 auto; min-height: 0; } .table__body--scrollable-full { flex: 1 1 auto; min-height: 0; } .table__cell--natural-width { white-space: var(--col-white-space); } .table__header--natural-width { white-space: var(--col-white-space); } /* ALL table cells - universal density control is applied via .table__cell and .table__header */ /* Reset margins on content inside cells */ .table__cell-content { margin: 0; } /* Body cells */ .table__cell { padding: var(--table-cell-padding); font-size: var(--table-cell-font-size); line-height: var(--table-cell-line-height); vertical-align: middle; /* Column-level control via CSS vars (overridden in field-and-cell-widths.css) */ overflow: hidden; text-overflow: var(--col-text-overflow); white-space: var(--col-white-space); word-wrap: break-word; overflow-wrap: break-word; border-left: var(--gl-side, var(--input-border-thin) solid transparent); border-bottom: none; } /* Editing state marker - portaled dropdowns don't need overflow changes */ .table__cell--editing { position: relative; z-index: 100; } /* Inline-edit label: keep row height stable between view ↔ edit modes. */ .table__editable-label { display: flex; align-items: center; width: var(--size-100pct); min-width: 0; min-height: var(--input-height); box-sizing: border-box; } /* Virtual scrolling spacer row cell: no , zero intrinsic size. */ .table__cell--virtual-spacer { padding: 0; margin: 0; border: none; width: 0; height: 0; } .table__cell--truncate { max-width: var(--width-300px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Header cells */ .table__header { padding: var(--table-cell-padding); font-size: var(--table-cell-font-size); line-height: var(--table-cell-line-height); vertical-align: middle; font-weight: var(--weight-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; border-left: var(--gl-side, var(--input-border-thin) solid var(--input-border)); border-top: none; border-bottom: none; } /* Sort indicator container */ .table__header-sort { display: inline-flex; align-items: center; gap: var(--space-1px); margin-left: var(--space-1-5px); opacity: 0.7; font-size: var(--font-size-20); vertical-align: middle; line-height: var(--line-height-110pct); } .table__header-sort-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1px); width: var(--size-100pct); padding: 0; border: none; background: transparent; color: inherit; font: inherit; cursor: pointer; } .table__header-sort-icon { display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; font-size: var(--font-size-20); line-height: var(--line-height-110pct); } .table__cell--checkbox { width: var(--size-40px); min-width: var(--size-40px); max-width: var(--size-40px); text-align: center; } .table__cell--expand { width: var(--size-40px); min-width: var(--size-40px); max-width: var(--size-40px); text-align: center; } /* Header cells */ .table__header--checkbox { width: var(--size-40px); min-width: var(--size-40px); max-width: var(--size-40px); } .table__header--expand { width: var(--size-40px); min-width: var(--size-40px); max-width: var(--size-40px); } .table__expand-toggle { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: var(--font-size-16); line-height: 1; padding: 0; } .table__expand-toggle:hover { color: var(--text-primary); } /* Sort priority number (shown when multiple columns sorted) */ .table__header-sort-priority { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-16px); height: var(--size-16px); padding: 0 var(--space-0-5px); border-radius: var(--radius-pill); background: var(--vibrant-teal); color: var(--white); font-size: var(--font-size-12); font-weight: var(--weight-semibold); line-height: var(--line-height-110pct); } /* ============================================================================= CELL CONTENT CONSTRAINTS ============================================================================= */ /* Inline truncation helpers */ .table__cell-text { display: inline-block; max-width: var(--size-100pct); overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; } .table__cell-text--primary { color: var(--text-primary); font-weight: var(--weight-medium); } .table__cell-text--caption { font-size: var(--font-size-12); font-weight: var(--weight-normal); color: var(--text-muted); margin-top: var(--space-0-5px); font-style: italic; } /* Caption links: apply .table__cell-text--caption-link on elements inside captions. */ .table__cell-text--caption-link { color: currentColor; text-decoration: none; } .table__cell-text--caption-link:hover { color: var(--text-primary); } .table__cell-text--caption-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); } .table__cell-text--flex { flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto); } .table__cell-text--multiselect { max-width: var(--width-200px); margin-right: var(--space-1px); } /* ============================================================================= TABLE RENDERER LAYOUT BLOCKS Shared BEM layout blocks for CommonRenderers and nested child-table chrome. ============================================================================= */ .child-row-mini-table { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3px); width: auto; min-width: 0; max-width: var(--size-100pct); box-sizing: border-box; } .table-renderer__row { display: flex; flex-direction: row; align-items: center; gap: var(--space-9px); min-width: 0; max-width: var(--size-100pct); box-sizing: border-box; } .child-row-mini-table__archive-toggle { display: flex; flex-direction: row; align-items: center; gap: var(--space-9px); min-width: 0; max-width: var(--size-100pct); box-sizing: border-box; } .table-renderer__row--align-start { align-items: flex-start; } .table-renderer__row--center { justify-content: center; } .table-renderer__row--wrap { flex-wrap: wrap; } .table-renderer__row--actions { flex-wrap: wrap; width: max-content; max-width: 100%; margin-inline: auto; justify-content: center; } .child-row-mini-table__archive-toggle { justify-content: space-between; width: var(--size-100pct); } /* ============================================================================= TABLE HEAD (thead) ============================================================================= */ .table__head { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--sidebar-background-gradient); box-shadow: var(--shadow-section-tab-highlight); color: var(--text-on-dark); font-size: var(--font-size-12); font-weight: var(--weight-normal); opacity: 1; } .table__header:first-child { border-left: none; } .table__head::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--overlay-tab-shine); opacity: var(--table-header-shine-opacity); } .table__row--faux-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--overlay-tab-shine); opacity: var(--table-header-shine-opacity); } .table__row--child-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--overlay-tab-shine); opacity: var(--table-header-shine-opacity); } /* General header cells: keep horizontal text and safe truncation is handled by .table__header */ /* Sticky header support in scroll container */ .table__head--in-scroll-container { position: sticky; top: var(--inset-0); z-index: var(--z-sticky); background: var(--sidebar-background-gradient); } /* Dense muted header for tables (invoice line items, etc.) */ .table__head--child-dense { background: var(--light-cool-gray); font-size: var(--font-size-12); color: var(--text-muted); font-weight: var(--weight-normal); } .table__header--child-dense { padding-block: var(--space-1px); padding-inline: var(--space-1-5px); } .table__head--child-dense::before { opacity: 0.5; } /* ============================================================================= COLUMN HEADER (alternative header style) ============================================================================= */ .table__column-header { display: table-cell; padding: var(--space-1px) var(--space-1-5px); font-size: var(--font-size-12); font-weight: var(--weight-normal); text-align: left; border-bottom: var(--input-border-width-thin) solid var(--card-border); background: var(--table-header-background); /* Allow natural wrapping without per-letter splits */ white-space: normal; overflow: hidden; text-overflow: clip; word-break: keep-all; /* keep words intact */ overflow-wrap: break-word; /* prefer word-level wrapping */ text-wrap: balance; /* nicer multi-line distribution */ } .table__column-header--sortable { cursor: pointer; } .table__column-header--sorted { font-weight: var(--weight-medium); } /* ============================================================================= ROWS ============================================================================= */ .table__row { border-bottom: var(--gl-bottom, var(--input-border-thin) solid transparent); } .table__row:last-child > .table__cell { border-bottom: var(--input-border-width-thin) solid var(--input-border); } .table__row:last-child { border-bottom: none; } .table__cell { background: var(--card-surface); } /* Zebra striping stays row-owned; the first physical column is marked by a shared data attribute so header, utility cells, and data cells all use the same physical-column plan. The renderer sets the marker on the first actual cell in the row, not on a logical data index that can drift behind utility columns. */ .table__cell--first-in-row, .table__header[data-first-physical-column="true"], .table__cell[data-first-physical-column="true"] { border-left: none; } .table__row[data-row-even="true"] > .table__cell:not(.table__cell--in-child-row) { background-color: var(--table-row-alt-background); } .table__row--empty { background: var(--pale-off-white); /* When the table is flex-filled, let the empty row expand so State can center. */ height: var(--size-100pct); /* Add subtle top border to create visual separation from data */ border-top: var(--input-border-width-thin) solid var(--input-border); } .table__cell--in-empty-row { padding: var(--space-0); width: var(--size-100pct-percent); background: var(--pale-off-white); } /* Empty state cell - DEPRECATED: State now rendered as overlay outside table structure * This cell is kept minimal as a spacer only. State rendering moved to .table__state-overlay. */ .table__cell--empty-state { padding: 0; height: var(--size-100pct); min-height: var(--size-360px); /* Just a spacer - State is rendered as overlay in .table__scroll-container */ } /* State overlay wrapper - absolutely covers the scroll viewport inside the * table body. Children stretch to fill the full visible area so the State * card always spans the exact row region. */ .table__state-overlay { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; max-width: 100%; min-width: 0; display: flex; flex-direction: column; /* Stretch children to fill the full overlay width — .table__state has no explicit width and sizes from this container. Inner .state--table handles centering of content within that full-width card. */ align-items: stretch; /* Keep the viewport owned by the table body; the State primitive itself centers its own content. */ justify-content: flex-start; z-index: 2; pointer-events: auto; overflow-x: hidden; overflow-y: auto; } /* State component - rendered inside .table__state-overlay. * No explicit width — the overlay uses align-items: stretch so this element * fills the container width automatically. */ .table__state { display: flex; flex: 1 1 auto; height: var(--size-100pct); min-height: 100%; align-self: stretch; width: 100%; max-width: 100%; min-width: 0; /* Purely container-relative: never taller than the visible overlay region inside the table body scroll viewport. */ max-height: var(--size-100pct); padding: var(--space-9px); overflow-x: hidden; overflow-y: hidden; word-wrap: break-word; box-sizing: border-box; background: var(--card-surface); /* ⚠️ ARCHITECTURE: State is now rendered as overlay outside table structure. * Positioned relative to .table__scroll-container (not table cells). * CONTAINER-RELATIVE, completely independent of table columns. * Parent .table__state-overlay (align-items: stretch) drives the width. * Updated: 2026-02-13 */ } .table__state > .state { flex: 1 1 auto; height: 100%; min-height: 0; width: 100%; } /* Loading state has no special sizing — same stretch behavior as other states. */ .table__state--loading {} /* rows: structurally part of table, conceptually different content */ .table__row--child { background: transparent; } /* Cell wrapper for child content - handles table structure only */ .table__cell--child-content { padding: var(--space-9px); border: none; } /* Panel container for child content - this is where the visual styling lives */ .table__child-panel { padding: var(--space-9px); background: var(--black-glass-faint-10); border-radius: var(--radius-standard); } .table__child-panel--alt { background: var(--black-glass-visible-15); } .table__row--faux-header { /* Match main thead exactly - for Tide Tracker and similar faux headers */ position: relative; background: var(--sidebar-background-gradient); box-shadow: var(--shadow-section-tab-highlight); color: var(--text-on-dark); font-size: var(--font-size-12); font-weight: var(--weight-normal); } .table__row--faux-header--child { padding: var(--space-1px) var(--space-9px); margin-bottom: var(--space-0-5px); } .table__row--child-header { /* Child row headers use gradient */ position: relative; background: var(--secondary-surface-gradient); box-shadow: var(--secondary-surface-shadow); color: var(--text-on-dark); font-size: var(--font-size-12); font-weight: var(--weight-normal); } /* Remove inner gridlines for faux header row while keeping outer edge clean */ .table__header--in-faux-row { border-top: none; border-bottom: none; } .table__header--in-faux-row-first { border-left: none; } .table__header--in-faux-row-last { border-right: none; } /* Indented row: for line items under event headers — apply .table__cell--indented-first on the first td */ .table__cell--indented-first { padding-left: var(--space-18px); } /* Nested child cell: indent variants */ .table__cell--nested-indent-0 { padding-left: 0; } .table__cell--nested-indent-1 { padding-left: var(--width-4ch); } .table__cell--nested-indent-2 { padding-left: calc(var(--width-4ch) * 2); } .invoice-line-items__status { display: inline-flex; justify-content: flex-start; align-items: center; width: max-content; max-width: var(--width-120px); min-width: 0; } /* Tide Tracker faux header band – mimic main table header */ .tide-tracker-faux-header { background: var(--sidebar-background-gradient); box-shadow: var(--shadow-section-tab-highlight); border-bottom: var(--input-border-width-thin) solid var(--deep-teal); color: var(--text-on-primary); font-size: var(--font-size-12); font-weight: var(--weight-medium); padding: var(--space-1px) var(--space-12px); } .tide-tracker-faux-header__label { white-space: nowrap; } /* Clickable row — cursor affordance when onRowClick is set */ .table__row--clickable { cursor: pointer; } /* Muted danger tint — used for late BAs in live punch tracking */ .table__row--late { background: var(--pale-red); } /* row — single-highlight selection (distinct from checkbox selection) */ .table__row--active { background: var(--surface-secondary); } .table__row[data-row-selected="true"] { background: var(--teal-glass-light-20); } .table__row[data-row-selected="true"] > .table__cell { background: var(--teal-glass-light-20); } .table__row[data-row-expanded="true"] { background: var(--teal-glass-whisper-05); } .table__row[data-row-expanded="true"] > .table__cell, .table__row[data-row-expanded-detail="true"] > .table__cell { background: var(--teal-glass-whisper-05); } .table__row:focus { outline: none; background: var(--teal-glass-whisper-05); } .table__row:focus-visible { background: var(--teal-light-glass-soft-12); box-shadow: inset var(--shadow-offset-md) var(--shadow-offset-reset) var(--shadow-offset-reset) var(--accent-teal); } .table__row:focus-within { outline: none; background: inherit; } .table__cell--hover { background-color: var(--table-row-hover-background); cursor: pointer; } /* Last row rounding */ .table__cell--last-row { border-bottom: none; } .table__cell--last-row-first { border-bottom-left-radius: var(--radius-standard); } .table__cell--last-row-last { border-bottom-right-radius: var(--radius-standard); } /* ============================================================================= LOADING ============================================================================= */ .table__body--loading { cursor: progress; position: relative; } .table__loading { position: sticky; left: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-18px); width: var(--size-100pct); max-width: var(--size-100pct); margin: 0; } .table__loading--bird { width: var(--size-100pct); max-width: var(--size-100pct); padding: var(--space-24px) var(--space-18px); height: var(--size-100pct); background: transparent; border-radius: var(--radius-standard); box-shadow: none; } .bird--in-table-loading { display: flex; align-items: center; justify-content: center; width: var(--size-100pct); min-height: var(--height-200px); position: relative; margin-inline: auto; left: var(--inset-0); transform: none; } /* Busy-state visuals are handled by explicit . Do not globally dim table rows. */ /* Table loading overlay (for operations that fetch new data like select-all) */ /* DEPRECATED: Fullscreen table overlay Policy: Loading must never block table header/toolbar. Disable fullscreen class. If present, render nothing and avoid intercepting pointer events. */ .table-loading-overlay { position: static; inset: auto; background: transparent; backdrop-filter: none; z-index: auto; display: none; /* disabled: no fullscreen overlays in table contexts */ align-items: center; justify-content: center; animation: none; } /* Disabled with the overlay; keep as no-op to prevent accidental usage */ .table-loading-overlay__content { background: transparent; padding: 0; border-radius: 0; box-shadow: none; text-align: center; min-width: 0; animation: none; } .table-loading-overlay__message { font-size: var(--font-size-14); font-weight: var(--weight-semibold); color: var(--deepest-slate); margin-top: 0; margin-bottom: 0; display: none; } .table-loading-overlay__submessage { font-size: var(--font-size-12); color: var(--medium-slate); display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(var(--space-9px)); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================= DETAIL GRID / CHILD MESSAGES ============================================================================= */ .table__details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-200px), 1fr)); gap: var(--space-9px); padding: var(--space-9px) 0; } .table__child-message { padding-left: var(--space-24px); font-size: var(--font-size-12); color: var(--text-muted); } .table__child-message--error { color: var(--strong-red); } /* Summary field block for rows. Dense horizontal fields used in invoice/event/payroll details sections. */ /* ============================================================================= PAGINATION ============================================================================= */ .table__pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-9px); padding: var(--space-1px) var(--space-1px); font-size: var(--font-size-12); color: var(--text-secondary); background: var(--pale-off-white); position: relative; z-index: 1; border-top: var(--input-border-width-thin) solid var(--input-border-thin); width: var(--size-100pct); } .table__cell-content { display: inline-flex; align-items: center; gap: var(--space-1px); } .table__cell-link-content { display: inline-flex; align-items: center; gap: var(--space-1px); } /* Row count: ALWAYS visible — never suppress this. Users must always see total rows. */ .pagination__left { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-1px); flex: 1 1 0; min-width: 0; } .pagination__right { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1px); flex: 1 1 0; min-width: 0; } .pagination__center { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6px); flex: 0 0 auto; min-width: 0; } .pagination__rows { display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; min-width: 0; gap: var(--space-9px); } .pagination__rows-label { display: inline-flex; align-items: center; flex: 0 0 auto; } @media (max-width: 767px) { .table__pagination { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6px); padding-inline: var(--space-9px); padding-block: var(--space-6px); font-size: var(--font-size-mobile-2xs); overflow-x: hidden; } .pagination__left { display: none; } .pagination__center { flex: 1 1 100%; justify-content: center; order: 1; font-size: var(--font-size-mobile-2xs); color: var(--text-secondary); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pagination__right { flex: 1 1 100%; justify-content: flex-end; order: 2; } .pagination__rows { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; white-space: nowrap; gap: var(--space-3px); } } .table__controls { flex: 1 1 auto; } /* NOTE: Bulk action bar styles moved to */ /* ============================================================================= INLINE CELL CONTROLS ============================================================================= */ .table__cell-inline-control { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: fit-content; position: relative; } .table__cell-inline-control__overlay { position: absolute; inset: 0; background: var(--medium-white-tint); backdrop-filter: var(--backdrop-glass-light); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-standard); z-index: var(--z-popover); } /* ============================================================================= MOBILE STACKED VARIANT (opt-in) ============================================================================= */ /* Mobile card wrapper */ .table__mobile-wrapper { display: none; width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; box-sizing: border-box; overflow-x: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; flex-direction: column; gap: var(--space-1px); padding: var(--space-1px) 0; } /* Mobile card rows should be content-driven and never clip text in Safari. Keep this scoped to table mobile cards so regular Card usage is unchanged. */ .table__mobile-card { width: var(--size-100pct); min-width: 0; } .table__mobile-card-card { display: flex; flex-direction: column; gap: var(--space-5px); padding: var(--space-9px); } .table__mobile-card-header { display: flex; flex-direction: row; flex-wrap: wrap; padding: var(--space-1px) var(--space-1-5px); gap: var(--space-1-5px); align-items: center; } .table__mobile-card-header-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; font-size: clamp(14px, var(--font-size-12), 16px); /* 14px-16px on mobile for readability */ line-height: var(--line-height-normal); } .table__mobile-card-header-main { min-width: 0; flex: 1 1 auto; } .table__mobile-card-header-kicker { display: inline-flex; align-items: center; gap: var(--space-1px); min-width: 0; color: var(--text-secondary); font-size: var(--font-size-11); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; } .table__mobile-card-header-kicker-value { color: var(--strong-teal); } .table__mobile-card-header-avatar { flex: 0 0 auto; } .table__mobile-card-header-title { min-width: 0; flex: 1 1 auto; white-space: normal; text-overflow: clip; overflow: visible; } .table__mobile-card-header-copy { font-size: clamp(14px, var(--font-size-12), 16px); /* 14px-16px on mobile for readability */ line-height: var(--line-height-normal); } .table__mobile-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-5px); align-items: center; margin-top: var(--space-1-5px); } .table__mobile-card-signals { display: inline-flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-1px); min-width: 0; flex: 0 0 auto; } .table__mobile-card-divider { margin: var(--space-1px) 0 0 0; } .table__mobile-card-field { display: flex; flex-direction: column; gap: var(--space-1px); min-width: 0; } .table__mobile-card-action-btn { line-height: var(--line-height-normal); } .table__mobile-card-field-value { line-height: var(--line-height-normal); } .table__mobile-card-field-label { line-height: var(--line-height-normal); } .table__mobile-card-header-copy { line-height: var(--line-height-normal); } .table__mobile-card-action-btn { overflow: visible; } .table__mobile-card-toggle-hit { overflow: visible; } /* ============================================================================= MOBILE ACCESSIBILITY - WCAG 2.5.5 Touch Target Size & Font Readability ============================================================================= */ /* Details toggle control hit area - 44×44 CSS pixels minimum (WCAG 2.5.5). */ .table__mobile-card-toggle-hit { flex: 0 0 auto; width: var(--size-44px); height: var(--size-44px); min-width: var(--size-44px); min-height: var(--size-44px); display: inline-flex; align-items: center; justify-content: center; } /* Mobile action buttons - 44×44 CSS pixels minimum (WCAG 2.5.5) */ .table__mobile-card-action-btn { min-width: var(--size-44px); min-height: var(--size-44px); padding: var(--space-1-5px) var(--space-9px); } /* Field labels and values in expanded details */ .table__mobile-card-field-label { font-size: clamp(13px, var(--font-size-12), 14px); /* Slightly smaller for labels */ font-weight: var(--weight-semibold); } .table__mobile-card-field-value { font-size: clamp(13px, var(--font-size-12), 15px); white-space: normal; text-overflow: clip; overflow: visible; } /* Button text within mobile cards - ensure readable sizing */ .table__mobile-card-action-btn { font-size: clamp(13px, var(--font-size-12), 14px); /* Minimum 13px for touch-target buttons */ letter-spacing: var(--tracking-sm); } /* Mobile-card details should use the canonical row-details grid contract, not ad-hoc stacks, while staying dense on narrow screens. */ .table__mobile-card-field-grid { display: grid; margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-1-5px); } /* ============================================================================= SCROLLING ============================================================================= */ .table__scroll-container { position: relative; display: flex; flex-direction: column; width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; flex: 1 1 auto; min-height: var(--height-140px); /* Keep small dashboard/mini tables from clipping loading state + pagination */ overflow-x: auto; overflow-y: visible; box-sizing: border-box; /* The scroll viewport owns the outer table frame. Left/right edges already come from pinned pseudo-elements; bottom edge must live here too so wide rows do not visually "stop" at per-cell borders. */ box-shadow: inset 0 calc(var(--input-border-width-thin) * -1) 0 0 var(--input-border); } /* Keep side borders visually pinned to the viewport while horizontal scrolling. This preserves the same left/right frame even when wide tables pan underneath. */ .table__scroll-container::before { content: ''; position: absolute; top: 0; bottom: 0; width: var(--input-border-width-thin); background: var(--input-border); pointer-events: none; z-index: 2; } .table__scroll-container::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--input-border-width-thin); background: var(--input-border); pointer-events: none; z-index: 2; } .table__scroll-container::before { left: 0; } .table__scroll-container::after { right: 0; } /* Tablet and below: the filter band and side panels consume more vertical space, so allow the table scroll region to shrink without forcing the full-size card to overflow/clamp content. */ @media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) { .table__scroll-container { min-height: var(--size-120px); } } .table__scroll-container--full-height { /* CRITICAL: Flex-fill parent container */ flex: 1 1 0; height: 100%; block-size: 100%; min-height: 100%; display: flex; flex-direction: column; } .table__scroll-container--max-height { /* Scroll-capped tables should hug their rendered rows instead of reserving empty viewport space beneath a short body. */ min-height: 0; max-height: var(--table-max-height-page); overflow-y: auto; } @media (max-width: 767px) { .table--with-mobile-cards .table__scroll-container--mobile-cards { display: none; } .table--with-mobile-cards .table__mobile-wrapper--mobile-cards { display: flex; } } .table__scroll-content { flex: 1 1 auto; /* Allow inner table element to grow wider than the viewport so horizontal scrolling can reveal additional columns. The outer .table__scroll-container owns overflow-x. */ box-sizing: border-box; position: relative; min-height: 0; height: 100%; block-size: 100%; min-height: 100%; overflow-y: visible; overflow-x: visible; display: flex; flex-direction: column; } .table__scroll-content::after { content: ''; flex: 1 1 auto; min-height: var(--space-24px); width: var(--size-100pct); align-self: stretch; background: var(--inactive-surface-gradient); border-top: var(--input-border-width-thin) solid var(--input-border); pointer-events: none; } /* State renders in .table__state-overlay so it is sized to the visible scroll viewport, independent of intrinsic table column width. */ .table--in-scroll-container { display: table; /* Default: let the table size to its contents so a single data row never stretches to fill the full-height viewport. Extra space remains blank. */ flex: 0 0 auto; height: auto; width: auto; table-layout: auto; box-sizing: border-box; } .table--in-scroll-container--full-surface { width: max-content; min-width: var(--size-100pct); } .table--state-only-fills-scroll { /* Keep the empty table structure filling the scroll viewport while the viewport-sized State overlay owns the visible status UI. */ flex: 1 1 auto; height: var(--size-100pct); } .table__row { height: auto; } .table__body--in-scroll-container { display: table-row-group; overflow: visible; height: auto; } .table__scroll-gutter { position: absolute; top: var(--inset-0); right: var(--inset-0); width: var(--space-1-5px); height: var(--size-100pct-percent); pointer-events: none; z-index: var(--z-overlay); } /* Subtle scrollbars for dense card tables (mini UTStack widgets) */ .table-row-scroll--mini { scrollbar-width: thin; scrollbar-color: var(--teal-glass-strong-40) transparent; } .table-row-scroll--mini::-webkit-scrollbar { width: var(--space-0-5px); height: var(--space-0-5px); } .table-row-scroll--mini::-webkit-scrollbar-track { background: transparent; } .table-row-scroll--mini::-webkit-scrollbar-thumb { background-color: var(--teal-glass-strong-40); border-radius: var(--radius-pill); opacity: 0; transition: opacity 0.2s ease; } .table-row-scroll--mini:hover::-webkit-scrollbar-thumb { opacity: 1; } /* ============================================================================= VIRTUAL SCROLLING ============================================================================= */ .table__scroll-body { display: block; } .table__scroll-row { display: block; } .table__scroll-cell { display: block; padding: var(--space-0); border: none; } .table__scroll-nested { width: var(--size-100pct); border-collapse: inherit; } .table__scroll-nested-body { display: table-row-group; } /* ============================================================================= TABLE DATE CELL ============================================================================= */ .table__cell-date { display: inline-flex; align-items: center; gap: var(--space-1px); padding: var(--space-1px) var(--space-1-5px); border: none; background: transparent; border-radius: var(--radius-standard); font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-primary); cursor: pointer; transition: all var(--animation-quick) var(--easing-smooth); } .table__cell-date:hover { background: var(--teal-glass-whisper-05); } .table__cell-date:focus-visible { outline: var(--size-2px) solid var(--accent-teal); outline-offset: var(--space-0-5px); } .table__cell-date__text { flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto); } .table__cell-date__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: var(--flex-shrink-none); } .table__cell-content__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: var(--flex-shrink-none); } /* ============================================================================= CELL CONTENT PATTERNS ============================================================================= */ .table__cell-content__text { display: flex; flex-direction: column; gap: var(--space-0-5px); } .table__cell-datetime { display: flex; flex-direction: column; gap: var(--space-0-5px); } .table__cell-content__text-main { font-weight: var(--weight-semibold); color: var(--text-primary); } .table__cell-content__text-sub { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--width-240px); } /* Datetime block */ .table__cell-datetime__date { font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; } .table__cell-datetime__time { font-size: var(--font-size-12); white-space: nowrap; } .table__cell-datetime__range-to { font-size: var(--font-size-12); white-space: nowrap; } .table__cell-datetime__time { color: var(--text-secondary); } .table__cell-datetime__range-to { color: var(--text-muted); margin-top: var(--space-0-5px); font-weight: var(--weight-medium); } .table__cell-datetime__one-line { white-space: nowrap; } .table__cell-phone-link { color: var(--text-primary); text-decoration: none; } .table__cell-phone-link:link { color: var(--text-primary); text-decoration: none; } .table__cell-phone-link:visited { color: var(--text-primary); text-decoration: none; } .table__cell-phone-link:hover { color: var(--text-primary); text-decoration: none; } .table__cell-phone-link:active { color: var(--text-primary); text-decoration: none; } .cell-hover-actions { display: inline-flex; align-items: center; gap: var(--space-0-5px); } .cell-hover-actions__content { min-width: 0; } .cell-hover-actions__actions { display: inline-flex; align-items: center; gap: var(--size-2px); opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .cell-hover-actions__actions--visible { opacity: 1; pointer-events: auto; } .actions-row--hover-only--visible { opacity: 1; pointer-events: auto; } .actions-row--hover-only:hover { opacity: 1; pointer-events: auto; } .actions-row--hover-only:focus-within { opacity: 1; pointer-events: auto; } /* ID columns: reserve equal action slots so numeric content stays centered. */ .cell-hover-actions--id-link { --id-hover-slot-size: var(--size-20px); display: grid; grid-template-columns: var(--id-hover-slot-size) minmax(0, auto) var(--id-hover-slot-size); align-items: center; justify-content: center; width: var(--size-100pct); column-gap: var(--size-2px); } .cell-hover-actions__content--id-link { grid-column: 2; justify-self: center; } .cell-hover-actions__actions--id-link { grid-column: 3; justify-self: end; min-width: var(--id-hover-slot-size); gap: 0; } .table__cell-id-text { display: inline-block; font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); line-height: 1.1; } .table__cell-id-stack { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; } .table__cell-id-subtext { font-size: var(--font-size-12); color: var(--text-muted); margin-top: var(--size-1px); white-space: nowrap; } .table__receipt-thumb-link { display: inline-flex; } .actions-row--hover-only { opacity: 0; pointer-events: none; transition: opacity 120ms ease; } /* Currency block */ .table__cell-currency { display: inline-flex; align-items: center; gap: var(--space-1px); font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); } .table__cell-currency__icon { display: inline-flex; align-items: center; color: var(--text-secondary); flex-shrink: var(--flex-shrink-none); } /* ============================================================================= COLUMN WIDTH MODIFIERS Column widths are defined in field-and-cell-widths.css ============================================================================= */ /* ========================================================================== In-cell grid: reusable stacked grid row layout ========================================================================== */ .in-cell-grid { display: grid; grid-template-columns: 1fr; gap: var(--size-6px); } .in-cell-grid__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(calc(var(--size-3px) * 3)); row-gap: var(--size-3px); } .in-cell-grid__cell { min-width: 0; } .in-cell-grid__head { padding-bottom: var(--size-3px); border-bottom: var(--size-1px) solid var(--card-border); } .in-cell-grid__label { word-break: keep-all; overflow-wrap: normal; } .in-cell-grid__value { word-break: normal; overflow-wrap: break-word; } .in-cell-grid__sub { margin-top: var(--size-3px); } .in-cell-grid__full { /* Form-like layout with a real label column width. */ grid-template-columns: minmax(14ch, 16ch) minmax(16ch, 1fr); } .in-cell-grid__products { display: grid; gap: var(--size-2px); } .in-cell-grid__product { white-space: pre-wrap; } .in-cell-grid__byline { border-top: var(--size-1px) dashed var(--card-border); padding-top: var(--size-6px); margin-top: var(--size-3px); } /* Three-column audit grid container (Event vs OCR vs Flags) */ .audit-grid-container { display: grid; /* Prevent extreme squish; allow horizontal scroll in tight containers (wizard pane). */ grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: var(--size-12px); } .audit-grid-column { min-width: 0; } /* Name cell — avatar + text stack inside a table name column */ .name-cell__text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-0-5px); min-width: 0; line-height: var(--line-height-tight); } /* Staffing cell hierarchy */ .table__staffing-line { display: flex; align-items: center; gap: var(--space-1px); } .table__staffing-line--service { margin-top: var(--space-1px); } .table__staffing-line--role { margin-top: var(--space-1px); } .table__staffing-line--indent-1 { padding-left: var(--space-12px); } .table__staffing-line--indent-2 { padding-left: var(--space-24px); } .table__staffing-line--person { gap: var(--space-4px); } .table__staffing-line--with-actions { gap: var(--space-6px); } .table__staffing-name-button { background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } /* Intensity variables (toggleable via AppHeader) */ .ut-gridlines-level-1 { /* Hairline - subtle structure */ --ut-gridline-width: var(--input-border-thin); --ut-gridline-color: var(--teal-glass-soft-12); --ut-gridline-side-border: var(--ut-gridline-width) solid var(--ut-gridline-color); --ut-gridline-bottom-border: var(--ut-gridline-width) solid var(--ut-gridline-color); --ut-gridline-top-border: var(--ut-gridline-width) solid var(--ut-gridline-color); } .ut-gridlines-level-2 { /* Medium */ --ut-gridline-width: var(--input-border-thin); --ut-gridline-color: var(--teal-glass-medium-30); --ut-gridline-side-border: var(--ut-gridline-width) solid var(--ut-gridline-color); --ut-gridline-bottom-border: var(--ut-gridline-width) solid var(--ut-gridline-color); --ut-gridline-top-border: var(--ut-gridline-width) solid var(--ut-gridline-color); } .ut-gridlines-level-3 { /* Strong */ --ut-gridline-width: var(--input-border-std); --ut-gridline-color: var(--input-border); --ut-gridline-side-border: var(--ut-gridline-width) solid var(--ut-gridline-color); --ut-gridline-bottom-border: var(--ut-gridline-width) solid var(--ut-gridline-color); --ut-gridline-top-border: var(--ut-gridline-width) solid var(--ut-gridline-color); } /* Ensure gridlines work with split tables. * The root level class is the global AppHeader switch. DataTable owns * .table-gridlines on every canonical table surface. */ .table-gridlines { border-collapse: collapse; /* Activate side borders for all cells */ --gl-side: var(--ut-gridline-side-border, var(--input-border-thin) solid var(--input-border)); --gl-right: var(--ut-gridline-side-border, none); /* Activate bottom border for data cells */ --gl-bottom: var(--ut-gridline-bottom-border, none); /* Activate top border for header cells */ --gl-top: var(--ut-gridline-top-border, none); } .table__header { border-top: var(--gl-top); border-bottom: var(--gl-bottom); border-right: var(--gl-right); } .table__cell { border-bottom: var(--gl-bottom); border-right: var(--gl-right); } /* Task Modal Styles */ .task-modal__closed-notice { padding: var(--space-9px); background-color: var(--pale-teal); border-radius: var(--radius-standard); } .task-modal__note-input-area { padding: var(--space-9px); border: 1px solid var(--input-border); border-radius: var(--radius-standard); } .task-modal__note-card { padding: var(--space-9px); border: 1px solid var(--input-border); border-radius: var(--radius-standard); } .task-modal__metadata-pre { padding: var(--space-9px); background-color: var(--white-glass-subtle-04); border-radius: var(--radius-standard); overflow: auto; } .team-member-card { align-items: flex-start; background: var(--card-surface); border: var(--input-border-width-thin) solid var(--card-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-subtle); display: flex; gap: var(--size-12px); padding: var(--size-12px); } .team-member-card__body { display: grid; gap: var(--size-4px); min-inline-size: 0; } .team-member-card__assignments { border-top: var(--input-border-width-thin) solid var(--card-border); display: grid; gap: var(--size-4px); margin-top: var(--size-8px); padding-top: var(--size-8px); } /* ==================================================================== Toast Notification Component ==================================================================== */ /* Type-specific left-border accent (added via toast--{type} modifier from BrandedToast). */ .toast--info { border-left: 3px solid var(--vibrant-teal); } .toast--success { border-left: 3px solid var(--strong-teal); } .toast--warning { border-left: 3px solid var(--strong-sunset); } .toast--error { border-left: 3px solid var(--strong-red); } /* ============================================================================ TOOLBAR UTILITIES Canonical toolbar component with BEM variants for control bars, header actions, and inline button groups across the application. ========================================================================= */ /* === BASE TOOLBAR === */ /* Extends .hstack with toolbar-specific gap */ .toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--toolbar-group-gap); flex-wrap: wrap; overflow: visible; box-sizing: border-box; flex: 0 1 auto; min-width: var(--min-content); max-width: var(--size-100pct); margin-inline-start: auto; } .toolbar--justify-center { justify-content: center; } .toolbar--collapsed { position: relative; flex-wrap: nowrap; } .toolbar__group { display: inline-flex; align-items: center; gap: var(--toolbar-group-gap); flex-wrap: nowrap; flex: 0 0 auto; min-width: 0; max-width: max-content; } .toolbar--wrap { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-1-5px); flex: 1 1 auto; min-width: 0; max-width: var(--size-100pct); margin-inline-start: 0; } .toolbar__wrap-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-1-5px); flex-wrap: nowrap; min-width: 0; width: 100%; max-width: var(--size-100pct); } .toolbar__wrap-row--justify-center { justify-content: center; } /* ── Toolbar vertical divider — separates action icons from view switcher ── */ .toolbar__divider { width: var(--size-1px); align-self: stretch; background: var(--text-color-primary); opacity: 0.35; flex-shrink: 0; margin: var(--space-1px) 0; } @media (max-width: 767px) { .toolbar { margin-left: 0; order: 2; min-width: 0; justify-content: flex-end; overflow: visible; } } .column-picker { display: flex; flex-direction: column; gap: var(--space-1-5px); } .column-picker__list { display: flex; flex-direction: column; gap: var(--space-1-5px); } .progressive-disclosure-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-1-5px); } .saved-views-switcher__toolbar { display: flex; align-items: center; gap: var(--space-1-5px); flex-wrap: wrap; } /* ================================================================= ACCESSIBILITY UTILITIES ================================================================= Screen reader utilities, skip links, focus management, touch targets ================================================================= */ /* ===== SCREEN READER ONLY ===== */ .sr-only { position: absolute; width: var(--space-1px); height: var(--space-1px); padding: var(--space-0); margin: calc(var(--space-1px) * -1); overflow: hidden; clip-path: var(--clip-visually-hidden); white-space: nowrap; border: none; } .visually-hidden { clip-path: var(--clip-visually-hidden); height: var(--space-1px); overflow: hidden; position: absolute; white-space: nowrap; width: var(--space-1px); } /* ===== SKIP TO MAIN CONTENT ===== */ .skip-link { position: fixed; top: var(--space-1px); left: var(--space-1px); background: var(--vibrant-teal); color: var(--text-on-primary); padding: var(--space-9px); border-radius: var(--radius-standard); text-decoration: none; z-index: var(--z-topmost); transform: translateY(-150%); opacity: 0; pointer-events: none; transition: transform var(--animation-quick) var(--easing-smooth), opacity var(--animation-quick) var(--easing-smooth); } .skip-link:focus { transform: translateY(0); opacity: 1; pointer-events: auto; } .skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } /* ===== TOUCH TARGET UTILITY ===== */ .touch-target { min-height: var(--space-12px); min-width: var(--space-12px); } /* ========================================================================== REDUCED MOTION ACCESSIBILITY All reduced-motion overrides for users with motion sensitivity. Organized by component category for easy navigation. ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* --- GLOBAL --- */ * { animation-duration: var(--animation-instant); transition-duration: var(--animation-instant); scroll-behavior: auto; } ::before { animation-duration: var(--animation-instant); transition-duration: var(--animation-instant); scroll-behavior: auto; } ::after { animation-duration: var(--animation-instant); transition-duration: var(--animation-instant); scroll-behavior: auto; } /* --- MOTION UTILITIES --- */ /* .motion-safe is applied directly to animated elements that should stop under reduced-motion */ .motion-safe { animation: none; transition: none; } .uses-brand-animations { animation: none; transition-duration: var(--animation-instant); } .uses-ambient-animations { animation: none; transition-duration: var(--animation-instant); } .animate-pulse { animation: none; transition-duration: var(--animation-instant); } /* --- LOADING STATES --- */ .skeleton { animation: none; background-size: auto; } .wave-bar { animation: none; } .liquid { animation: none; } .surface-ripple { animation: none; } .pour-stream { animation: none; } .ripple-circle { animation: none; } .skeleton-line { animation: none; } .cobrand__pp { animation: none; } /* --- HEADERS --- */ .page-header::after { animation: none; } .page-header--glass { backdrop-filter: none; } .theme--glass__page-header { backdrop-filter: none; } /* --- MESSAGING --- */ .typing-dots__dot { animation: none; } /* --- EASTER EGGS --- */ .confetti-piece { animation: none; } .achievement-icon { animation: none; } .konami-mode { animation: none; } .seasonal-theme::before { animation: none; } .seasonal-theme::after { animation: none; } .achievement-badge { animation: none; opacity: var(--opacity-visible); transform: translateX(-50%); } .secret-content { animation: none; transform: none; } /* --- FEEDBACK STATES --- */ .top-progress__bar { transition: none; } } /* ===== CONTINUED BELOW ===== */ .touch-target-extended { } /* ===== ACCESSIBILITY MEDIA QUERIES ===== */ /* ===== COMPONENT-SPECIFIC ADJUSTMENTS ===== Text-size CSS custom properties are set on :root via the .text-size-* classes. Components consume --table-cell-font-size, --text-size-card-padding, etc. */ .text-size-dense { /* Table cells: consumed by . via their existing CSS var hooks */ --table-cell-font-size: var(--font-size-12); --table-cell-padding: var(--space-1px) var(--space-9px); /* Card: consumed by .card in card-utilities.css */ --text-size-card-padding: var(--space-9px); } .text-size-large { --table-cell-font-size: var(--font-size-14); --table-cell-padding: var(--space-9px) var(--space-9px); --text-size-card-padding: var(--space-12px); --text-size-btn-minimal-padding: var(--space-9px) var(--space-9px); --text-size-btn-minimal-min-height: var(--size-56px); } /* Text-size defaults — overridden by .text-size-dense / .text-size-large when active */ :root { --text-size-card-padding: var(--space-9px); --text-size-btn-minimal-padding: var(--space-9px) var(--space-9px); --text-size-btn-minimal-min-height: auto; } .btn--minimal { padding: var(--text-size-btn-minimal-padding); min-height: var(--text-size-btn-minimal-min-height); } /* Global focus-visible ring for core interactive controls */ .checkbox:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); } .quick-access-item:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); } /* === Unstyled primitive (reset control chrome) === */ /* Use for inline interactive controls that should inherit typography and layout */ .unstyled-button { background: none; border: none; padding: var(--space-0); margin: var(--space-0); color: currentColor; font: inherit; line-height: inherit; text-align: left; text-decoration: none; border-radius: var(--radius-standard); cursor: pointer; } .unstyled-button:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); } /* === Focus ring utilities === */ .focus-ring { outline: var(--focus-ring); outline-offset: var(--ring-offset-sm); } .focus-visible-ring:focus-visible { outline: var(--focus-ring); outline-offset: var(--ring-offset-sm); } .focus-ring-soft { outline: var(--focus-ring-subtle); outline-offset: var(--ring-offset-sm); } /* === Toggle control helpers (migrated from 65) === */ .toggle { width: var(--size-56px); height: var(--space-18px); border-radius: var(--radius-pill); background: var(--light-slate); border: var(--input-border-width-thin) solid var(--soft-slate); display: inline-flex; align-items: center; padding-block: var(--space-0); padding-inline: var(--space-1px); transition: background-color var(--animation-smooth) var(--easing-smooth), border-color var(--animation-smooth) var(--easing-smooth); cursor: pointer; } .toggle__thumb { width: var(--space-12px); height: var(--space-12px); border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-soft); transform: translateX(var(--space-0)); transition: transform var(--animation-smooth) var(--easing-smooth); } /* ============================================================================ ARIA ATTRIBUTE SELECTORS Ensure ARIA states are visually represented ============================================================================ */ /* ARIA Disabled State */ [aria-disabled="true"] { opacity: var(--opacity-soft); cursor: not-allowed; pointer-events: none; } [aria-disabled="true"] { opacity: var(--opacity-light); } /* ARIA Selected State */ [aria-selected="true"] { background-color: var(--light-teal); font-weight: var(--weight-medium); } /* ARIA Expanded State — apply .expand-icon--expanded / .expand-icon--collapsed directly on the element */ .expand-icon--expanded { transform: rotate(180deg); } .expand-icon--collapsed { transform: none; } /* ARIA Invalid State */ [aria-invalid="true"] { border-color: var(--strong-red); } [aria-invalid="true"]:focus-visible { outline-color: var(--strong-red); box-shadow: var(--ring-red); } /* ARIA Required Indicator */ [aria-required="true"]::after { content: " *"; color: var(--strong-red); font-weight: var(--weight-semibold); margin-left: var(--space-0-5px); } .required::after { content: " *"; color: var(--strong-red); font-weight: var(--weight-semibold); margin-left: var(--space-0-5px); } /* ARIA Pressed State Limit the strong accent treatment to semantic pills/chips instead of every toggle button, so icon-only controls (e.g., UT filter funnel) can stay visually neutral. */ .pill--pressed { background-color: var(--vibrant-teal); color: var(--text-on-primary); } /* ARIA Current State (navigation) */ [aria-current="page"] { background-color: var(--light-teal); color: var(--vibrant-teal); font-weight: var(--weight-bold); } [aria-current="location"] { background-color: var(--light-teal); color: var(--vibrant-teal); font-weight: var(--weight-bold); } /* ARIA State */ [aria-busy="true"] { cursor: wait; } /* `aria-hidden="true"` hides content from assistive tech, not visually. Use the `hidden` attribute or a dedicated utility class when you need visual hiding. */ /* BADGES & CHIPS */ :root { --_alert-margin: 0; --_alert-padding: 0; --_alert-border-radius: 0; --_alert-font-size: var(--font-size-12); --_alert-line-height: var(--line-height-standard); } .badge { display: inline-flex; align-items: center; gap: var(--space-1-5px); padding: 0 var(--badge-padding-inline); min-height: var(--badge-height); border-radius: var(--radius-standard); font-size: var(--badge-font-size); font-weight: var(--weight-medium); line-height: var(--control-line-height); white-space: nowrap; background-color: var(--soft-slate); color: var(--text-on-dark); /* Variant support via class or data attribute */ } .badge__dot { width: var(--space-1-5px); height: var(--space-1-5px); border-radius: var(--radius-pill); background: currentColor; flex-shrink: var(--flex-shrink-none); opacity: 0.8; } .badge__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-12px); height: var(--space-12px); flex-shrink: var(--flex-shrink-none); } .badge__label { white-space: nowrap; } .badge--neutral { background-color: var(--soft-slate); color: var(--text-on-dark); } .badge--soft { background-color: var(--soft-slate); color: var(--text-on-dark); } .badge--subtle { background-color: var(--soft-slate); color: var(--text-on-dark); } .badge--tone-neutral { background-color: var(--soft-slate); color: var(--text-on-dark); } .badge--info { background-color: var(--light-teal); color: var(--deep-teal); } .badge--tone-info { background-color: var(--light-teal); color: var(--deep-teal); } .universal-table__status-badge--info { background-color: var(--light-teal); color: var(--deep-teal); } .badge--success { background-color: var(--light-teal); color: var(--strong-teal); } .badge--tone-success { background-color: var(--light-teal); color: var(--strong-teal); } .universal-table__status-badge--success { background-color: var(--light-teal); color: var(--strong-teal); } .badge--warning { background-color: var(--light-sunset); color: var(--strong-sunset); } .badge--tone-warning { background-color: var(--light-sunset); color: var(--strong-sunset); } .universal-table__status-badge--warning { background-color: var(--light-sunset); color: var(--strong-sunset); } .badge--danger { background-color: var(--light-red); color: var(--strong-red); } .badge--tone-danger { background-color: var(--light-red); color: var(--strong-red); } .universal-table__status-badge--danger { background-color: var(--light-red); color: var(--strong-red); } .badge--accent { background-color: var(--soft-teal); color: var(--text-on-primary); } .badge--tone-accent { background-color: var(--soft-teal); color: var(--text-on-primary); } .badge--pinned { position: absolute; top: var(--space-1-5px); right: var(--space-1-5px); z-index: var(--z-sticky); } .badge--count { font-size: var(--control-font-size); padding: var(--space-0-5px) var(--space-1px); } .badge--size-default { min-height: var(--badge-height); padding: 0 var(--badge-padding-inline); font-size: var(--badge-font-size); font-weight: var(--weight-semibold); } /* Interactive badges render as buttons (see Badge.tsx's isInteractive). */ .badge--interactive { cursor: pointer; border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); background: var(--active-surface-gradient); box-shadow: var(--shadow-moderate); color: var(--text-on-dark); transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .badge--interactive:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .badge--interactive:not(.badge--corner):hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(var(--transform-lift)); } .badge--interactive:not(.badge--corner):active { transform: translateY(0); } /* Icon-content badges (Badge.tsx renders an instead of text/count). */ .badge--icon-content { --btn-icon-w: var(--size-12px); --btn-icon-h: var(--size-12px); } /* Corner-overlay positioning (e.g. a count badge pinned to a button corner). */ .badge--corner { position: absolute; z-index: 2; overflow: visible; } /* Inset from the corner (not centered on it) so the badge overlaps its host button's edge instead of hanging half outside — matches the pre-existing .badge--pinned inset convention rather than a translate(50%,-50%) dot-pin. */ .badge--corner-top-left { top: var(--space-1-5px); left: var(--space-1-5px); } .badge--corner-top-right { top: var(--space-1-5px); right: var(--space-1-5px); } .badge--corner-bottom-left { bottom: var(--space-1-5px); left: var(--space-1-5px); } .badge--corner-bottom-right { bottom: var(--space-1-5px); right: var(--space-1-5px); } .badge--interactive.badge--corner-top-left:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(-1px); } .badge--interactive.badge--corner-top-right:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(-1px); } .badge--interactive.badge--corner-bottom-left:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(-1px); } .badge--interactive.badge--corner-bottom-right:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(-1px); } .badge--interactive.badge--corner-top-left:active { transform: translateY(0); } .badge--interactive.badge--corner-top-right:active { transform: translateY(0); } .badge--interactive.badge--corner-bottom-left:active { transform: translateY(0); } .badge--interactive.badge--corner-bottom-right:active { transform: translateY(0); } .badge--notification { background: var(--strong-red); color: var(--white); font-size: var(--font-size-12); font-weight: var(--weight-semibold); line-height: 1; border-radius: var(--radius-pill); min-width: 1.25em; min-height: 1.25em; padding: 0 var(--space-2px); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .badge--ghost { background-color: transparent; border: none; box-shadow: none; color: var(--text-on-dark); } .badge--ghost-muted { background-color: transparent; border: none; box-shadow: none; color: var(--text-color-on-dark-muted); } .badge--ghost-muted-light { background-color: transparent; border: none; box-shadow: none; color: var(--white-glass-heavy-50); } /* Legacy variants */ .badge--outline { background-color: transparent; color: var(--dark-slate); border: var(--input-border-width-thin) solid var(--soft-slate); } /* ===== BADGE TONE MODIFIERS ===== Composable with structural variants (e.g. badge--subtle + badge--tone-warning). */ .universal-table__status-badge { display: inline-flex; align-items: center; gap: var(--space-1px); border-radius: var(--radius-pill); padding: var(--space-0-5px) var(--space-1-5px); font-size: var(--font-size-12); font-weight: var(--weight-medium); border: var(--input-border-width-thin); } .universal-table__status-badge--neutral { background-color: var(--light-slate); color: var(--dark-slate); } .chip { display: inline-flex; align-items: center; gap: var(--space-1-5px); padding: var(--space-1px) var(--space-9px); border-radius: var(--radius-standard); font-size: var(--font-size-12); font-weight: var(--weight-medium); background-color: var(--light-slate); color: var(--darker-slate); border: var(--input-border-width-thin) solid var(--soft-slate); } .stat-chip { display: inline-flex; align-items: center; gap: var(--space-1-5px); padding: var(--space-1px) var(--space-9px); border-radius: var(--radius-standard); font-size: var(--font-size-12); font-weight: var(--weight-medium); background-color: var(--light-slate); color: var(--darker-slate); border: var(--input-border-width-thin) solid var(--soft-slate); } .chip--info { background-color: var(--light-teal); color: var(--deep-teal); border-color: var(--soft-teal); } .stat-chip--info { background-color: var(--light-teal); color: var(--deep-teal); border-color: var(--soft-teal); } .chip--success { background-color: var(--light-teal); color: var(--strong-teal); border-color: var(--medium-teal); } .stat-chip--success { background-color: var(--light-teal); color: var(--strong-teal); border-color: var(--medium-teal); } .chip--warning { background-color: var(--light-sunset); color: var(--strong-sunset); border-color: var(--soft-sunset); } .stat-chip--warning { background-color: var(--light-sunset); color: var(--strong-sunset); border-color: var(--soft-sunset); } .chip--danger { background-color: var(--light-red); color: var(--strong-red); border-color: var(--strong-red); } .stat-chip--danger { background-color: var(--light-red); color: var(--strong-red); border-color: var(--strong-red); } .chip--ut-date { gap: var(--space-1px); border-radius: var(--radius-standard); border-color: transparent; background: linear-gradient( to bottom, var(--white-glass-full-95), var(--light-teal) 55%, var(--white-glass-frosted-90) ); box-shadow: var(--shadow-glow-crisp); color: var(--vibrant-teal); text-decoration: none; cursor: pointer; user-select: none; } .stat-chip--ut-date { gap: var(--space-1px); border-radius: var(--radius-standard); border-color: transparent; background: linear-gradient( to bottom, var(--white-glass-full-95), var(--light-teal) 55%, var(--white-glass-frosted-90) ); box-shadow: var(--shadow-glow-crisp); color: var(--vibrant-teal); text-decoration: none; cursor: pointer; user-select: none; } .chip--ut-date:hover { transform: translateY(var(--lift-subtle)); background: linear-gradient( to bottom, var(--white-glass-full-95), var(--light-teal) 55%, var(--white-glass-full-95) ); box-shadow: var(--shadow-glow-soft); } .stat-chip--ut-date:hover { transform: translateY(var(--lift-subtle)); background: linear-gradient( to bottom, var(--white-glass-full-95), var(--light-teal) 55%, var(--white-glass-full-95) ); box-shadow: var(--shadow-glow-soft); } .chip__icon-chevron--ut-date { display: inline-flex; align-items: center; justify-content: center; width: var(--space-9px); height: var(--space-9px); opacity: var(--opacity-subtle); } .stat-chip__icon-chevron--ut-date { display: inline-flex; align-items: center; justify-content: center; width: var(--space-9px); height: var(--space-9px); opacity: var(--opacity-subtle); } .chip--primary { background-color: var(--soft-teal); color: var(--text-on-primary); border-color: var(--accent-teal); } .chip--primary:hover { background-color: var(--medium-teal); color: var(--text-on-primary); } .chip--outline { background: transparent; color: var(--dark-slate); border-color: var(--soft-slate); } .chip--outline:hover { background: var(--light-slate); color: var(--darker-slate); } .text-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-0-5px); padding-block: var(--space-0-5px); padding-inline: var(--space-1-5px); border-radius: var(--radius-pill); font-weight: var(--weight-medium); line-height: var(--line-height-tight); white-space: nowrap; } .chip-remove { display: inline-flex; align-items: center; justify-content: center; width: var(--size-16px); height: var(--size-16px); padding: var(--space-0); border: none; background-color: transparent; color: currentcolor; opacity: var(--opacity-soft); cursor: pointer; border-radius: var(--radius-standard); transition: opacity var(--animation-quick) var(--easing-smooth); } .chip-remove:hover { opacity: var(--opacity-visible); background-color: var(--light-slate); } @media (max-width: 767px) { /* Interactive chips: 44px touch target (WCAG 2.5.5) */ .chip--ut-date { min-height: var(--touch-target-min); } .stat-chip--ut-date { min-height: var(--touch-target-min); } /* Chip remove button: expand tap area while keeping the icon visually small */ .chip-remove { width: var(--touch-target-min); height: var(--touch-target-min); } } .badge-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-1px); align-items: center; } .chip-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-1px); align-items: center; } /* ALERTS */ .alert { max-width: var(--size-100pct); overflow: hidden; margin: var(--_alert-margin); padding: var(--_alert-padding); border-radius: var(--_alert-border-radius); font-size: var(--_alert-font-size); line-height: var(--_alert-line-height); } .alert--action { padding: var(--space-9px); display: flex; align-items: center; gap: var(--space-9px); } .alert--action__form-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--space-9px); width: var(--size-100pct); margin-top: var(--space-9px); padding-top: var(--space-0); border-top: none; } .alert--error { background: var(--pale-red); border: var(--input-border-width-thin) solid var(--light-red); color: var(--strong-red); } .alert--danger { background: var(--pale-red); border: var(--input-border-width-thin) solid var(--light-red); color: var(--strong-red); } .alert--warning { background: var(--pale-sunset); border: var(--input-border-width-thin) solid var(--light-sunset); color: var(--strong-sunset); } .alert--success { background: var(--pale-teal); border: var(--input-border-width-thin) solid var(--light-teal); color: var(--strong-teal); } .alert--success-emphasis { font-size: var(--font-size-12); font-weight: var(--weight-bold); } .alert--success-emphasis-combined { font-size: var(--font-size-12); font-weight: var(--weight-bold); } .alert--info { background: var(--pale-teal); border: var(--input-border-width-thin) solid var(--light-teal); color: var(--deep-teal); } /* Alert layout elements (BEM) */ .alert__row { display: flex; align-items: flex-start; gap: var(--space-1-5px); } .alert__icon { flex-shrink: 0; margin-top: var(--space-0-5px); } .alert__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5px); margin-top: var(--space-1-5px); } /* Login page error alert – card-like modifier of base .alert */ .alert--login { border-radius: var(--radius-standard); padding: var(--space-9px) var(--space-9px) var(--space-9px) var(--space-12px); box-shadow: var(--shadow-soft); max-width: var(--width-480px); margin: var(--space-12px) auto 0; border-left-width: var(--space-0-5px); border-left-style: solid; } .alert--login-warning { border-left-color: var(--strong-sunset); } .alert--login-error { border-left-color: var(--strong-red); } .alert__actions--login { justify-content: flex-start; } .alert--login__icon { flex-shrink: 0; margin-top: var(--size-1px); } .stat-card { padding: var(--space-12px); background: var(--white); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); } .checkbox { width: var(--size-20px); height: var(--size-20px); cursor: pointer; } /* ============================================================================ NOTIFICATION BADGE GLOW Pulse glow when new notifications arrive ============================================================================ */ .badge-glow-pulse { animation: badgeGlowPulse 2s ease-in-out 3; } @keyframes badgeGlowPulse { 0% { box-shadow: 0 0 0 0 var(--red-glass-heavy-40), 0 2px 4px var(--black-glass-light-20); transform: scale(1); } 100% { box-shadow: 0 0 0 0 var(--red-glass-heavy-40), 0 2px 4px var(--black-glass-light-20); transform: scale(1); } 50% { box-shadow: 0 0 0 4px transparent, 0 2px 8px var(--red-glass-heavy-40); transform: scale(1.05); } } /* ========================================================================== SEMANTIC ANIMATION UTILITIES Consume keyframes from values/50-motion-values.css ========================================================================== */ .animate-pulse { animation: pulse var(--animation-deliberate) var(--easing-smooth) infinite; } /* Slide-in animation for notifications and toasts */ .animate-slide-in-down { animation: slideInFromTop var(--animation-smooth) var(--easing-smooth) both; } /* Accordion animations for expandable content (tables, accordions) */ .animate-accordion-down { animation: accordionSlideDown var(--animation-smooth) var(--easing-smooth) both; } .animate-accordion-up { animation: accordionSlideUp var(--animation-smooth) var(--easing-smooth) both; } /* Gentle entrance pattern for premium */ .animate-luxe-entrance { animation: luxeEntrance var(--animation-deliberate) var(--easing-smooth) both; } /* ========================================================================== MOTION CONTROL ========================================================================== */ /* Opt-in motion reduction for specific contexts. Apply .motion-reduce--active to each element that should stop animating. */ .motion-reduce--active { animation: none; transition: none; } /* Smooth width transitions for dynamic layouts */ .transition-width { transition: width var(--animation-smooth) var(--easing-smooth), max-width var(--animation-smooth) var(--easing-smooth); } /* Smooth common color transitions (opt-in; avoids tailwind-style tokens) */ .transition-colors { transition: color var(--animation-smooth) var(--easing-smooth), background-color var(--animation-smooth) var(--easing-smooth), border-color var(--animation-smooth) var(--easing-smooth), box-shadow var(--animation-smooth) var(--easing-smooth); } /* ========================================================================== COMPONENT ANIMATIONS ========================================================================== */ /* Quick Filter Bar - Slide down animation */ .quick-filter-bar { animation: slideDown var(--animation-smooth) var(--easing-snappy); } /* Context Menu - Fade in animation */ .context-menu { animation: fadeIn var(--animation-quick) var(--easing-snappy), scaleIn var(--animation-quick) var(--easing-snappy); } /* Multi-select highlight pulse */ .row-selected-multi { animation: highlightPulse var(--animation-deliberate) var(--easing-snappy); } /* Tooltip fade-in animation */ .animate-tooltip-fade-in { animation: tooltipFadeIn var(--animation-quick) var(--easing-smooth) both; } /* === AVATAR UTILITIES === */ /* Avatar overlay primitives (corner actions + presence). */ .avatar__corner-action { position: absolute; overflow: visible; z-index: 2; display: inline-flex; align-items: center; justify-content: center; --avatar-corner-action-size: var(--control-icon-size); --avatar-corner-action-icon-size: calc(var(--avatar-corner-action-size) * 0.75); } .avatar__corner-action-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-icon-size); height: var(--control-icon-size); padding: 0; border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); border-radius: var(--radius-pill); background: var(--active-surface-gradient); box-shadow: var(--shadow-moderate); cursor: pointer; color: var(--text-on-dark); --icon-color: var(--text-on-dark); transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .avatar__corner-action-button:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: scale(1.15); } .avatar__corner-action-button:active { transform: scale(0.95); } .avatar__corner-action-button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .avatar__corner-action--bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); } .avatar__corner-action--bottom-right { bottom: 0; right: 0; transform: translate(50%, 50%); } /* === BUTTON UTILITIES === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1px); flex: 0 0 auto; min-width: max-content; padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-1px)); min-height: var(--input-height); border-radius: var(--radius-standard); font-weight: var(--weight-medium); letter-spacing: normal; font-size: var(--control-font-size, var(--font-size-12)); line-height: var(--control-line-height, var(--line-height-tight)); font-family: var(--font-family-primary); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; background: var(--active-surface-gradient); color: var(--text-on-dark); --icon-color: var(--text-on-dark); /* Icon defaults — overridden per variant */ --btn-icon-w: var(--control-icon-size); --btn-icon-h: var(--control-icon-size); --btn-icon-stroke: var(--icon-color); border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); box-shadow: var(--shadow-moderate); transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } [data-button-root='true'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1px); flex: 0 0 auto; min-width: max-content; padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-1px)); min-height: var(--input-height); border-radius: var(--radius-standard); font-weight: var(--weight-medium); letter-spacing: normal; font-size: var(--control-font-size, var(--font-size-12)); line-height: var(--control-line-height, var(--line-height-tight)); font-family: var(--font-family-primary); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; background: var(--active-surface-gradient); color: var(--text-on-dark); --icon-color: var(--text-on-dark); /* Icon defaults — overridden per variant */ --btn-icon-w: var(--control-icon-size); --btn-icon-h: var(--control-icon-size); --btn-icon-stroke: var(--icon-color); border: var(--input-border-width-thin) solid var(--teal-glass-soft-12); box-shadow: var(--shadow-moderate); transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .btn:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(var(--transform-lift)); } [data-button-root='true']:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(var(--transform-lift)); } .btn--primary-on-dark { min-width: var(--size-80px); background: var(--active-surface-gradient); border-color: var(--teal-glass-soft-12); color: var(--text-on-dark); --icon-color: var(--text-on-dark); font-weight: var(--weight-semibold); box-shadow: var(--shadow-moderate); } [data-button-variant='primary'] { min-width: var(--size-80px); background: var(--active-surface-gradient); border-color: var(--teal-glass-soft-12); color: var(--text-on-dark); --icon-color: var(--text-on-dark); font-weight: var(--weight-semibold); box-shadow: var(--shadow-moderate); } [data-button-variant='accent'] { min-width: var(--size-80px); background: var(--active-surface-gradient); border-color: var(--teal-glass-soft-12); color: var(--text-on-dark); --icon-color: var(--text-on-dark); font-weight: var(--weight-semibold); box-shadow: var(--shadow-moderate); } [data-button-variant='pill-applied-filter'] { min-width: var(--size-80px); background: var(--active-surface-gradient); border-color: var(--teal-glass-soft-12); color: var(--text-on-dark); --icon-color: var(--text-on-dark); font-weight: var(--weight-semibold); box-shadow: var(--shadow-moderate); } .btn--primary-on-dark:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } [data-button-variant='primary']:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } [data-button-variant='accent']:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } [data-button-variant='pill-applied-filter']:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } .btn:active { transform: translateY(var(--space-0)); } [data-button-root='true']:active { transform: translateY(var(--space-0)); } .btn:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); border-color: var(--white-glass-clear-18); box-shadow: var(--shadow-glow-subtle); } [data-button-root='true']:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); border-color: var(--white-glass-clear-18); box-shadow: var(--shadow-glow-subtle); } .btn:disabled { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } .btn[aria-disabled="true"] { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } [data-button-root='true']:disabled { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } [data-button-root='true'][aria-disabled="true"] { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } .btn:disabled:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } .btn[aria-disabled="true"]:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } .btn:disabled:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } .btn[aria-disabled="true"]:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } [data-button-root='true']:disabled:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } [data-button-root='true'][aria-disabled="true"]:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } [data-button-root='true']:disabled:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } [data-button-root='true'][aria-disabled="true"]:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; transform: none; } .btn--primary-on-dark:disabled { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } .btn--primary-on-dark[aria-disabled="true"] { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } [data-button-variant='primary']:disabled { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } [data-button-variant='primary'][aria-disabled='true'] { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } [data-button-variant='accent']:disabled { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } [data-button-variant='accent'][aria-disabled='true'] { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } [data-button-variant='pill-applied-filter']:disabled { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } [data-button-variant='pill-applied-filter'][aria-disabled='true'] { background: var(--white-glass-light-20); border-color: var(--soft-slate); color: var(--text-muted); --icon-color: var(--text-muted); opacity: 0.6; box-shadow: none; } .btn--primary-on-dark:disabled:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } .btn--primary-on-dark[aria-disabled="true"]:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } .btn--primary-on-dark:disabled:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } .btn--primary-on-dark[aria-disabled="true"]:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='primary']:disabled:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='primary'][aria-disabled='true']:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='primary']:disabled:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='primary'][aria-disabled='true']:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='accent']:disabled:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='accent'][aria-disabled='true']:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='accent']:disabled:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='accent'][aria-disabled='true']:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='pill-applied-filter']:disabled:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='pill-applied-filter'][aria-disabled='true']:hover { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='pill-applied-filter']:disabled:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } [data-button-variant='pill-applied-filter'][aria-disabled='true']:active { background: var(--white-glass-light-20); border-color: var(--soft-slate); box-shadow: none; } .btn--loading { cursor: progress; opacity: var(--opacity-soft); } [data-button-loading='true'] { cursor: progress; opacity: var(--opacity-soft); } .btn--secondary { min-width: var(--size-80px); background: linear-gradient( var(--angle-vertical), var(--light-teal) var(--stop-start), var(--soft-teal) var(--stop-end) ); border-color: var(--soft-teal); box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--white-glass-visible-15); color: var(--text-primary); --icon-color: var(--text-primary); } [data-button-variant='secondary'] { min-width: var(--size-80px); background: linear-gradient( var(--angle-vertical), var(--light-teal) var(--stop-start), var(--soft-teal) var(--stop-end) ); border-color: var(--soft-teal); box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--white-glass-visible-15); color: var(--text-primary); --icon-color: var(--text-primary); } [data-button-variant='auxiliary'] { min-width: var(--size-80px); background: linear-gradient( var(--angle-vertical), var(--light-teal) var(--stop-start), var(--soft-teal) var(--stop-end) ); border-color: var(--soft-teal); box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--white-glass-visible-15); color: var(--text-primary); --icon-color: var(--text-primary); } [data-button-variant='pill'] { min-width: var(--size-80px); background: linear-gradient( var(--angle-vertical), var(--light-teal) var(--stop-start), var(--soft-teal) var(--stop-end) ); border-color: var(--soft-teal); box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--white-glass-visible-15); color: var(--text-primary); --icon-color: var(--text-primary); } .btn--pill-ghost { min-width: var(--size-80px); background: transparent; border-color: transparent; color: var(--darker-slate); --icon-color: var(--darker-slate); box-shadow: none; } .btn--pill-ghost:hover { background: var(--hover-surface-gradient); color: var(--deep-slate); --icon-color: var(--deep-slate); box-shadow: var(--hover-surface-shadow); } .btn--secondary:hover { background: linear-gradient( var(--angle-vertical), var(--soft-teal) var(--stop-start), var(--medium-teal) var(--stop-end) ); box-shadow: var(--shadow-moderate), inset 0 1px 0 0 var(--white-glass-medium-30); } [data-button-variant='secondary']:hover { background: linear-gradient( var(--angle-vertical), var(--soft-teal) var(--stop-start), var(--medium-teal) var(--stop-end) ); box-shadow: var(--shadow-moderate), inset 0 1px 0 0 var(--white-glass-medium-30); } [data-button-variant='auxiliary']:hover { background: linear-gradient( var(--angle-vertical), var(--soft-teal) var(--stop-start), var(--medium-teal) var(--stop-end) ); box-shadow: var(--shadow-moderate), inset 0 1px 0 0 var(--white-glass-medium-30); } [data-button-variant='pill']:hover { background: linear-gradient( var(--angle-vertical), var(--soft-teal) var(--stop-start), var(--medium-teal) var(--stop-end) ); box-shadow: var(--shadow-moderate), inset 0 1px 0 0 var(--white-glass-medium-30); } .btn--neutral { background: linear-gradient( var(--angle-vertical), var(--light-slate) var(--stop-start), var(--soft-slate) var(--stop-end) ); border-color: var(--soft-slate); box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--white-glass-visible-15); color: var(--text-primary); --icon-color: var(--text-primary); } [data-button-variant='neutral'] { background: linear-gradient( var(--angle-vertical), var(--light-slate) var(--stop-start), var(--soft-slate) var(--stop-end) ); border-color: var(--soft-slate); box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--white-glass-visible-15); color: var(--text-primary); --icon-color: var(--text-primary); } .btn--neutral:hover { background: linear-gradient( var(--angle-vertical), var(--soft-slate) var(--stop-start), var(--medium-slate) var(--stop-end) ); box-shadow: var(--shadow-moderate), inset 0 1px 0 0 var(--white-glass-medium-30); } [data-button-variant='neutral']:hover { background: linear-gradient( var(--angle-vertical), var(--soft-slate) var(--stop-start), var(--medium-slate) var(--stop-end) ); box-shadow: var(--shadow-moderate), inset 0 1px 0 0 var(--white-glass-medium-30); } .btn--icon { padding: var(--space-0); gap: var(--space-0); width: var(--control-size); height: var(--control-size); min-width: var(--control-size); flex-shrink: var(--flex-shrink-none); border-radius: var(--radius-standard); aspect-ratio: var(--aspect-square-quality); /* Override base transition: animate `background` shorthand (supports gradients) */ transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } [data-button-variant='icon-ghost'] { padding: var(--space-0); gap: var(--space-0); width: var(--control-size); height: var(--control-size); min-width: var(--control-size); flex-shrink: var(--flex-shrink-none); border-radius: var(--radius-standard); aspect-ratio: var(--aspect-square-quality); /* Override base transition: animate `background` shorthand (supports gradients) */ transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } [data-button-variant='icon-ghost-invisible'] { padding: var(--space-0); gap: var(--space-0); width: var(--control-size); height: var(--control-size); min-width: var(--control-size); flex-shrink: var(--flex-shrink-none); border-radius: var(--radius-standard); aspect-ratio: var(--aspect-square-quality); /* Override base transition: animate `background` shorthand (supports gradients) */ transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } /* Consolidated icon BEM element — proper BEM naming. .btn sets --icon-color, --btn-icon-w, --btn-icon-h, --btn-icon-stroke. Variants override those vars on themselves. .btn__icon reads them via CSS custom property inheritance (they cascade from parent .btn). Only leaf icon children receive .btn__icon class (see Button.tsx). */ .btn__icon { color: var(--icon-color); stroke: var(--btn-icon-stroke); fill: none; stroke-width: 1.5; width: var(--btn-icon-w); height: var(--btn-icon-h); flex-shrink: 0; vector-effect: non-scaling-stroke; } .btn--has-badge { overflow: visible; } .btn__badge { position: absolute; top: calc(-1 * var(--space-4px)); right: calc(-1 * var(--space-4px)); min-width: 1.65em; min-height: 1.4em; padding: 0 var(--space-1px); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--teal-dark-glass-clear-18); background: var(--deep-teal); color: var(--white); font-size: var(--font-size-12); font-weight: var(--weight-semibold); letter-spacing: normal; text-align: center; pointer-events: none; box-shadow: 0 0 0 var(--size-1px) var(--black-glass-subtle-06); } .btn--cell-hover-action-icon { min-width: var(--size-20px); min-height: var(--size-20px); padding: 0; } .btn--icon-ghost-dense { width: var(--size-24px); height: var(--size-24px); min-width: var(--size-24px); min-height: var(--size-24px); color: currentColor; padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; --icon-color: currentColor; transition: background var(--animation-quick) var(--easing-smooth); } .btn--icon-ghost-dense-cell-location-action { width: var(--size-24px); height: var(--size-24px); min-width: var(--size-24px); min-height: var(--size-24px); color: currentColor; padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; --icon-color: currentColor; transition: background var(--animation-quick) var(--easing-smooth); } .btn--icon-ghost-dense-danger { width: var(--size-24px); height: var(--size-24px); min-width: var(--size-24px); min-height: var(--size-24px); color: currentColor; padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; --icon-color: currentColor; transition: background var(--animation-quick) var(--easing-smooth); } .btn--icon-ghost-dense-danger { --icon-color: var(--strong-red); } .btn--icon-ghost-dense:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-dense-cell-location-action:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-dense-danger:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-dense:active { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-dense-cell-location-action:active { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-dense-danger:active { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-touch:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-touch:active { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-light:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } .btn--icon-ghost-light:active { border-color: transparent; box-shadow: none; transform: none; background: var(--white-glass-faint-10); } /* Ultra-dense icon button for dense list rows (no extra ). */ .btn--icon-ghost-micro { width: var(--size-16px); height: var(--size-16px); min-width: var(--size-16px); min-height: var(--size-16px); padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; color: currentColor; --icon-color: currentColor; --btn-icon-w: var(--size-12px); --btn-icon-h: var(--size-12px); transition: background var(--animation-quick) var(--easing-smooth); } /* Canonical micro icon button: scaled round version of btn--icon. */ .btn--icon-micro { --btn-icon-micro-size: var(--size-20px); --btn-icon-micro-icon-size: var(--size-12px); --btn-icon-micro-border-width: var(--input-border-width-thin); --btn-icon-micro-border-color: var(--teal-glass-soft-12); --btn-icon-micro-border-color-hover: var(--teal-glass-medium-30); --btn-icon-micro-fg: var(--text-on-dark); --btn-icon-micro-bg: var(--active-surface-gradient); --btn-icon-micro-bg-hover: var(--hover-surface-gradient); display: inline-flex; align-items: center; justify-content: center; flex-shrink: var(--flex-shrink-none); aspect-ratio: var(--aspect-square-quality); width: var(--size-20px); height: var(--size-20px); min-width: var(--btn-icon-micro-size); min-height: var(--btn-icon-micro-size); padding: 0; gap: 0; border: var(--btn-icon-micro-border-width) solid var(--btn-icon-micro-border-color); border-radius: var(--radius-pill); background: var(--btn-icon-micro-bg); box-shadow: var(--shadow-moderate); overflow: visible; cursor: pointer; color: var(--btn-icon-micro-fg); --icon-color: var(--btn-icon-micro-fg); --btn-icon-w: var(--btn-icon-micro-icon-size); --btn-icon-h: var(--btn-icon-micro-icon-size); transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .btn--icon-micro:hover { background: var(--btn-icon-micro-bg-hover); border-color: var(--btn-icon-micro-border-color-hover); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); transform: translateY(var(--transform-lift)); } .btn--icon-micro:active { transform: translateY(var(--space-0)); } /* Dark-surface micro icon treatment (used where controls sit over dark ). */ .btn--icon-micro-on-dark { --btn-icon-micro-border-color: var(--white-glass-thick-60); --btn-icon-micro-border-color-hover: var(--white-glass-strong-40); --btn-icon-micro-fg: var(--text-on-primary); --btn-icon-micro-bg: var(--active-surface-gradient); --btn-icon-micro-bg-hover: var(--hover-surface-gradient); } /* Large touch target (36px), small visual icon (14px) — use for icon buttons */ .btn--icon-ghost-touch { width: var(--size-36px); height: var(--size-36px); min-width: var(--size-36px); min-height: var(--size-36px); padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; color: currentColor; --icon-color: currentColor; --btn-icon-w: var(--size-14px); --btn-icon-h: var(--size-14px); transition: background var(--animation-quick) var(--easing-smooth); } /* === STYLE VARIANTS === */ .btn--danger { background: var(--strong-red); border-color: var(--dark-red); } [data-button-variant='danger'] { background: var(--strong-red); border-color: var(--dark-red); } .btn--danger:hover { background: var(--dark-red); border-color: var(--strong-red); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } [data-button-variant='danger']:hover { background: var(--dark-red); border-color: var(--strong-red); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } .btn--full { flex: 1 1 100%; min-width: 0; width: 100%; min-height: calc(var(--input-height) * 1.25); border-radius: var(--radius-standard); white-space: normal; } /* Ghost buttons: no background, no shadow, no border, subtle hover with underline */ .btn--ghost { background: transparent; border: none; color: var(--text-color-primary); box-shadow: none; position: relative; --icon-color: var(--text-color-primary); } [data-button-variant='ghost'] { background: transparent; border: none; color: var(--text-color-primary); box-shadow: none; position: relative; --icon-color: var(--text-color-primary); } .btn--icon-ghost { background: transparent; border: none; color: var(--text-color-primary); box-shadow: none; position: relative; overflow: visible; --icon-color: var(--text-on-light); } [data-button-variant='icon-ghost'] { background: transparent; border: none; color: var(--text-color-primary); box-shadow: none; position: relative; overflow: visible; --icon-color: var(--text-on-light); } .btn--icon-ghost-invisible { /* True ghost: no even on ; intended for overlays like chat actions. */ width: var(--control-size); height: var(--control-size); min-width: var(--control-size); min-height: var(--control-size); padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; color: currentColor; --icon-color: currentColor; } [data-button-variant='icon-ghost-invisible'] { /* True ghost: no even on ; intended for overlays like chat actions. */ width: var(--control-size); height: var(--control-size); min-width: var(--control-size); min-height: var(--control-size); padding: 0; gap: 0; border: none; background: transparent; box-shadow: none; overflow: visible; cursor: pointer; color: currentColor; --icon-color: currentColor; } .btn--ghost-block { display: flex; width: var(--size-100pct); justify-content: flex-start; align-items: center; gap: var(--space-1-5px); text-align: left; } /* Keep trailing pinned right while the middle content remains aligned */ .btn__icon--trailing { margin-left: auto; } /* BA home "metric" buttons (wrap-friendly, consistent sizing). */ .ba-welcome-tile__metric { flex: 1 1 14rem; min-width: var(--size-12rem); } @media (max-width: 767px) { .ba-welcome-tile__metric { flex: 1 1 100%; min-width: 0; } } .btn--ghost::after { content: ''; position: absolute; inset: var(--inset-0); border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 var(--input-border-width-thin) var(--teal-glass-soft-12); transition: opacity var(--animation-quick) var(--easing-smooth); } .btn--ghost:hover { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } .btn--ghost:active { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } .btn--icon-ghost:hover { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } .btn--icon-ghost:active { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } [data-button-variant='ghost']:hover { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } [data-button-variant='ghost']:active { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } [data-button-variant='icon-ghost']:hover { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } [data-button-variant='icon-ghost']:active { background: var(--white-glass-faint-10); border: none; box-shadow: none; transform: none; color: var(--text-primary); } .btn--ghost:hover::after { opacity: 1; } .btn--ghost:focus-visible::after { opacity: 1; } .btn--icon-ghost-micro:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; } .btn--icon-ghost-micro:active { background: transparent; border-color: transparent; box-shadow: none; transform: none; } .btn--icon-ghost-invisible:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; } .btn--icon-ghost-invisible:active { background: transparent; border-color: transparent; box-shadow: none; transform: none; } [data-button-variant='icon-ghost-invisible']:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; } [data-button-variant='icon-ghost-invisible']:active { background: transparent; border-color: transparent; box-shadow: none; transform: none; } .btn--ghost-active { background: var(--teal-glass-light-20); } .btn--icon-ghost-active { background: var(--teal-glass-light-20); } .btn--icon-ghost[aria-pressed='true'] { background: var(--teal-glass-light-20); } [data-button-active='true'][data-button-variant='ghost'] { background: var(--teal-glass-light-20); } [data-button-active='true'][data-button-variant='icon-ghost'] { background: var(--teal-glass-light-20); } [data-button-active='true'][data-button-variant='icon-ghost-invisible'] { background: var(--teal-glass-light-20); } .btn__icon--active-fill { fill: currentColor; } /* .btn__icon consolidates for all variants via --icon-color */ .btn--ghost:disabled { opacity: 0.4; color: var(--text-color-muted); cursor: not-allowed; } .btn--icon-ghost:disabled { opacity: 0.4; color: var(--text-color-muted); cursor: not-allowed; } .btn--icon-ghost-invisible:disabled { opacity: 0.4; color: var(--text-color-muted); cursor: not-allowed; } [data-button-variant='ghost']:disabled { opacity: 0.4; color: var(--text-color-muted); cursor: not-allowed; } [data-button-variant='icon-ghost']:disabled { opacity: 0.4; color: var(--text-color-muted); cursor: not-allowed; } [data-button-variant='icon-ghost-invisible']:disabled { opacity: 0.4; color: var(--text-color-muted); cursor: not-allowed; } [data-button-tone='danger'] { color: var(--strong-red); } [data-button-tone='error'] { color: var(--strong-red); } .btn--icon-ghost-light { width: var(--size-24px); height: var(--size-24px); min-width: var(--size-24px); min-height: var(--size-24px); border: none; color: var(--text-on-primary); background: transparent; box-shadow: none; padding: 0; gap: 0; overflow: visible; cursor: pointer; transition: background var(--animation-quick) var(--easing-smooth); } /* Modifier to make icon button inherit parent color */ .btn--icon-inherit { color: currentColor; stroke: inherit; --icon-color: currentColor; --btn-icon-stroke: inherit; } /* Icon ghost light variant that fills container height */ .btn--icon-ghost-light-full { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-9px); border: none; background: transparent; height: var(--app-header-height); color: var(--text-on-primary); width: var(--app-header-height); box-sizing: border-box; position: relative; border-radius: var(--radius-standard); grid-column: 2; justify-self: center; box-shadow: inset 0 0 0 1px var(--white-glass-soft-12), 0 0 0 1px var(--black-glass-subtle-02); overflow: hidden; } .btn--icon-ghost-light-full__img { width: var(--size-100pct); height: var(--size-100pct); object-fit: contain; display: block; /* Multi-layer shadow for depth - makes PP letters pop off screen */ filter: drop-shadow(0 1px 1px var(--black-glass-strong-30)) drop-shadow(0 3px 6px var(--black-glass-medium-25)) drop-shadow(0 6px 12px var(--black-glass-light-20)) drop-shadow(0 0 2px var(--white-glass-faint-10)); } .btn--icon-ghost-light-full__svg { width: var(--size-100pct); height: var(--size-100pct); object-fit: contain; display: block; /* Multi-layer shadow for depth - makes PP letters pop off screen */ filter: drop-shadow(0 1px 1px var(--black-glass-strong-30)) drop-shadow(0 3px 6px var(--black-glass-medium-25)) drop-shadow(0 6px 12px var(--black-glass-light-20)) drop-shadow(0 0 2px var(--white-glass-faint-10)); } /* Subtle gradient bevel overlay */ .btn--icon-ghost-light-full::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, var(--white-glass-soft-12) 0%, transparent 45%, transparent 55%, var(--black-glass-soft-12) 100% ); mix-blend-mode: screen; pointer-events: none; } /* Subtle bevel + animated sheen overlay */ .btn--icon-ghost-light-full::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-standard); pointer-events: none; z-index: 2; /* Clip overlay to PP letter shapes so background stays untouched */ mask-image: url('/images/logos/pp-icon.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; /* Light inner highlight only (remove dark inset) */ box-shadow: inset 0 1px 0 var(--white-glass-soft-12); /* Sheen stripe (lighten only) */ mix-blend-mode: screen; background: linear-gradient(100deg, transparent var(--stop-mid-alt), var(--white-glass-medium-25) var(--stop-center), transparent var(--stop-fade-near) ); background-size: var(--size-200pct) var(--size-100pct); background-position: calc(-1 * var(--size-200pct)) var(--inset-0); opacity: 0; /* Hide at rest to avoid edge artifacts */ will-change: background-position, opacity; } .btn--icon-ghost-light-full:hover::after { opacity: 1; animation: var(--animation-logo-sheen); } .btn--icon-ghost-light-full:focus-visible::after { opacity: 1; animation: var(--animation-logo-sheen); } .ut-cta-shimmer:hover::after { opacity: 1; animation: var(--animation-logo-sheen); } .ut-cta-shimmer:focus-visible::after { opacity: 1; animation: var(--animation-logo-sheen); } /* Smaller PP icon when sidebar is collapsed */ .btn--icon-ghost-light-full--collapsed { height: var(--size-48px); width: var(--size-48px); padding: var(--space-1-5px); } /* ═══════════════════════════════════════════════════════════════════════════ LINK BUTTON - Teal text link with hover underline, no background/outline ══════════════════════════════════════════════════════════════════════════ */ .btn--link { background: transparent; color: var(--brand-primary); border: none; box-shadow: none; padding: var(--space-0); min-width: 0; min-height: 0; border-radius: 0; font-weight: var(--weight-medium); position: relative; overflow: visible; backdrop-filter: none; text-decoration: underline; text-decoration-thickness: var(--size-1px); text-underline-offset: var(--size-3px); text-decoration-color: transparent; transition: color var(--animation-quick) var(--easing-smooth), text-decoration-color var(--animation-quick) var(--easing-smooth); } .btn--link-login { background: transparent; color: var(--brand-primary); border: none; box-shadow: none; padding: var(--space-0); min-width: 0; min-height: 0; border-radius: 0; font-weight: var(--weight-medium); position: relative; overflow: visible; backdrop-filter: none; text-decoration: underline; text-decoration-thickness: var(--size-1px); text-underline-offset: var(--size-3px); text-decoration-color: transparent; transition: color var(--animation-quick) var(--easing-smooth), text-decoration-color var(--animation-quick) var(--easing-smooth); } [data-button-variant='link'] { background: transparent; color: var(--brand-primary); border: none; box-shadow: none; padding: var(--space-0); min-width: 0; min-height: 0; border-radius: 0; font-weight: var(--weight-medium); position: relative; overflow: visible; backdrop-filter: none; text-decoration: underline; text-decoration-thickness: var(--size-1px); text-underline-offset: var(--size-3px); text-decoration-color: transparent; transition: color var(--animation-quick) var(--easing-smooth), text-decoration-color var(--animation-quick) var(--easing-smooth); } .btn--link::after { content: none; } .btn--link-login::after { content: none; } [data-button-variant='link']::after { content: none; } .btn--link::before { content: none; } .btn--link-login::before { content: none; } [data-button-variant='link']::before { content: none; } .btn--link:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; text-decoration-color: currentColor; } .btn--link-login:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; text-decoration-color: currentColor; } [data-button-variant='link']:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; text-decoration-color: currentColor; } .btn--link:hover::after { transform: none; } .btn--link-login:hover::after { transform: none; } [data-button-variant='link']:hover::after { transform: none; } .btn--link:active { transform: none; } .btn--link-login:active { transform: none; } [data-button-variant='link']:active { transform: none; } .btn--link:focus-visible { outline: none; box-shadow: none; border-color: transparent; text-decoration-color: currentColor; } .btn--link-login:focus-visible { outline: none; box-shadow: none; border-color: transparent; text-decoration-color: currentColor; } [data-button-variant='link']:focus-visible { outline: none; box-shadow: none; border-color: transparent; text-decoration-color: currentColor; } .btn--link-login { color: var(--text-primary); } /* === OVERLAY EFFECT === */ .btn::before { position: absolute; inset: var(--inset-0); border-radius: inherit; opacity: var(--opacity-hidden); pointer-events: none; top: var(--position-center-block); left: var(--position-center-inline); width: var(--space-0); height: var(--space-0); background: var(--surface-hover-subtle); transform: translate(var(--offset-center-inline), var(--offset-center-block)); transition: opacity var(--animation-quick) var(--easing-smooth), width var(--animation-deliberate) var(--easing-smooth), height var(--animation-deliberate) var(--easing-smooth); z-index: var(--z-base); } .btn:active::before { width: var(--size-100pct-percent); height: var(--size-100pct-percent); } .btn:hover::before { opacity: var(--opacity-visible); } /* Button group - for grouping related buttons */ .btn-group { display: flex; align-items: center; gap: var(--space-1-5px); } .btn-group[role="group"] { isolation: isolate; } /* ============================================================================ CTA SHIMMER EFFECT Adds a subtle shimmer animation to primary CTAs on hover ============================================================================ */ .ut-cta-shimmer { position: relative; overflow: hidden; } .ut-cta-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent var(--stop-mid-alt), var(--white-glass-medium-25) var(--stop-center), transparent var(--stop-fade-near) ); background-size: var(--size-200pct) var(--size-100pct); background-position: calc(-1 * var(--size-200pct)) var(--inset-0); opacity: 0; pointer-events: none; will-change: background-position, opacity; transition: opacity var(--animation-quick) var(--easing-smooth); } @media (prefers-reduced-motion: reduce) { .ut-cta-shimmer::after { animation: none; } } /* ============================================================================ MOBILE RESPONSIVE BUTTON STYLES Touch-friendly targets and optimized spacing across all breakpoints ============================================================================ */ /* Mobile (≤768px): Touch-optimized buttons */ @media (max-width: 767px) { /* Icon buttons: Ensure 44px minimum touch target */ .btn--icon { width: var(--size-44px); height: var(--size-44px); min-width: var(--size-44px); min-height: var(--size-44px); } .btn--icon-ghost-dense { width: var(--size-44px); height: var(--size-44px); min-width: var(--size-44px); min-height: var(--size-44px); } .btn--icon-ghost-dense-cell-location-action { width: var(--size-44px); height: var(--size-44px); min-width: var(--size-44px); min-height: var(--size-44px); } .btn--icon-ghost-dense-danger { width: var(--size-44px); height: var(--size-44px); min-width: var(--size-44px); min-height: var(--size-44px); } /* Icon ghost variants: Touch-friendly + larger visual icon */ .btn--icon-ghost { min-width: var(--size-44px); min-height: var(--size-44px); padding: var(--space-1-5px); --btn-icon-w: var(--size-24px); --btn-icon-h: var(--size-24px); } .btn--icon-ghost-light { min-width: var(--size-44px); min-height: var(--size-44px); padding: var(--space-1-5px); --btn-icon-w: var(--size-24px); --btn-icon-h: var(--size-24px); } /* Dense icon buttons: Still need to be tappable */ /* Button groups: Stack on mobile for better usability */ .btn-group { flex-wrap: wrap; gap: var(--space-1px); } /* Reduce transform lift on mobile to prevent layout shift */ .btn:hover { transform: none; } .btn--icon:hover { transform: none; } } @media (prefers-contrast: more) { .btn { border-width: var(--size-2px); border-color: var(--dark-slate); } } /* Tablet (769px - 1024px): Intermediate sizing */ @media (min-width: calc(var(--breakpoint-mobile-max) + 1px)) and (max-width: var(--breakpoint-tablet-max)) { .btn--icon { width: var(--size-40px); height: var(--size-40px); min-width: var(--size-40px); min-height: var(--size-40px); } .btn--icon-ghost { min-width: var(--size-40px); min-height: var(--size-40px); } .btn--icon-ghost-light { min-width: var(--size-40px); min-height: var(--size-40px); } } /* Wrapper for avatar + presence dot overlay inside a Button. Position relative so the absolute-positioned presence dot anchors to this, not the avatar (Avatar has overflow:hidden which would clip the dot). */ .btn__avatar-presence { position: relative; display: inline-flex; } /* ── Action-select: Material Design "filled tonal" style ────────────────────── Shows the current value of a mutable field (e.g. conversation status). Not a filter, not a nav pill — signals "this is what it is, click to change." Pair with trailingIcon={ChevronDown} and data-tone for semantic coloring. ─────────────────────────────────────────────────────────────────────────── */ .btn--action-select { border-radius: var(--radius-pill); padding-block: var(--space-0-5px); padding-inline: var(--space-9px); min-height: 0; font-size: var(--font-size-12); font-weight: var(--weight-medium); background: var(--light-slate); border-color: var(--soft-slate); color: var(--darker-slate); --icon-color: var(--darker-slate); box-shadow: none; } .btn--action-select:hover { background: var(--soft-slate); border-color: var(--soft-slate); box-shadow: var(--shadow-soft); transform: translateY(var(--lift-subtle)); } .btn--action-select--success { background: var(--light-teal); border-color: var(--medium-teal); color: var(--strong-teal); --icon-color: var(--strong-teal); } .btn--action-select--success:hover { background: var(--soft-teal); } .btn--action-select--warning { background: var(--light-sunset); border-color: var(--soft-sunset); color: var(--strong-sunset); --icon-color: var(--strong-sunset); } .btn--action-select--warning:hover { background: var(--soft-sunset); } .btn--action-select--danger { background: var(--light-red); border-color: var(--strong-red); color: var(--strong-red); --icon-color: var(--strong-red); } .btn--action-select--danger:hover { background: var(--pale-red); } .btn--action-select:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } .btn--action-select[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } /* ============================================================ * Card — specific implementation of .panel for card surfaces * * Cards extend the .panel base pattern with card-specific behaviors. * The shared Card wrapper applies .card and owns card-specific . * * Most styling lives in .panel (see stack-utilities.css). * Card-specific overrides and legacy compat live here. * ============================================================ */ .card { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; width: var(--size-100pct); min-width: 0; max-width: var(--size-100pct); max-inline-size: var(--size-100pct); box-sizing: border-box; container-type: inline-size; padding: 0; margin-inline: 0; color: var(--text-primary); background: transparent; border: none; border-radius: 0; box-shadow: none; height: var(--size-100pct); min-height: 0; word-break: break-word; overflow-wrap: anywhere; transition: box-shadow var(--animation-smooth) var(--easing-smooth); } @media (max-width: 767px) { .card { padding: 0; } } /* Media inside cards cannot exceed bounds — handled by .panel base class */ .card:hover { /* Hover effects handled by .panel */ } @media (prefers-contrast: more) { .card { border-width: var(--size-2px); border-color: var(--dark-slate); } } .card--glass-teal { flex: 0 0 auto; width: var(--width-400px); min-height: 0; height: auto; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } @media (max-width: 767px) { .card--glass-teal { width: calc(var(--size-100pct) - var(--space-18px) * 2); max-width: calc(var(--size-100pct) - var(--space-18px) * 2); } } /* Modifiers - use sparingly, base .card should work for 90% of cases */ /* ========== DEPRECATED: Non-BEM card classes ========== */ .card-body { padding: var(--space-0); } /* Drag handle positioning for draggable cards */ .drag-handle-container { position: absolute; top: 0; right: 0; z-index: 10; } /* Dashboard tiles: hidden by default, shown via --visible modifier toggled by JS on hover. */ .drag-handle-container--dashboard { opacity: 0; transition: opacity 0.15s ease; transform: translate(50%, -50%); } .drag-handle-container--visible { opacity: 1; } /* ========== Card Variant Modifiers ========== */ /** Glass-subtle variant - subtle glassmorphic effect */ .card--glass-subtle { background: var(--white-glass-subtle-04); backdrop-filter: var(--backdrop-glass-light); border-color: var(--white-glass-visible-15); } /** On-white variant - elevated card on backgrounds */ .card--on-white { background: var(--card-surface); box-shadow: var(--shadow-depth-soft) var(--black-glass-faint-10), var(--shadow-depth-panel-strong) var(--black-glass-clear-18); border-color: var(--input-border); } /** Borderless variant - removes border */ .card--input-borderless { border: none; box-shadow: none; } /* Map loading container - matches map dimensions during load */ .map-loading-container { width: var(--size-100pct); height: var(--size-100pct); min-height: var(calc(var(--size-48px) * 2)); max-height: var(--size-max-height-screen-30); } /* NOTE: No "dense header" variants. */ /* ============================================================================= CHART UTILITIES BEM-style classes for chart components ============================================================================= */ /* ========== Chart Container ========== */ .chart { display: flex; flex-direction: column; width: var(--size-100pct); } /* ========== Chart Bar ========== */ .chart__bar { height: var(--size-32px); position: relative; overflow: hidden; background-color: var(--white-glass-faint-10); border-radius: var(--radius-standard); } .chart__bar--sm { height: var(--size-24px); } .chart__bar--lg { height: var(--size-40px); } .chart__bar-fill { height: var(--size-100pct); min-width: var(--size-8px); width: var(--size-100pct); background-color: var(--vibrant-teal); transition-property: width, height, background-color; transition-duration: var(--duration-normal); transition-timing-function: var(--easing-smooth); } /* ========== Chart Legend ========== */ .chart__legend { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-9px); } .chart__legend-item { display: flex; flex-direction: row; align-items: center; gap: var(--space-1px); } .chart__legend-dot { width: var(--size-12px); height: var(--size-12px); border-radius: var(--radius-pill); flex-shrink: 0; } /* ========== Sparkline ========== */ .chart__sparkline { width: var(--size-80px); /* 80px */ height: var(--size-24px); /* 24px */ flex-shrink: 0; } /* ========== Chart Segment (for interactive elements) ========== */ .chart__segment { transition-property: opacity, transform; transition-duration: var(--duration-fast); transition-timing-function: var(--easing-smooth); } .chart__segment:focus-visible { outline: var(--input-border-width-md) solid var(--vibrant-teal); outline-offset: var(--space-0-5px); } .chart__bar-vertical:focus-visible { outline: var(--input-border-width-md) solid var(--vibrant-teal); outline-offset: var(--space-0-5px); } .chart__interactive:focus-visible { outline: var(--input-border-width-md) solid var(--vibrant-teal); outline-offset: var(--space-0-5px); } .chart__segment:hover { opacity: var(--opacity-subtle); } .chart__segment:active { opacity: var(--opacity-soft); } /* ========== Chart Containers & Layout ========== */ .chart__container { display: flex; align-items: flex-end; height: var(--size-100pct); min-height: var(--height-240px); /* 240px */ } .chart__column { display: flex; flex-direction: column; gap: var(--space-1px); flex: 1 1 0%; align-items: center; height: var(--size-100pct); } .chart__column-inner { display: flex; flex: 1 1 0%; flex-direction: column; justify-content: flex-end; width: var(--size-100pct); min-height: var(--height-100px); } .chart__bar-vertical { margin-left: auto; margin-right: auto; width: var(--size-100pct); max-width: var(--size-80px); transition-property: height, background-color; transition-duration: var(--duration-normal); transition-timing-function: var(--easing-smooth); } /* Make elements keyboard focusable */ .chart__interactive { cursor: pointer; outline: none; } .chart__interactive:hover { opacity: var(--opacity-vivid); } .chart__interactive:active { opacity: var(--opacity-subtle); } /* SVG elements need special handling */ .chart__svg-element { cursor: pointer; transition: opacity var(--duration-fast) var(--easing-smooth); } .chart__svg-element:hover { opacity: var(--opacity-vivid); } .chart__svg-element:focus-visible { outline: var(--input-border-width-md) solid var(--vibrant-teal); outline-offset: var(--space-1px); } .donut-chart__center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } /* ========== Accessibility ========== */ @media (prefers-reduced-motion: reduce) { .chart__bar-fill { transition-duration: var(--animation-instant); } .chart__segment { transition-duration: var(--animation-instant); } .chart__bar-vertical { transition-duration: var(--animation-instant); } .chart__svg-element { transition-duration: var(--animation-instant); } } .code-block { font-family: var(--font-family-mono); font-size: var(--font-size-12); padding: var(--space-9px); border-radius: var(--radius-standard); background: var(--light-slate); color: var(--dark-slate); overflow-x: auto; } /* Code preview blocks with scrollable content */ .code-preview { max-height: var(--height-code-preview); overflow: auto; } .code-preview--tall { max-height: var(--height-code-preview-tall); overflow: auto; } .code-preview--full { max-height: none; overflow: visible; } /* ============================================================================ COLOR UTILITIES Text and icon color utilities for semantic states ========================================================================= */ /* === SEMANTIC TEXT COLORS === */ .text-negative { color: var(--strong-red); } .text-positive { color: var(--strong-teal); } .text-caution { color: var(--strong-amber); } .text-info { color: var(--vibrant-teal); } /* === TEXT BEM VARIANTS (for Text primitive tone prop) === */ .text--error { color: var(--strong-red); } .text--success { color: var(--strong-teal); } .text--warning { color: var(--strong-amber); } .text--info { color: var(--vibrant-teal); } .text--muted { color: var(--text-muted); } .text--on-dark { color: var(--text-color-on-dark); } .text--on-dark-muted { color: var(--text-color-on-dark-muted); } /* === TEXT ALIGNMENT === */ .text-centered { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* ============================================================================ CURSOR UTILITIES Cursor and pointer interaction utilities ========================================================================= */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .cursor-wait { cursor: wait; } .cursor-move { cursor: move; } /* ============================================================================= DENSITY SYSTEM Controls spacing & typography density via CSS custom properties ============================================================================= */ /* Default density: standard */ :root { --font-size-density-step: 0px; --table-padding: var(--size-4px) var(--size-6px); --table-line-height: var(--line-height-150pct); --table-font-size: var(--size-12px); --control-font-size: var(--font-size-12); --control-line-height: var(--line-height-relaxed); --control-padding-block: var(--space-1px); --control-padding-inline: var(--space-9px); --badge-height: var(--size-20px); --badge-padding-inline: var(--space-9px); --badge-font-size: var(--font-size-12); --app-header-logo-size: var(--size-56px); --avatar-size-header: var(--size-28px); --range-input-height: var(--size-32px); --range-track-height: var(--size-10px); --range-thumb-size: var(--size-28px); --receipt-thumb-width: var(--size-40px); --receipt-thumb-height: var(--size-64px); --vertical-align: middle; --section-tabs-line-height: var(--line-height-175pct); --kpi-tile-padding-block: var(--size-6px); --kpi-tile-padding-inline: var(--size-9px); --kpi-tile-content-gap: var(--size-6px); --kpi-grid-gap: var(--size-9px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-2px); --kpi-tile-icon-size: var(--size-28px); --kpi-tile-value-font-size: var(--size-20px); --kpi-tile-label-font-size: var(--font-size-10); } /* Compact */ .density--compact { --font-size-density-step: 0px; --table-padding: var(--size-3px) var(--size-8px); --table-line-height: var(--line-height-150pct); --table-font-size: var(--size-12px); --input-height: var(--size-20px); --button-height: var(--size-20px); --control-icon-size: var(--size-18px); --toolbar-group-gap: var(--space-4px); --control-font-size: var(--font-size-12); --control-line-height: var(--line-height-relaxed); --control-padding-block: var(--space-0-5px); --control-padding-inline: var(--space-6px); --badge-height: var(--size-18px); --badge-padding-inline: var(--space-6px); --badge-font-size: var(--font-size-12); --app-header-logo-size: var(--size-48px); --avatar-size-header: var(--size-24px); --range-input-height: var(--size-28px); --range-track-height: var(--size-8px); --range-thumb-size: var(--size-24px); --receipt-thumb-width: var(--size-40px); --receipt-thumb-height: var(--size-64px); --vertical-align: middle; --section-tabs-line-height: var(--line-height-150pct); --kpi-tile-padding-block: var(--size-4px); --kpi-tile-padding-inline: var(--size-6px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-6px); --kpi-grid-group-gap: var(--size-2px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-10); } /* Dense */ .density--dense { --font-size-density-step: 0px; --table-padding: var(--size-3px) var(--size-8px); --table-line-height: var(--line-height-150pct); --table-font-size: var(--size-12px); --input-height: var(--size-20px); --button-height: var(--size-20px); --control-icon-size: var(--size-20px); --toolbar-group-gap: var(--space-4px); --control-font-size: var(--font-size-12); --control-line-height: var(--line-height-relaxed); --control-padding-block: var(--space-0-5px); --control-padding-inline: var(--space-6px); --badge-height: var(--size-18px); --badge-padding-inline: var(--space-6px); --badge-font-size: var(--font-size-12); --app-header-logo-size: var(--size-48px); --avatar-size-header: var(--size-24px); --range-input-height: var(--size-28px); --range-track-height: var(--size-8px); --range-thumb-size: var(--size-24px); --receipt-thumb-width: var(--size-40px); --receipt-thumb-height: var(--size-64px); --vertical-align: middle; --section-tabs-line-height: var(--line-height-150pct); --kpi-tile-padding-block: var(--size-4px); --kpi-tile-padding-inline: var(--size-6px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-6px); --kpi-grid-group-gap: var(--size-2px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-10); } /* Standard */ .density--standard { --font-size-density-step: 0.5px; --table-padding: var(--size-4px) var(--size-6px); --table-line-height: var(--line-height-150pct); --table-font-size: var(--size-13px); --input-height: var(--size-24px); --button-height: var(--size-24px); --control-icon-size: var(--size-22px); --toolbar-group-gap: var(--space-6px); --control-font-size: var(--font-size-13); --control-line-height: var(--line-height-relaxed); --control-padding-block: var(--space-1px); --control-padding-inline: var(--space-9px); --badge-height: var(--size-20px); --badge-padding-inline: var(--space-9px); --badge-font-size: var(--font-size-12); --app-header-logo-size: var(--size-56px); --avatar-size-header: var(--size-28px); --range-input-height: var(--size-32px); --range-track-height: var(--size-10px); --range-thumb-size: var(--size-28px); --receipt-thumb-width: var(--size-40px); --receipt-thumb-height: var(--size-64px); --vertical-align: middle; --section-tabs-line-height: var(--line-height-175pct); --kpi-tile-padding-block: var(--size-6px); --kpi-tile-padding-inline: var(--size-9px); --kpi-tile-content-gap: var(--size-6px); --kpi-grid-gap: var(--size-9px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-2px); --kpi-tile-icon-size: var(--size-28px); --kpi-tile-value-font-size: var(--size-20px); --kpi-tile-label-font-size: var(--font-size-10); } /* Comfortable (roomiest app density) */ .density--comfortable { --font-size-density-step: 1px; --table-padding: var(--size-8px) var(--size-12px); --table-line-height: var(--line-height-150pct); --table-font-size: var(--size-14px); --input-height: var(--size-40px); --button-height: var(--size-40px); --control-icon-size: var(--size-24px); --toolbar-group-gap: var(--space-8px); --control-font-size: var(--font-size-14); --control-line-height: var(--line-height-relaxed); --control-padding-block: var(--space-1px); --control-padding-inline: var(--space-9px); --badge-height: var(--size-24px); --badge-padding-inline: var(--space-12px); --badge-font-size: var(--font-size-14); --app-header-logo-size: var(--size-64px); --avatar-size-header: var(--size-36px); --range-input-height: var(--size-32px); --range-track-height: var(--size-10px); --range-thumb-size: var(--size-28px); --receipt-thumb-width: var(--size-44px); --receipt-thumb-height: var(calc(var(--size-24px) * 3)); --vertical-align: middle; --section-tabs-line-height: var(--line-height-175pct); --kpi-tile-padding-block: var(--size-8px); --kpi-tile-padding-inline: var(--size-12px); --kpi-tile-content-gap: var(--size-9px); --kpi-grid-gap: var(--size-12px); --kpi-grid-group-gap: var(--size-4px); --kpi-grid-group-padding-block: var(--space-3px); --kpi-tile-icon-size: var(--size-32px); --kpi-tile-value-font-size: var(--size-24px); --kpi-tile-label-font-size: var(--font-size-12); } /* Spacious density */ .density--spacious { --font-size-density-step: 1.5px; --table-padding: var(--size-8px) var(--size-12px); --table-line-height: var(--line-height-150pct); --table-font-size: var(--size-14px); --input-height: var(--size-40px); --button-height: var(--size-40px); --control-icon-size: var(--size-26px); --toolbar-group-gap: var(--space-8px); --control-font-size: var(--font-size-14); --control-line-height: var(--line-height-relaxed); --control-padding-block: var(--space-1px); --control-padding-inline: var(--space-9px); --badge-height: var(--size-24px); --badge-padding-inline: var(--space-12px); --badge-font-size: var(--font-size-14); --app-header-logo-size: var(--size-64px); --avatar-size-header: var(--size-36px); --range-input-height: var(--size-32px); --range-track-height: var(--size-10px); --range-thumb-size: var(--size-28px); --receipt-thumb-width: var(--size-44px); --receipt-thumb-height: var(calc(var(--size-24px) * 3)); --vertical-align: middle; --section-tabs-line-height: var(--line-height-175pct); --kpi-tile-padding-block: var(--size-8px); --kpi-tile-padding-inline: var(--size-12px); --kpi-tile-content-gap: var(--size-9px); --kpi-grid-gap: var(--size-12px); --kpi-grid-group-gap: var(--size-4px); --kpi-grid-group-padding-block: var(--space-3px); --kpi-tile-icon-size: var(--size-32px); --kpi-tile-value-font-size: var(--size-24px); --kpi-tile-label-font-size: var(--font-size-12); } /* Mobile: force comfortable table density regardless of density class. 11px table rows are unreadable on mobile at arm's length. The mobile card view typically takes over, but any visible table cells also need bigger type. */ @media (max-width: 767px) { :root { --table-font-size: var(--font-size-mobile-sm); /* 14px on mobile */ --table-padding: var(--size-2px) var(--size-6px); /* tight rows on mobile */ --table-line-height: var(--line-height-150pct); --control-icon-size: var(--size-18px); --toolbar-group-gap: var(--space-4px); --app-header-logo-size: var(--size-48px); --avatar-size-header: var(--size-24px); --kpi-tile-padding-block: var(--size-5px); --kpi-tile-padding-inline: var(--size-7px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-7px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-12); } .density--compact { --table-font-size: var(--font-size-mobile-sm); /* 14px on mobile */ --table-padding: var(--size-2px) var(--size-6px); /* tight rows on mobile */ --table-line-height: var(--line-height-150pct); --control-icon-size: var(--size-18px); --toolbar-group-gap: var(--space-4px); --app-header-logo-size: var(--size-48px); --avatar-size-header: var(--size-24px); --kpi-tile-padding-block: var(--size-5px); --kpi-tile-padding-inline: var(--size-7px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-7px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-12); } .density--dense { --table-font-size: var(--font-size-mobile-sm); /* 14px on mobile */ --table-padding: var(--size-2px) var(--size-6px); /* tight rows on mobile */ --table-line-height: var(--line-height-150pct); --control-icon-size: var(--size-20px); --toolbar-group-gap: var(--space-4px); --app-header-logo-size: var(--size-48px); --avatar-size-header: var(--size-24px); --kpi-tile-padding-block: var(--size-5px); --kpi-tile-padding-inline: var(--size-7px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-7px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-12); } .density--standard { --table-font-size: var(--font-size-mobile-sm); /* 14px on mobile */ --table-padding: var(--size-2px) var(--size-6px); /* tight rows on mobile */ --table-line-height: var(--line-height-150pct); --control-icon-size: var(--size-22px); --toolbar-group-gap: var(--space-6px); --app-header-logo-size: var(--size-56px); --avatar-size-header: var(--size-28px); --kpi-tile-padding-block: var(--size-5px); --kpi-tile-padding-inline: var(--size-7px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-7px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-12); } .density--comfortable { --table-font-size: var(--font-size-mobile-sm); /* 14px on mobile */ --table-padding: var(--size-2px) var(--size-6px); /* tight rows on mobile */ --table-line-height: var(--line-height-150pct); --control-icon-size: var(--size-24px); --toolbar-group-gap: var(--space-8px); --app-header-logo-size: var(--size-64px); --avatar-size-header: var(--size-36px); --kpi-tile-padding-block: var(--size-5px); --kpi-tile-padding-inline: var(--size-7px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-7px); --kpi-grid-group-gap: var(--size-3px); --kpi-grid-group-padding-block: var(--space-1px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-12); } .density--spacious { --table-font-size: var(--font-size-mobile-sm); /* 14px on mobile */ --table-padding: var(--size-2px) var(--size-6px); /* tight rows on mobile */ --table-line-height: var(--line-height-150pct); --control-icon-size: var(--size-26px); --toolbar-group-gap: var(--space-8px); --app-header-logo-size: var(--size-64px); --avatar-size-header: var(--size-36px); --kpi-tile-padding-block: var(--size-5px); --kpi-tile-padding-inline: var(--size-7px); --kpi-tile-content-gap: var(--size-4px); --kpi-grid-gap: var(--size-7px); --kpi-grid-group-gap: var(--size-3px); --kpi-tile-icon-size: var(--size-24px); --kpi-tile-value-font-size: var(--size-18px); --kpi-tile-label-font-size: var(--font-size-12); } } /** * Divider Utilities * Horizontal dividers for separating sections */ /* Plain inline section separator — thin solid rule, no margins */ .divider--rule { display: block; width: var(--size-100pct); height: var(--size-2px); background: var(--input-border); border: none; margin: 0; } .divider--top { display: block; width: var(--size-100pct); height: var(--input-border-width-thin); background: var(--gradient-divider-horizontal-soft); margin: 0 0 var(--space-9px) 0; border: none; box-shadow: var(--shadow-divider-top); } .divider--bottom { display: block; width: var(--size-100pct); height: var(--input-border-width-thin); background: var(--gradient-divider-horizontal-soft); margin: var(--space-9px) 0 var(--space-1px) 0; padding: 0; border: none; box-shadow: var(--shadow-divider-bottom); } /* Shadow-only divider for chrome separators (bottom chrome) */ .divider--shadow-bottom { display: block; width: var(--size-100pct); height: var(--size-1px); margin: 0; padding: 0; border: none; background: var(--black-glass-whisper-08); box-shadow: 0 1px 3px var(--black-glass-faint-10), 0 1px 2px var(--black-glass-subtle-05); } /* Labeled horizontal divider: ──── LABEL ──── */ .divider--labeled { display: flex; align-items: center; gap: var(--space-1-5px); margin: var(--space-1-5px) 0; } .divider--labeled::before { content: ''; flex: 1; height: var(--size-1px); background: var(--input-border); } .divider--labeled::after { content: ''; flex: 1; height: var(--size-1px); background: var(--input-border); } .drawer { /* Panel header tokens */ --drawer-panel-header-gradient: var(--white-glass-full-95); --drawer-panel-height: var(--size-100pct); --drawer-panel-bg: var(--card-surface); --drawer-panel-border-color: var(--card-border); --drawer-panel-border-radius: var(--radius-standard); --drawer-panel-padding: 0; --drawer-shine-opacity: 0.3; --panel-header-gradient: var(--drawer-panel-header-gradient); --panel-header-backdrop: var(--backdrop-glass-medium); --drawer-shadow: var(--shadow-soft); width: var(--size-100pct); min-width: 0; max-width: var(--size-100pct); max-inline-size: var(--size-100pct); height: var(--drawer-panel-height); padding: var(--drawer-panel-padding); margin-inline: 0; box-sizing: border-box; color: var(--text-primary); /* Allow inner `.panel` shadow to render; the panel itself owns overflow clipping. */ overflow: visible; word-break: break-word; overflow-wrap: anywhere; position: relative; display: flex; flex-direction: column; min-height: 0; } .drawer { flex: 1 1 auto; min-height: 0; height: 100%; } /* Shine overlay on drawer */ .drawer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--size-25pct); background: var(--overlay-shine-subtle); pointer-events: none; z-index: 0; opacity: var(--drawer-shine-opacity); } /* Modifier overrides via custom property inheritance */ .drawer--surface-soft { --drawer-shine-opacity: 0; } .drawer[data-surface="soft"] { --drawer-shine-opacity: 0; } .drawer--danger { --drawer-panel-bg: var(--danger-50); --drawer-panel-border-color: var(--strong-red); --drawer-panel-header-gradient: var(--danger-50); } .drawer[data-tone="danger"] { --drawer-panel-bg: var(--danger-50); --drawer-panel-border-color: var(--strong-red); --drawer-panel-header-gradient: var(--danger-50); } .drawer--collapsed { --drawer-panel-height: auto; } .drawer[data-collapsed="true"] { --drawer-panel-height: auto; } .drawer__header-actions { display: flex; align-items: center; gap: var(--space-1px); flex-shrink: 0; justify-content: flex-end; max-width: var(--size-100pct); min-width: 0; flex-wrap: nowrap; } .drawer__body { padding: var(--size-9px); position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; } .drawer__footer { padding: var(--space-8px) var(--space-16px); border-top-width: var(--input-border-width-thin); border-top-style: solid; border-top-color: var(--card-border); background: var(--white-glass-subtle-04); position: relative; z-index: 1; flex: 0 0 auto; } /* ============================================================================ DRAWER SECTION Semantic section block within a Drawer or side panel. ============================================================================ */ .drawer__section { display: flex; flex-direction: column; } /* Keep primary form actions () visible while scrolling in drawers */ .form__actions--drawer-sticky { position: sticky; bottom: 0; margin-top: var(--size-16px); padding: var(--size-16px); border-top: var(--input-border-width-thin) solid var(--card-border); background: var(--white-glass-subtle-04); z-index: 2; } /* ============================================================================ MOBILE RESPONSIVE DRAWER STYLES Optimized spacing and touch targets for mobile/tablet devices ============================================================================ */ /* Mobile (≤768px): Reduce padding, optimize for small screens */ @media (max-width: 767px) { .drawer { --drawer-panel-border-radius: var(--radius-standard); } .drawer__body { padding: var(--size-12px); } .drawer__footer { padding: var(--size-12px); } } /* Tablet (769px - 1024px): Intermediate spacing */ @media (min-width: calc(var(--breakpoint-mobile-max) + 1px)) and (max-width: var(--breakpoint-tablet-max)) { .drawer { --drawer-panel-padding: var(--space-3-5px); } .drawer__body { padding: var(--space-3-5px); } } /* Drawer layout BEM elements (replace inside Drawers) */ /* Dense vertical group for related fields. Replaces . */ .drawer__form-group { display: flex; flex-direction: column; gap: var(--space-1px); align-items: stretch; } /* Horizontal row for pairs. Replaces . */ .drawer__row { display: flex; flex-direction: row; gap: var(--space-1-5px); align-items: center; } /* Space-between row — delete on left, save on right. Replaces . */ .drawer__spread-row { display: flex; flex-direction: row; gap: var(--space-1-5px); align-items: center; justify-content: space-between; } /* Right-aligned button row. Replaces . */ .drawer__actions-row { display: flex; flex-direction: row; gap: var(--space-1-5px); align-items: center; justify-content: flex-end; } /** * Embed Utilities - Responsive containers * Used for embedding external content (videos, Canva decks, etc.) * * BEM Structure: * - Block: .embed * - Modifiers: .embed--16x9, .embed--4x3, .embed--1x1 */ /* Base embed container - maintains aspect ratio using padding-bottom trick */ .embed { position: relative; width: var(--size-100pct); height: 0; overflow: hidden; } /* Common aspect ratio modifiers */ .embed--16x9 { padding-bottom: var(--embed-aspect-16x9); } .embed--4x3 { padding-bottom: var(--embed-aspect-4x3); } .embed--1x1 { padding-bottom: var(--embed-aspect-1x1); } /* Embedded content fills the container */ .embed__media { position: absolute; top: 0; left: 0; width: var(--size-100pct); height: var(--size-100pct); border-radius: var(--radius-standard); } /* --------------------------------------------------------------------------- Generic FAB block Block: .fab Elements: .fab__container, .fab__badge Mods: .fab--webchat, .fab--stack, etc. ------------------------------------------------------------------------ */ .fab { position: fixed; z-index: var(--z-fab); } .fab--left { left: var(--fab-offset-inline-start); bottom: var(--fab-offset-block-end); } .fab--right { right: var(--fab-offset-inline-end); bottom: var(--fab-offset-block-end); } .fab--top-right { position: absolute; right: var(--fab-offset-inline-end); top: var(--fab-offset-block-start); z-index: var(--z-topmost); } .fab--inline { position: static; display: inline-flex; } @media (max-width: 767px) { .fab--left { bottom: calc(var(--mobile-nav-height) + var(--fab-offset-block-end)); } .fab--right { bottom: calc(var(--mobile-nav-height) + var(--fab-offset-block-end)); } } .fab__badge { position: absolute; top: var(--space-1px); right: var(--space-1px); } /* FAB button base */ .fab__button { display: inline-flex; align-items: center; justify-content: center; width: var(--fab-size-fluid); height: var(--fab-size-fluid); padding: var(--space-0); border-radius: var(--size-50pct); border: var(--input-border-width-thin) solid var(--input-border-std); box-shadow: var(--shadow-float-lg); cursor: pointer; transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); --icon-stroke-width: 2; --btn-icon-w: var(--size-24px); --btn-icon-h: var(--size-24px); --btn-icon-stroke: currentColor; --icon-color: currentColor; } .fab__button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* Ensure FAB trigger icons are always whether they come from Button icon props (.btn__icon) or direct SVG children from trigger content. .btn__icon--fab is applied by the FAB component to its Button's icon slot. */ .btn__icon--fab { width: var(--size-24px); height: var(--size-24px); color: currentColor; stroke: currentColor; flex-shrink: 0; } /* Light variant */ .fab__button--light { background: var(--active-surface-gradient); border-color: var(--teal-dark-glass-clear-18); color: var(--text-primary); } .fab__button--light:hover { background: var(--hover-surface-gradient); color: var(--strong-teal); transform: scale(1.05); box-shadow: var(--shadow-float-lg-hover); } /* Dark variant */ .fab__button--dark { background: var(--gradient-slate-diagonal-active-strong); color: var(--text-on-dark); border-color: transparent; } .fab__button--danger { background: var(--strong-red); color: var(--text-on-dark); border-color: var(--dark-red); } .fab__button--dark:hover { transform: scale(1.05); box-shadow: var(--shadow-float-lg-ambient); } .fab__button--danger:hover { transform: scale(1.05); box-shadow: var(--shadow-float-lg-ambient); } .fab__button:active { transform: scale(0.95); box-shadow: var(--shadow-float-md); } @keyframes fabMinimizeCue { 0% { transform: scale(0.92); box-shadow: var(--shadow-float-md); } 55% { transform: scale(1.08); box-shadow: var(--shadow-float-lg-ambient); } 100% { transform: scale(1); box-shadow: var(--shadow-float-lg); } } .fab__button--minimize-cue { animation: fabMinimizeCue 420ms var(--easing-smooth); } /* ============================================================================= FEEDBACK UTILITIES Context-specific feedback states: errors, warnings, success, loading states ============================================================================= */ /* ===== ERROR STATE UTILITIES ===== */ /* ===== GENERIC FEEDBACK VARIANTS ===== */ .feedback-title { margin: var(--space-0); font-size: var(--font-size-14); font-weight: var(--weight-bold); line-height: var(--line-height-tight); color: var(--deepest-slate); } .feedback-description { font-size: var(--font-size-12); line-height: var(--line-height-normal); color: var(--dark-slate); } /* Variant-specific icon accenting — BEM modifier classes */ .feedback-icon--error { color: var(--strong-red); } .feedback-icon--empty { color: var(--soft-slate); } .feedback-icon--success { color: var(--accent-teal); } .feedback-icon--warning { color: var(--medium-sunset); } .feedback-icon--info { color: var(--slate-glass-soft-12); } /* Default description color per variant (error stays primary; others are secondary) */ .feedback-description--variant { color: var(--dark-slate); } .feedback-description--error { color: var(--deepest-slate); } /* ===== INLINE LOADING STATE ===== */ /* SAVE INDICATOR UTILITIES */ .save-indicator { display: inline-flex; align-items: center; gap: var(--space-1-5px); transition: opacity var(--animation-quick) var(--easing-gentle); font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); color: var(--deepest-slate); } .save-indicator--fixed { position: fixed; bottom: var(--space-12px); right: var(--space-12px); padding: var(--space-1-5px) var(--space-9px); background: var(--white-glass-frosted-90); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); z-index: var(--z-toast); animation: saveIndicatorSlideIn var(--animation-deliberate) var(--easing-snappy); } .save-indicator__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-16px); height: var(--size-16px); } @keyframes saveIndicatorSlideIn { from { opacity: var(--opacity-hidden); transform: translateY(var(--lift-subtle)); } to { opacity: var(--opacity-visible); transform: translateY(var(--space-0)); } } .save-indicator__checkmark { width: var(--size-16px); height: var(--size-16px); fill: currentcolor; animation: checkmarkFadeIn var(--animation-deliberate) var(--easing-gentle); } @keyframes checkmarkFadeIn { from { opacity: var(--opacity-hidden); transform: scale(0.8); } to { opacity: var(--opacity-visible); transform: scale(1); } } .save-indicator__error-icon { width: var(--size-16px); height: var(--size-16px); fill: currentcolor; animation: errorShake var(--animation-quick) var(--easing-snappy); } @keyframes errorShake { 0%, 100% { transform: translateX(var(--space-0)); } 25% { transform: translateX(calc(var(--space-1px) * -1)); } 75% { transform: translateX(var(--space-1px)); } } .save-indicator__message { font-weight: var(--weight-medium); font-size: var(--font-size-12); line-height: var(--line-height-tight); color: var(--deepest-slate); } .save-indicator__timestamp { font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); color: var(--soft-slate); } .save-indicator--fixed:hover { box-shadow: var(--shadow-soft); } /* CONTAINERS */ .inline-error__strong { color: var(--strong-red); font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-semibold); } .inline-error__paragraph { color: var(--dark-slate); font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); } .inline-error__list-item { color: var(--dark-slate); font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); } .inline-error__code { background: var(--white-glass-frosted-90); color: var(--deepest-slate); padding: var(--space-1px) var(--space-1-5px); border-radius: var(--radius-standard); font-size: var(--font-size-12); font-family: var(--font-family-mono); } .alert-floating { max-width: var(--size-100pct); overflow: hidden; font-size: var(--font-size-12); line-height: var(--line-height-standard); border-radius: var(--radius-standard); padding: var(--space-9px); display: flex; align-items: center; gap: var(--space-9px); background: var(--red-glass-whisper-05); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--strong-red); color: var(--strong-red); position: fixed; top: var(--space-18px); inset-inline-end: var(--space-18px); border-radius: var(--radius-standard); z-index: var(--z-topmost); } /* KEYBOARD SHORTCUT HINT */ .keyboard-hint { position: fixed; bottom: var(--space-18px); inset-inline-end: var(--space-18px); z-index: var(--z-topmost); max-width: var(--width-240px); animation: slideInFromBottom var(--animation-deliberate) var(--easing-snappy); } @keyframes slideInFromBottom { from { opacity: var(--opacity-hidden); transform: translateY(var(--space-20px)); } to { opacity: var(--opacity-visible); transform: translateY(var(--space-0)); } } .keyboard-hint__content { display: flex; align-items: center; gap: var(--space-9px); padding: var(--space-9px) var(--space-12px); background: var(--white-glass-frosted-90); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); } .keyboard-hint__icon { font-size: var(--font-size-16); line-height: var(--line-height-tight); flex-shrink: var(--flex-shrink-none); } .keyboard-hint__text { flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto); font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); color: var(--deepest-slate); } .keyboard-hint__text-strong { font-weight: var(--weight-bold); color: var(--accent-teal); } .keyboard-hint__key { display: inline-block; padding: var(--space-0-5px) var(--space-1-5px); margin-block: var(--space-0); margin-inline: var(--space-0-5px); font-family: var(--font-family-mono); font-size: var(--font-size-12); font-weight: var(--weight-bold); line-height: var(--line-height-tight); color: var(--deepest-slate); background: var(--white-glass-frosted-90); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); border-radius: var(--radius-standard); } .keyboard-hint__dismiss { background: var(--white-glass-subtle-04); color: var(--dark-slate); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); border-radius: var(--radius-standard); padding: var(--space-1-5px) var(--space-2-5px); cursor: pointer; font-size: var(--font-size-12); line-height: var(--line-height-tight); font-weight: var(--weight-normal); } .keyboard-hint__dismiss:hover { background: var(--white-glass-bright-86); color: var(--deepest-slate); } /* * ════════════════════════════════════════════════════════════════════════════ * FORMS.CSS - Canonical Form & Input Styling * ════════════════════════════════════════════════════════════════════════════ * * BEM Architecture - Modifier Pattern * Base class (.input) provides all default styling. * Modifiers (.input--password, .input--error) override specific properties. * Use modifiers WITH the base class: * * Width modifiers live in table-base.css (.input--date, .select--email, etc.) * This file contains ONLY behavioral and structural styling. * ════════════════════════════════════════════════════════════════════════════ */ :root { --_form-section-mb: var(--form-section-mb); --_form-section-padding: 0; --_form-section-border: var(--input-border-width-thin) solid var(--input-border); --_form-section-border-radius: var(--radius-standard); --_form-section-bg: var(--card-surface); --_form-section-heading-display: flex; --_form-section-instructions-display: block; --_form-section-body-cols: repeat(auto-fit, minmax(min(var(--form-grid-col-width), var(--size-100pct)), 1fr)); --_form-section-body-gap: var(--space-9px); } .public-form-wrapper { max-width: var(--breakpoint-desktop); margin-inline: auto; padding-inline: var(--space-9px); width: var(--size-100pct); box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════════ BASE INPUT ══════════════════════════════════════════════════════════════════════════ */ /* Base input block - all shared styles */ .input { width: var(--size-100pct); min-width: 0; box-sizing: border-box; background: var(--input-background); color: var(--text-primary); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-9px)); font-family: var(--font-family-primary); font-size: var(--control-font-size, var(--font-size-12)); line-height: var(--control-line-height, var(--line-height-relaxed)); letter-spacing: normal; outline: none; box-shadow: var(--shadow-subtle); transition: all var(--animation-quick) var(--easing-smooth); min-height: var(--input-height); } .input--address-autocomplete { display: block; width: var(--size-100pct); min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0; } .input--address-autocomplete::part(input) { width: var(--size-100pct); min-width: 0; box-sizing: border-box; background: var(--input-background); color: var(--text-primary); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-9px)); font-family: var(--font-family-primary); font-size: var(--control-font-size, var(--font-size-12)); line-height: var(--control-line-height, var(--line-height-relaxed)); letter-spacing: normal; outline: none; box-shadow: var(--shadow-subtle); transition: all var(--animation-quick) var(--easing-smooth); min-height: var(--input-height); } .input:hover { box-shadow: var(--shadow-soft); } .input--address-autocomplete:hover::part(input) { box-shadow: var(--shadow-soft); } .input:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); box-shadow: var(--focus-ring-subtle); transform: translateY(var(--lift-subtle)); } .input--address-autocomplete:focus-within::part(input) { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); box-shadow: var(--focus-ring-subtle); transform: translateY(var(--lift-subtle)); } .input:disabled { opacity: var(--opacity-soft); cursor: not-allowed; } .input--address-autocomplete[disabled]::part(input) { opacity: var(--opacity-soft); cursor: not-allowed; } .input--date-picker__trigger:disabled { opacity: var(--opacity-soft); cursor: not-allowed; } .input::placeholder { color: var(--text-primary); opacity: var(--opacity-muted-strong); } .input--address-autocomplete::part(input)::placeholder { color: var(--text-primary); opacity: var(--opacity-muted-strong); } .input--with-password-toggle { padding-right: calc(var(--size-44px) + var(--space-1-5px)); } .input--visually-hidden { position: absolute; width: var(--size-1px); height: var(--size-1px); margin: calc(-1 * var(--size-1px)); padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ RANGE INPUT (SLIDER) ══════════════════════════════════════════════════════════════════════════ */ /* Range inputs should not inherit text-input chrome (). */ .input[type="range"] { appearance: none; padding: 0; border: 0; background: transparent; box-shadow: none; min-height: auto; height: var(--range-input-height); cursor: pointer; accent-color: var(--deep-teal); } .input[type="range"]:focus-visible { transform: none; box-shadow: var(--focus-ring-subtle); } .input[type="range"]::-webkit-slider-runnable-track { height: var(--range-track-height); background: var(--input-border); border-radius: var(--radius-pill); } .input[type="range"]::-moz-range-track { height: var(--range-track-height); background: var(--input-border); border-radius: var(--radius-pill); } .input[type="range"]::-webkit-slider-thumb { appearance: none; width: var(--range-thumb-size); height: var(--range-thumb-size); border-radius: var(--radius-pill); background: var(--range-thumb-background, var(--deep-teal)); border: var(--input-border-width-md) solid var(--range-thumb-border-color, var(--white)); box-shadow: var(--range-thumb-shadow, var(--shadow-soft)); margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2); } .input[type="range"]::-moz-range-thumb { width: var(--range-thumb-size); height: var(--range-thumb-size); border-radius: var(--radius-pill); background: var(--range-thumb-background, var(--deep-teal)); border: var(--input-border-width-md) solid var(--range-thumb-border-color, var(--white)); box-shadow: var(--range-thumb-shadow, var(--shadow-soft)); } /* Reusable range filter primitive wrapper — no width; parent controls sizing */ .range-filter { min-width: 0; } .range-filter__control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1-5px); } .range-filter__track-wrap { position: relative; width: var(--size-100pct); } .range-filter__track-wrap--labeled-thumb { --range-thumb-background: transparent; --range-thumb-border-color: transparent; --range-thumb-shadow: none; } .range-filter__bound { font-size: var(--font-size-11); color: var(--text-muted); white-space: nowrap; line-height: var(--line-height-110pct); } /* Value renders inside the slider thumb: the badge IS the thumb, so the native thumb is made invisible (it still handles pointer/keyboard interaction). */ .range-filter__value-badge { position: absolute; top: var(--size-50pct); transform: translate(-50%, -50%); width: var(--range-thumb-size); height: var(--range-thumb-size); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-12); font-weight: var(--weight-bold); pointer-events: none; background: var(--deep-teal); border: var(--input-border-width-md) solid var(--white); color: var(--white); box-shadow: var(--shadow-soft); } /* ═══════════════════════════════════════════════════════════════════════════ DATE PICKER GRID (COMPACT CALENDAR) ══════════════════════════════════════════════════════════════════════════ */ .input--date-picker__grid { display: flex; flex-direction: column; gap: var(--space-1-5px); padding: var(--space-1-5px); user-select: none; width: max-content; /* Ensure calendar body is opaque over tables */ background: var(--input-background); } .input--date-picker__weekdays { display: grid; grid-template-columns: repeat(7, var(--size-36px)); gap: 0; margin-bottom: var(--space-1px); width: max-content; } .input--date-picker__weekday { text-align: center; font-size: var(--font-size-11); font-weight: var(--weight-bold); color: var(--text-secondary); padding: var(--space-1px); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .input--date-picker__days { display: grid; grid-template-columns: repeat(7, var(--size-36px)); gap: 0; padding: 0; border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); overflow: hidden; background: var(--input-background); width: max-content; } .input--date-picker__day { aspect-ratio: 1; background: var(--input-background); border-radius: 0; font-size: var(--font-size-13); font-weight: var(--weight-medium); color: var(--text-primary); transition: all var(--animation-quick) var(--easing-smooth); position: relative; display: flex; align-items: center; justify-content: center; min-width: var(--size-36px); height: var(--size-36px); border-right: var(--input-border-width-thin) solid var(--input-border); border-bottom: var(--input-border-width-thin) solid var(--input-border); } /* Remove right border on last column */ .input--date-picker__day:nth-child(7n) { border-right: none; } /* Remove bottom border on last row — applied via .input--date-picker__day--last-row class in React */ .input--date-picker__day--last-row { border-bottom: none; } .input--date-picker__day-btn { width: var(--size-100pct); height: var(--size-100pct); padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; font: inherit; color: currentColor; cursor: pointer; border-radius: inherit; } .input--date-picker__day-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-subtle); position: relative; z-index: 1; } .input--date-picker__day:hover { background: var(--white-glass-faint-10); } .input--date-picker__day:active { background: var(--white-glass-light-20); } .input--date-picker__day--other-month { color: var(--soft-slate); opacity: var(--opacity-light); } .input--date-picker__day--today { font-weight: var(--weight-semibold); color: var(--vibrant-teal); background: var(--pale-teal); box-shadow: inset 0 0 0 var(--input-border-width-thin) var(--vibrant-teal); } .input--date-picker__day--selected { background: var(--vibrant-teal); color: var(--white); font-weight: var(--weight-bold); position: relative; border-radius: var(--radius-standard); box-shadow: var(--shadow-soft); } .input--date-picker__day--range-start { background: var(--vibrant-teal); color: var(--white); font-weight: var(--weight-bold); position: relative; border-radius: var(--radius-standard); box-shadow: var(--shadow-soft); } .input--date-picker__day--range-end { background: var(--vibrant-teal); color: var(--white); font-weight: var(--weight-bold); position: relative; border-radius: var(--radius-standard); box-shadow: var(--shadow-soft); } .input--date-picker__day--selected:hover:not(:disabled) { background: var(--strong-teal); box-shadow: var(--shadow-moderate); } .input--date-picker__day--range-start:hover:not(:disabled) { background: var(--strong-teal); box-shadow: var(--shadow-moderate); } .input--date-picker__day--range-end:hover:not(:disabled) { background: var(--strong-teal); box-shadow: var(--shadow-moderate); } /* Differentiate start and end dates in a range */ /* Label that appears under the date number */ .input--date-picker__day-label { position: absolute; bottom: 0; left: var(--size-50pct); transform: translateX(var(--transform-nudge)); font-size: var(--size-7px); font-weight: var(--weight-medium); white-space: nowrap; line-height: var(--line-height-110pct); opacity: 0.5; letter-spacing: var(--size-0-3px); text-transform: uppercase; color: var(--text-secondary); } /* Make the in-range styling softer and extend to edges */ .input--date-picker__day--in-range { background: var(--pale-teal); color: var(--text-primary); border-radius: 0; position: relative; box-shadow: none; } .input--date-picker__day--in-range:hover:not(:disabled) { background: var(--light-teal); box-shadow: none; } /* Selected dates should have stronger styling */ .input--date-picker__day--selected { background: var(--vibrant-teal); color: var(--white); font-weight: var(--weight-bold); } .input--date-picker__day--selected:hover:not(:disabled) { background: var(--strong-teal); } /* Round left edge for range start */ .input--date-picker__day--has-range-start { border-top-left-radius: var(--radius-standard); border-bottom-left-radius: var(--radius-standard); border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Round right edge for range end */ .input--date-picker__day--has-range-end { border-top-right-radius: var(--radius-standard); border-bottom-right-radius: var(--radius-standard); border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Single-day selection (start=end) should be fully rounded */ .input--date-picker__day--range-single { border-radius: var(--radius-standard); } /* Disabled dates */ .input--date-picker__day--disabled { opacity: var(--opacity-light); color: var(--text-disabled); background: var(--input-background); } .input--date-picker__day-btn:disabled { cursor: not-allowed; } .input--date-picker__day--disabled:hover { background: var(--input-background); box-shadow: none; } .input--date-picker__day--hovered:not(:disabled) { background: var(--white-glass-faint-10); box-shadow: var(--shadow-soft); } /* Keep date-cell separators as clear lines by painting range states on the inner button surface instead of the full grid cell. */ .input--date-picker__day { background: transparent; } .input--date-picker__day-btn { --day-btn-in-range-bg: var(--pale-teal); background: var(--input-background); } .input--date-picker__day--in-range { background: transparent; } .input--date-picker__day--in-range:hover:not(:disabled) { --day-btn-in-range-bg: var(--light-teal); } .input--date-picker__day-btn--in-range { background: var(--day-btn-in-range-bg); } /* ═══════════════════════════════════════════════════════════════════════════ INPUT MODIFIERS - Used WITH base .input class ══════════════════════════════════════════════════════════════════════════ */ .input--error { background: var(--red-glass-visible-14); border-color: var(--strong-red); } .input[aria-invalid="true"] { background: var(--red-glass-visible-14); border-color: var(--strong-red); } .input--error:hover { border-color: var(--strong-sunset); } .input--error:focus-visible { border-color: var(--strong-sunset); box-shadow: var(--focus-ring-danger); background: var(--white-glass-full-95); } .input[aria-invalid="true"]:hover { border-color: var(--strong-red); } .input[aria-invalid="true"]:focus-visible { border-color: var(--strong-red); box-shadow: var(--focus-ring-danger); background: var(--white-glass-full-95); } .input--textarea { line-height: var(--line-height-relaxed); resize: vertical; max-width: var(--size-100pct); } .input--with-emoji-picker { padding-right: var(--space-9px); padding-bottom: calc(var(--size-28px) + var(--space-1px)); padding-left: var(--space-9px); } .input--password { padding-right: var(--size-64px); } /* Canonical read-only field value shell (same chrome as Input, non-editable presentation). */ .field__read-only-value { width: var(--size-100pct); min-width: 0; box-sizing: border-box; display: flex; align-items: center; min-height: var(--input-height); padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-9px)); background: var(--surface-hover-subtle); color: var(--text-secondary); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-subtle); transition: all var(--animation-quick) var(--easing-smooth); cursor: default; opacity: var(--opacity-visible); font-family: var(--font-family-primary); font-size: var(--control-font-size, var(--font-size-12)); line-height: var(--control-line-height, var(--line-height-relaxed)); letter-spacing: normal; white-space: var(--col-white-space, normal); overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; } .field__read-only-value::selection { background: transparent; } .field__read-only-value:hover { box-shadow: var(--shadow-subtle); } /* ═══════════════════════════════════════════════════════════════════════════ CHECKBOX INPUT - Modifier that inherits from .input base ══════════════════════════════════════════════════════════════════════════ */ .input--checkbox { appearance: none; width: var(--form-checkbox-size); height: var(--form-checkbox-size); min-height: var(--form-checkbox-size); padding: var(--space-0); background: var(--input-background); border-color: var(--input-border); border-radius: var(--radius-sm); flex-shrink: var(--flex-shrink-none); display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .input--checkbox:hover { border-color: var(--input-border); } .input--checkbox:checked { background: var(--vibrant-teal); border-color: var(--vibrant-teal); } .input--checkbox::after { content: ''; position: absolute; /* Center tick without percentage-based transforms */ top: 0; right: 0; bottom: 0; left: 0; margin: auto; /* Explicit geometry so it renders as a clear checkmark in a 16x16 box */ width: var(--space-1-5px); height: var(--space-9px); border-style: solid; border-color: var(--white); border-width: 0 var(--input-border-width-thin) var(--input-border-width-thin) 0; transform: rotate(45deg); opacity: var(--opacity-none); } .input--checkbox:checked::after { opacity: var(--opacity-visible); } .input--checkbox:disabled { background: var(--light-slate); } /* ═══════════════════════════════════════════════════════════════════════════ CHECKBOX FIELD WRAPPER ══════════════════════════════════════════════════════════════════════════ */ /* Checkbox field wrapper: [checkbox] [label] */ .checkbox__field { display: inline-flex; align-items: center; gap: var(--space-1-5px); cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════════ SELECT INPUTS ══════════════════════════════════════════════════════════════════════════ */ /* Field: Container block for labeled . Width ownership is local to the Field primitive to prevent data cell-width semantics from leaking into form controls. */ .field { --field-width: var(--size-100pct); --field-min-width: var(--space-0); --field-gap: var(--space-1px); --field-label-margin-bottom: var(--space-1px); margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--field-gap); width: var(--field-width); min-width: var(--field-min-width); box-sizing: border-box; } /* Active filter selects - simple and obvious */ .input--active { border: var(--input-border-width-md) solid var(--vibrant-teal); background: var(--teal-glass-faint-10); font-weight: var(--weight-semibold); } .input--select--active { border: var(--input-border-width-md) solid var(--vibrant-teal); background: var(--teal-glass-faint-10); font-weight: var(--weight-semibold); } .input--date-picker__trigger--active { border: var(--input-border-width-md) solid var(--vibrant-teal); background: var(--teal-glass-faint-10); font-weight: var(--weight-semibold); } /* Select modifier - used WITH .input base: class="input input--select" */ .input--select { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--size-6px); cursor: pointer; min-height: var(--input-height); text-align: left; box-sizing: border-box; width: var(--size-100pct); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .input--select__trigger { position: relative; } /* Active modifier for the select trigger */ .input__menu { position: absolute; top: var(--size-100pct); left: 0; right: 0; z-index: var(--z-dropdown); margin-top: var(--space-0-5px); background: var(--white-glass-full-95); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--input-border); box-shadow: var(--shadow-surface-high); max-height: var(--height-400px); overflow-y: auto; min-width: var(--size-100pct); /* Mobile optimizations */ -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */ overscroll-behavior: contain; /* Prevent body scroll bleed */ } .input__menu-header { padding: var(--space-1-5px); border-bottom: var(--input-border-width-thin) solid var(--input-border); } /* ═══════════════════════════════════════════════════════════════════════════ DROPDOWN MENUS (Date Pickers, etc.) ══════════════════════════════════════════════════════════════════════════ */ .input__dropdown-anchor { position: relative; display: inline-flex; flex-direction: column; min-width: 0; } .input__dropdown-anchor--full { width: var(--size-100pct); display: flex; } .input--date-picker__anchor { position: relative; display: flex; flex-direction: column; width: var(--size-100pct); min-width: 0; } .field__control { width: var(--size-100pct); display: flex; } .input__dropdown-anchor--external { display: block; } .input__dropdown { position: absolute; z-index: var(--z-dropdown); margin-top: var(--space-0-5px); /* Slight vertical gradient so dropdowns feel like real surfaces */ background: linear-gradient( to bottom, var(--white), var(--pale-off-white) ); backdrop-filter: var(--backdrop-glass-light); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--input-border); /* Strong multi-layer shadow with real opacity for clear visual separation */ box-shadow: 0 10px 25px var(--black-glass-visible-15), 0 6px 12px var(--black-glass-soft-12), 0 3px 6px var(--black-glass-whisper-08); padding: 0; overflow-y: auto; max-height: min(500px, 70vh); /* Fit content up to max, then scroll */ width: var(--size-100pct); animation: fadeIn var(--animation-quick) var(--easing-smooth); transform-origin: top center; } @media (prefers-reduced-motion: reduce) { .input__dropdown { animation: none; } } /* Right-align modifier: pin to right edge of */ .input__dropdown--right { right: 0; } /* Icon/button-triggered menu modifier: the base .input__dropdown assumes an input-width parent (e.g. a search box) and sizes itself to 100% of it. A menu anchored to a small trigger (avatar, icon button) needs its own sensible width instead of shrinking to the trigger's own tiny width. */ .input__dropdown--menu { width: auto; min-width: var(--width-200px); } .input__dropdown--top { top: auto; bottom: calc(var(--size-100pct) + var(--space-0-5px)); transform-origin: bottom center; } .input__dropdown--center { left: 50%; transform: translateX(-50%); } .input__dropdown--cursor { left: 0; } .input__dropdown--date-range { left: 0; top: var(--size-100pct); z-index: var(--z-popover); /* Match opaque dropdown surface */ background: var(--white-glass-frosted-90); max-width: var(--size-viewport-photo-viewer-width); box-sizing: border-box; animation: fadeIn var(--animation-quick) var(--easing-smooth); transform-origin: top center; } .input__dropdown--date-range-portal { left: 0; top: var(--size-100pct); z-index: var(--z-popover); background: var(--white-glass-frosted-90); max-width: var(--size-viewport-photo-viewer-width); box-sizing: border-box; animation: fadeIn var(--animation-quick) var(--easing-smooth); transform-origin: top center; max-height: min(var(--height-400px), calc(100vh - 16px)); overflow-y: auto; } /* SearchInput dropdown (portaled via DropdownSurface) */ .input__dropdown--search-history { max-height: var(--height-400px); } .input--dropdown--mobile-full { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; width: var(--size-100pct); height: var(--size-100pct); max-width: var(--size-100pct); overflow-y: auto; } /* Date picker content wrapper (contains header, calendar grid, actions) */ .input--date-picker__content { display: flex; flex-direction: column; gap: var(--space-1-5px); width: max-content; min-width: max-content; max-width: calc(100vw - 16px); /* Ensure the calendar surface is fully opaque, matching dropdown menus */ background: var(--white-glass-frosted-90); } .input--date-picker__content--with-sidebar { /* Sidebar-specific tokens so themes can override */ --date-picker-sidebar-bg: var(--white-glass-strong-40); --date-picker-sidebar-border: var(--teal-glass-soft-12); } .input--date-picker__body { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-9px); } .input--date-picker__quick-ranges { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-0-5px); padding-right: 0; padding-top: var(--space-1px); padding-bottom: var(--space-1px); flex: 0 0 auto; align-self: stretch; min-width: 0; background: transparent; border-right: 0; } .input--date-picker__quick-ranges--below { border-top: var(--input-border-width-thin) solid var(--input-border); padding-top: var(--space-1-5px); } .input--date-picker__quick-ranges-below { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-0-5px); padding-right: 0; padding-top: var(--space-1-5px); padding-bottom: var(--space-1px); flex: 0 0 auto; align-self: stretch; min-width: 0; background: transparent; border-right: 0; border-top: var(--input-border-width-thin) solid var(--input-border); } .input--date-picker__calendar { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-9px); } .input--date-picker__content--mobile { display: flex; flex-direction: column; gap: var(--space-1-5px); padding-bottom: var(--space-48px); width: var(--size-100pct); } /* Date picker calendar header */ .input--date-picker__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-5px); padding: var(--space-1px) var(--space-1-5px); margin-top: 0; background: var(--teal-glass-soft-12); border-bottom: var(--input-border-width-thin) solid var(--teal-glass-soft-12); } .input--date-picker__header-title { text-align: center; font-size: var(--font-size-14); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: var(--tracking-tight); user-select: none; margin: 0; } .input--date-picker__month-label { font-size: var(--font-size-14); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: var(--tracking-tight); min-width: var(--width-160px); text-align: center; margin: 0; } .input--date-picker__month-label--mobile { font-size: var(--font-size-16); } /* Date picker action buttons */ .input--date-picker__actions { display: flex; gap: var(--space-1px); justify-content: space-between; padding-top: var(--space-1px); margin-top: var(--space-1-5px); border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12); } .input--date-picker__actions--mobile { position: fixed; bottom: var(--space-1px); left: var(--space-1-5px); right: var(--space-1-5px); background: var(--white-glass-frosted-90); padding: var(--space-1px); border-radius: var(--radius-standard); box-shadow: var(--shadow-soft); } /* Date picker footer (range picker actions) */ .input--date-picker__footer { padding: var(--space-1px) var(--space-1-5px) var(--space-1-5px); background: var(--white-glass-frosted-90); border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12); } .input--date-picker__footer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-5px); flex-wrap: nowrap; } .input--date-picker__apply-actions { display: flex; align-items: center; gap: var(--space-1-5px); } .address-autocomplete__input-wrapper { display: flex; align-items: center; gap: var(--space-1-5px); } /* Date picker container and button wrappers */ .input--date-picker { position: relative; } .input--date-picker__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-9px); width: var(--size-100pct); } .input--date-picker__range-summary { min-width: 0; } .input--date-picker__time-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1px); } @media (max-width: 1099px) { .input--date-picker__time-actions { gap: var(--space-0-5px); } } .input--date-picker__trigger { position: relative; width: var(--size-100pct); min-width: 0; box-sizing: border-box; background: var(--input-background); color: var(--text-primary); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); padding: var(--space-1px) var(--space-9px); font-family: var(--font-family-primary); font-size: var(--font-size-12); letter-spacing: normal; outline: none; box-shadow: var(--shadow-subtle); transition: all var(--animation-quick) var(--easing-smooth); min-height: var(--input-height); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--size-6px); cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 767px) { .input--date-picker__row { grid-template-columns: 1fr; } } .input--date-picker__trigger:hover { box-shadow: var(--shadow-soft); } .input--date-picker__trigger:focus-visible { box-shadow: var(--focus-ring-subtle); transform: translateY(var(--lift-subtle)); } /* Date field selector (min-width for readability) */ .date-field-selector { min-width: var(--width-160px); font-size: var(--font-size-12); } .date-picker-error-container { flex: 1; } .input__dropdown:focus { outline: none; } /* Generic overlay used to close dropdowns when clicking outside */ .dropdown-overlay { position: fixed; inset: 0; background: transparent; z-index: calc(var(--z-dropdown) - 1); } /* Dropdown list and items */ .input__dropdown-list { display: flex; flex-direction: column; } .input__dropdown-item { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-0-5px) var(--space-1-5px); border: none; background: transparent; border-radius: var(--radius-standard); cursor: pointer; text-align: left; transition: background-color 0.15s; font: inherit; color: var(--text-primary); line-height: var(--line-height-normal); } /* Divider between items, similar to sidebar separators */ .input__dropdown-item:not(:first-child) { border-top: var(--input-border-width-thin) solid var(--input-border); } .input__dropdown-item:hover { background: var(--white-glass-faint-10); } .input__dropdown-item:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--input-border-width-md) var(--vibrant-teal); } .input__dropdown-icon { flex-shrink: 0; color: var(--text-secondary); } .input__dropdown-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Value text inside searchable select - prevent wrapping and handle overflow */ .input__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* Allow flex item to shrink below content size */ } /* Chevron icon - prevent shrinking */ .input__chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--size-12px); height: var(--size-12px); line-height: 0; transition: transform var(--animation-quick) var(--easing-smooth); } /* Rotate chevron when dropdown is open */ .input__chevron--open { transform: rotate(180deg); } /* Clear button for inputs */ .input__clear-button { position: absolute; right: var(--space-1px); top: var(--size-50pct); transform: translateY(var(--transform-nudge)); display: flex; align-items: center; justify-content: center; width: var(--size-56px); height: var(--size-56px); padding: 0; border: none; border-radius: var(--radius-circle); background-color: transparent; color: var(--soft-slate); cursor: pointer; transition: background-color var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth); } .input__clear-button:hover { background-color: var(--white-glass-faint-10); color: var(--text-secondary); } .input__clear:hover { background-color: var(--white-glass-faint-10); color: var(--text-secondary); } .input__clear-button:active { background-color: var(--teal-glass-light-20); color: var(--text-primary); } .input__clear:active { background-color: var(--teal-glass-light-20); color: var(--text-primary); } /* Inline clear control for select triggers (sits next to caret) */ .input__clear { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-0); width: var(--input-height); height: var(--input-height); min-width: var(--input-height); min-height: var(--input-height); padding: var(--space-0); border: none; border-radius: var(--radius-standard); font-weight: var(--weight-semibold); font-size: var(--font-size-12); font-family: var(--font-family-primary); line-height: var(--line-height-tight); text-decoration: none; white-space: nowrap; background: transparent; color: var(--text-color-primary); box-shadow: none; cursor: pointer; transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } .input__clear-button:focus-visible { outline: var(--input-border-width-md) solid var(--vibrant-teal); outline-offset: var(--space-0-5px); } .input__clear:focus-visible { outline: var(--input-border-width-md) solid var(--vibrant-teal); outline-offset: var(--space-0-5px); } /* ═══════════════════════════════════════════════════════════════════════════ SEARCHABLE SELECT / DROPDOWN MENUS (used by impersonation "View As" dropdown and other async selects) ══════════════════════════════════════════════════════════════════════════ */ /* Visual container for dropdown menus - matches card surface styling */ .input--select__menu { z-index: var(--z-dropdown); background: linear-gradient( to bottom, var(--white), var(--white-glass-frosted-90) ); backdrop-filter: var(--backdrop-glass-light); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--card-border); box-shadow: var(--shadow-surface-high); padding: var(--space-9px); max-height: min(var(--height-400px), calc(100vh - 24px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; transition: border-color var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth); } .input--select__menu:focus-within { border-color: var(--deep-teal); box-shadow: var(--shadow-surface-high), var(--focus-ring-subtle); } /* Dropdown menu positioning modifiers - handled by components */ /* Portal container for portaled dropdowns */ .input__dropdown-portal { position: fixed; z-index: var(--z-topmost); visibility: hidden; pointer-events: auto; /* set inline by JS based on trigger position */ /* Let content determine width; portal only handles positioning */ width: auto; min-width: auto; /* Shrink to fit content, no forced height */ height: auto; max-height: calc(100vh - 16px); overflow: visible; } .pac-container { z-index: var(--z-topmost); font: inherit; } /* When rendered in a portal (DropdownSurface), constrain menu height so long lists scroll. */ .input__dropdown--in-portal { max-height: min(var(--height-400px), calc(100vh - 16px)); overflow-y: auto; } /* Impersonation ("View As") dropdown - sidebar-inspired menu layout */ .impersonation-menu { display: flex; flex-direction: column; gap: 0; width: var(--size-100pct); } .input__dropdown--impersonation { min-width: auto; background: var(--card-surface); border-color: var(--card-border); box-shadow: var(--shadow-surface-high); } .input__dropdown-sticky { position: sticky; top: 0; z-index: calc(var(--z-sticky) + 1); background: var(--white-glass-frosted-90); box-shadow: var(--shadow-divider-bottom); } .impersonation-menu__option { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-1-5px); width: var(--size-100pct); } .impersonation-menu__option-text { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } .ba-forms-page__nav-item-text { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } .impersonation-menu__meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-5px); width: var(--size-100pct); } .impersonation-menu__email { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .impersonation-menu__status-badge { flex-shrink: 0; display: inline-flex; align-items: center; padding: var(--space-0-5px) var(--space-1px); border-radius: var(--radius-pill); font-size: var(--font-size-12); font-weight: var(--weight-medium); letter-spacing: var(--tracking-md); color: var(--text-secondary); background: var(--white-glass-faint-10); border: var(--input-border-width-thin) solid var(--white-glass-faint-10); } .impersonation-menu__role-chip { display: inline-flex; align-items: center; justify-content: center; width: var(--size-32px); height: var(--size-32px); border-radius: var(--radius-standard); background: var(--white-glass-faint-10); border: var(--input-border-width-thin) solid var(--white-glass-faint-10); color: var(--text-secondary); flex-shrink: 0; margin-top: var(--space-0-5px); } .impersonation-menu__option-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; margin-top: var(--space-0-5px); } /* Date picker portals don't constrain width - calendar sizes naturally */ .input__dropdown-portal--date-picker { width: auto; } /* Wider dropdown surface (used when wide=true) */ .input__dropdown-portal--wide { width: var(--width-320px); min-width: var(--width-320px); } /* Ensure portaled dropdown menus render as opaque cards above tables */ .input--select__menu--portal { background: var(--input-background); border-color: var(--input-border); box-shadow: var(--shadow-surface-high); padding: var(--space-9px); } /* Dropdown header section */ .input__dropdown-header { padding: var(--space-1-5px) var(--space-9px); border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20); background: var(--white-glass-faint-10); position: sticky; top: 0; z-index: 1; backdrop-filter: var(--backdrop-glass-light); box-shadow: var(--shadow-divider-bottom); display: flex; align-items: center; line-height: var(--line-height-tight); } /* Caption text in dropdown header */ .input__dropdown-caption { font-size: var(--font-size-12); color: var(--medium-slate); padding: var(--space-1px) var(--space-9px) var(--space-1-5px); } /* Dropdown section container */ .input__dropdown-section { padding: var(--space-1px) 0; } .input__dropdown-section[role='separator'] { padding: 0; margin: var(--space-1px) 0; } /* Search input inside dropdown */ .input__dropdown-search { width: var(--size-100pct); margin-bottom: var(--space-0); padding: var(--space-1-5px) var(--space-1-5px); border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20); background: var(--white-glass-faint-10); } /* Multi-select action row (Select all / Clear) */ .input__dropdown-actions { padding: var(--space-1px) var(--space-1-5px); border-bottom: var(--input-border-width-thin) solid var(--white-glass-faint-10); background: var(--white-glass-faint-10); } /* Error message in dropdown */ .input__dropdown-error { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); color: var(--dark-red); font-size: var(--font-size-12); } /* Loading state in dropdown */ .input__dropdown-loading { padding: var(--space-9px); text-align: center; color: var(--medium-slate); font-size: var(--font-size-12); } /* Scrollable list container for options */ .input__options { display: flex; flex-direction: column; max-height: var(--height-400px); overflow-y: auto; } .input--select__menu-options { display: flex; flex-direction: column; gap: var(--space-0-5px); max-height: none; overflow: visible; } /* Generic dropdown / context menu items (NOT select options) */ .menu__item { width: var(--size-100pct); padding: var(--space-1-5px) var(--space-9px); /* Minimum tap target; allow multi-line content to expand naturally. */ min-height: var(--input-height); height: auto; text-align: left; border: none; /* Subtle row surface so menus feel less stark and rows read as discrete items. */ background: linear-gradient( to bottom, var(--white-glass-faint-10), transparent ); border: var(--input-border-width-thin) solid var(--slate-glass-light-20); color: var(--text-primary); font-size: var(--font-size-13); font-weight: var(--weight-normal); cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-1-5px); border-radius: var(--radius-standard); transition: background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } /* Break rows apart visually (card-like list rows). */ .menu__item:not(:first-child) { margin-top: var(--space-0-5px); } .menu__item:focus-visible { outline: none; background: var(--white-glass-visible-15); box-shadow: var(--focus-ring-subtle); } .menu__item:disabled { opacity: 0.55; cursor: not-allowed; } .input__option--disabled { opacity: 0.55; cursor: not-allowed; } .menu__item:disabled:hover { background: transparent; border-color: var(--slate-glass-light-20); color: var(--text-primary); } .menu__item:hover { background: var(--white-glass-visible-15); border-color: var(--white-glass-visible-15); color: var(--vibrant-teal); } .menu__item--selected { background: var(--white-glass-frosted-90); box-shadow: var(--shadow-glass-soft); font-weight: var(--weight-medium); border-color: var(--teal-glass-soft-12); color: var(--vibrant-teal); } .menu__item--selected:focus-visible { box-shadow: var(--shadow-glass-soft), var(--focus-ring-subtle); } @media (prefers-reduced-motion: reduce) { .menu__item { transition: none; } } .menu__item--danger { color: var(--strong-red); } .menu__item--danger:hover { background: var(--red-glass-visible-14); color: var(--dark-red); } .input__option--danger:hover { background: var(--red-glass-visible-14); color: var(--dark-red); } .menu__item--success { color: var(--vibrant-teal); } .menu__item--success:hover { background: var(--teal-glass-light-20); color: var(--strong-teal); } .input__option--success:hover { background: var(--teal-glass-light-20); color: var(--strong-teal); } .menu__item-content { display: flex; align-items: center; gap: var(--space-1px); flex: 1 1 auto; min-width: 0; } .menu__item-icon { width: var(--size-16px); height: var(--size-16px); min-width: var(--size-16px); min-height: var(--size-16px); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Class injected onto the SVG icon element by MenuItemContent.withIconClass() */ .menu__item-icon__svg { width: var(--size-100pct); height: var(--size-100pct); display: block; stroke: currentColor; } .menu__item-label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-1-5px); } .menu__item-label-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; } /* Two-line menu item: stacks label on top, caption below */ .menu__item-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--size-2px); flex: 1; min-width: 0; } /* Trailing adornment pushed to the far right of the item */ .menu__item-end { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; } /* Leading adornment (dot, icon) before item body */ .menu__item-start { flex-shrink: 0; display: flex; align-items: center; margin-right: var(--space-1px); } /* Inline notice row (icon + text) — muted, non-error tone */ .menu__notice { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); font-size: var(--font-size-12); color: var(--medium-slate); } /* Layout primitives for dropdown content — mirrors ModalRow / ModalStack */ .menu__row { display: flex; align-items: center; gap: var(--space-1-5px); width: var(--size-100pct); } .menu__row--between { justify-content: space-between; } .menu__row--end { justify-content: flex-end; } .menu__item-label-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-0-5px); min-width: 0; } .menu__item-label-title { width: var(--size-100pct); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu__item-label-desc { width: var(--size-100pct); min-width: 0; font-size: var(--font-size-12); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu__item-badges { flex-shrink: 0; margin-inline-start: var(--space-1-5px); } /* Quick emoji reaction row — iMessage-style tapback bar at the top of a message action menu */ .menu__emoji-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-0-5px); padding: var(--space-1px) var(--space-1-5px); border-bottom: var(--input-border-width-thin) solid var(--teal-dark-glass-clear-18); } .menu__emoji-btn { background: none; width: var(--size-44px); height: var(--size-44px); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: var(--size-1-5rem); line-height: 1; transition: background var(--animation-quick), transform var(--animation-quick); flex-shrink: 0; } .bar-top-n { display: flex; flex-direction: column; gap: var(--space-1px); } .bar-top-n__item { width: var(--size-100pct); text-align: start; background: none; border: 0; padding: var(--space-1px) 0; } @media (min-width: 1024px) { .menu__emoji-btn { width: var(--size-36px); height: var(--size-36px); } } .menu__emoji-btn:hover { background: var(--light-slate); transform: scale(1.2); } .menu__emoji-btn:focus-visible { outline: var(--input-border-width-thin) solid var(--deep-teal); outline-offset: var(--size-2px); } .menu__emoji-btn:active { transform: scale(0.95); } .input__dropdown--dense-menu { padding: var(--space-1px); } /* Individual option buttons - cohesive with sidebar and card styling */ .input__option { position: relative; width: var(--size-100pct); padding: var(--space-1-5px) var(--space-9px); text-align: left; border: none; background: transparent; color: var(--text-primary); font-size: var(--font-size-14); font-weight: var(--weight-normal); cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-1-5px); border-radius: var(--radius-standard); border-top: var(--size-1px) solid transparent; border-image: linear-gradient( 90deg, transparent 0%, var(--brand-teal-glass-thick-60) 15%, var(--brand-teal-glass-opaque-80) var(--size-50pct), var(--brand-teal-glass-thick-60) 85%, transparent var(--size-100pct) ) 1; transition: background-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } /* No divider on the first option */ .input__option:first-child { border-top: none; border-image: none; } /* Soft hover effect with glass overlay - matches sidebar */ .input__option:hover { background: var(--white-glass-visible-15); color: var(--vibrant-teal); } .input__option--highlighted { background: var(--white-glass-visible-15); } .input__option--selected { background: var(--white-glass-frosted-90); box-shadow: var(--shadow-glass-soft); font-weight: var(--weight-medium); color: var(--vibrant-teal); } .input__option--disabled:hover { background: transparent; color: var(--text-primary); } /* Danger variant for destructive actions */ .input__option--danger { color: var(--strong-red); } /* Success variant for positive actions */ .input__option--success { color: var(--vibrant-teal); } .input__no-results { padding: var(--space-9px); font-size: var(--font-size-13); font-weight: var(--weight-normal); color: var(--text-secondary); text-align: center; } .input__error-detail { margin-top: var(--space-0-5px); font-size: var(--font-size-12); opacity: 0.8; } .input--select__menu-header { padding: var(--space-1-5px) var(--space-9px); margin-bottom: var(--space-1px); border-bottom: var(--input-border-width-thin) solid var(--input-border); font-size: var(--font-size-13); font-weight: var(--weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .input--select__menu-caption { margin-top: var(--space-0-5px); font-size: var(--font-size-12); color: var(--soft-slate); } .input--select__menu-section { padding: var(--space-0-5px) 0; } .input--select__menu-search-input { position: sticky; top: 0; z-index: 1; width: var(--size-100pct); margin-bottom: var(--space-1px); padding: var(--space-0-5px) 0 var(--space-1px); background: linear-gradient( to bottom, var(--white), var(--white-glass-frosted-90) ); backdrop-filter: var(--backdrop-glass-light); border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20); } .input--select__menu-error { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); color: var(--strong-red); font-size: var(--font-size-13); } .input--select__menu-loading { padding: var(--space-9px); text-align: center; font-size: var(--font-size-13); color: var(--text-secondary); } .input--select__menu-footer { padding: var(--space-1-5px) var(--space-9px); margin-top: var(--space-1px); border-top: var(--input-border-width-thin) solid var(--input-border); font-size: var(--font-size-12); color: var(--soft-slate); } .input--select__menu-empty { padding: var(--space-1-5px) var(--space-9px); font-size: var(--font-size-12); color: var(--medium-slate); } .input--select__menu-footer { padding: var(--space-1-5px) var(--space-9px); border-top: var(--input-border-width-thin) solid var(--slate-glass-light-20); } .input--select__menu-footer-note { display: flex; align-items: center; gap: var(--space-1px); font-size: var(--font-size-12); color: var(--medium-slate); } /* Section labels in dropdowns */ .text-label-dense--dropdown { padding: var(--space-1px) var(--space-9px); font-size: var(--font-size-12); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--soft-slate); } /* ═══════════════════════════════════════════════════════════════════════════ FIELD - Reusable field wrapper block (label + input + validation) Standard BEM: Separate from .form (layout) and .input (control) Minimal API: - Layout: stacked (default) or inline via .field--inline - State: error via .field--error - Width: full by default via .field__control; avoid control-level width modifiers Notes: - Use .field--inline when you want a single-row layout (label + control on one line). Default stacked keeps label above the control. - Width is always owned by .field__control; controls inside expand to 100%. ══════════════════════════════════════════════════════════════════════════ */ /* Field inline layout: label + control on one row */ .field--inline { flex-direction: row; align-items: center; gap: var(--space-1-5px); width: auto; } .field__inline-label { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-primary); } .field__label--inline { margin-bottom: 0; } .field__control--inline { width: auto; } .field--error { --form-border-color: var(--strong-sunset); --field-outlined-label-color: var(--strong-sunset); } /* Removed outlined-field variant path. Input now owns the border globally. */ .field__label { display: inline-flex; align-items: center; gap: var(--space-0-5px); margin-bottom: var(--field-label-margin-bottom); font-size: var(--font-size-12); font-weight: var(--weight-medium); line-height: var(--line-height-normal); white-space: nowrap; max-width: var(--size-100pct); } .field__label-indicator { display: inline-block; padding: 0 var(--space-0-5px); border-radius: var(--radius-standard); font-size: var(--font-size-12); line-height: var(--line-height-110pct); font-variant-caps: all-small-caps; letter-spacing: 0.03em; flex: 0 0 auto; } .field__label-indicator--read-only { color: var(--text-secondary); background: var(--surface-hover-subtle); border: var(--input-border-width-thin) dashed var(--input-border); } .field--floating { position: relative; } .field__label--floating { position: absolute; top: var(--size-50pct); left: var(--space-9px); margin: 0; padding: 0 var(--space-0-5px); background: var(--white); border-radius: var(--radius-standard); color: var(--medium-slate); font-size: var(--font-size-11); font-weight: var(--weight-medium); line-height: var(--line-height-110pct); transform-origin: left center; transform: translateY(-50%); pointer-events: none; transition: transform var(--animation-quick) cubic-bezier(0.2, 0.7, 0.2, 1), color var(--animation-quick) var(--easing-smooth); } .input--in-floating-field { padding-top: var(--space-12px); } .field__label--floating-active { transform: translateY(calc(-1 * var(--space-12px))) scale(0.9); color: var(--vibrant-teal); } /* AI Smart Fill badge (class-driven; cleared on first manual edit) */ .field__label--ai-filled::after { content: "AI"; display: inline-block; margin-left: var(--space-1px); padding: 0 var(--space-1px); border-radius: var(--radius-pill); font-size: var(--font-size-12); line-height: var(--line-height-comfortable); font-weight: var(--weight-semibold); color: var(--deep-teal); background: var(--pale-teal); border: var(--input-border-width-thin) solid var(--input-border); } /* Light-on-dark label variant for dark surfaces */ .field__label--light { color: var(--text-on-dark); } .field__required { color: var(--strong-red); margin-left: var(--space-0-5px); } /* Checkbox input element - use with .field--inline for horizontal layout */ .field__checkbox { display: inline-flex; align-items: center; gap: var(--space-1-5px); cursor: pointer; accent-color: var(--vibrant-teal); font-size: var(--font-size-12); font-weight: var(--weight-medium); line-height: var(--line-height-normal); width: auto; user-select: none; } /* description spacing: fires only when a Text element directly precedes the control */ .field__description { display: block; font-size: var(--font-size-12); color: var(--medium-slate); margin-bottom: var(--space-4px); } .field__error { display: block; font-size: var(--font-size-12); color: var(--strong-red); } .field__help { display: block; font-size: var(--font-size-12); color: var(--medium-slate); } .field__meta { min-height: var(--size-16px); margin-top: var(--space-1px); } .field__meta--reserved { min-height: var(--size-20px); } .field__meta-placeholder { display: block; width: var(--size-100pct); min-height: var(--size-16px); } /* Prefix row — symbol or short text to the left of an input (e.g. currency $ sign) */ .field__prefix-row { display: flex; align-items: center; gap: var(--space-2); } .field__prefix { flex-shrink: 0; font-size: var(--font-size-13); color: var(--color-text-muted); } /* Control container inside field - holds the actual block */ .field__control-main { flex: 1 1 auto; min-width: 0; display: block; align-items: stretch; min-height: auto; padding-inline: 0; } .field__control-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1px); margin-left: var(--space-1px); } /* NOTE: width helpers for data--*-full have been deprecated. * Use semantic width classes from field-and-cell-widths.css instead. */ /* Inline control variant: shrink to content */ /* Legacy: prefer using .field--inline with flex growth rules */ .field__control--inline { width: auto; display: inline-block; } /* Dense fields trim vertical space */ /* Former dense variant removed */ /* ═══════════════════════════════════════════════════════════════════════════ FORM LAYOUT PATTERNS ══════════════════════════════════════════════════════════════════════════ */ .form { width: var(--size-100pct); min-width: 0; padding: var(--space-12px); } .form__footer { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-9px); margin-top: 0; min-width: 0; width: var(--size-100pct); } .form__footer-row { min-width: 0; flex: 0 0 auto; margin-block: var(--space-9px); } .form__footer--with-gap-rows { gap: calc(var(--button-height) + (var(--space-9px) * 2)); } .form--dense { width: var(--size-100pct); } .form--dense__form-field { margin-bottom: var(--space-1-5px); } .form__section { margin-bottom: var(--_form-section-mb); padding: var(--_form-section-padding); border: none; border-radius: var(--_form-section-border-radius); background: var(--_form-section-bg); box-shadow: none; } .form__section-heading { display: var(--_form-section-heading-display); align-items: center; gap: var(--space-1-5px); margin-bottom: var(--space-1-5px); padding-bottom: 0; border-bottom: none; box-shadow: none; } .form__section-heading--with-leading-icon { align-items: flex-start; gap: var(--space-9px); } .form__section-heading--with-rule { padding-bottom: var(--space-5px); border-bottom: var(--input-border-width-thin) solid var(--soft-slate); } .form__section-meta { display: flex; flex-direction: column; gap: var(--space-1px); flex: 1 1 auto; min-width: 0; } .form__section-heading__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--radius-full); overflow: hidden; line-height: 0; width: var(--size-30px); height: var(--size-30px); color: var(--deep-teal); background: var(--palest-teal); border: var(--input-border-width-thin) solid var(--light-teal); } .form__section-heading__icon-svg { width: var(--size-14px); height: var(--size-14px); display: block; } .form__section-heading--outlined-badge { position: absolute; top: 0; left: calc(var(--radius-standard) + var(--space-0-5px)); transform: translateY(-50%); display: inline-flex; align-items: center; width: auto; margin: 0; padding: 0 var(--space-3px); min-height: 0; background: var(--_form-section-bg); z-index: 1; } .form__section-meta--outlined-badge { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; border: none; border-radius: 0; background: transparent; text-transform: none; letter-spacing: 0.02em; font-variant-caps: small-caps; } .form__section--outlined-badge { position: relative; /* Reserve room since heading is taken out of normal flow. Extra clearance ensures floating labels on the first row of fields do not overlap the section badge when they rise above their input border. */ padding-top: calc(var(--space-12px) + var(--space-1-5px)); } /* First outlined section sits directly under headers. Add clearance so the floating badge title never collides with header chrome. */ .form__section--outlined-badge:first-child { margin-top: var(--space-9px); } @media (max-width: 639px) { .form__section--outlined-badge { padding: var(--space-9px); padding-top: var(--space-12px); } .form__section--outlined-badge:first-child { margin-top: 0; } } .form__section-meta-text--outlined-badge { font-size: var(--font-size-11); font-weight: var(--weight-semibold); line-height: 1; display: inline-flex; align-items: center; } /* Styling for this context moved to text--section-label-badge variant in typography-utilities.css */ .form__section-divider { /* Make section breaks more data-dense than global defaults. */ display: var(--form-section-divider-display); margin: var(--space-1-5px) 0; } .form__section-instructions { display: var(--_form-section-instructions-display); width: var(--size-100pct); margin-bottom: var(--space-1-5px); } .form__section-body { width: var(--size-100pct); display: grid; grid-template-columns: var(--_form-section-body-cols); gap: var(--_form-section-body-gap); container-type: inline-size; } .form__instructions { width: var(--size-100pct); margin-bottom: var(--space-1-5px); } .form__instructions-list { margin: 0; padding-inline-start: var(--size-1-1rem); display: grid; gap: var(--size-0-25rem); width: var(--size-100pct); } .form__instructions-item { margin: 0; } .form__instructions-item:last-child { margin-bottom: 0; } .form__progress { display: flex; flex-direction: column; gap: var(--space-1px); width: var(--size-100pct); } .form__page-header { display: flex; flex-direction: column; gap: var(--space-1px); width: var(--size-100pct); } .form__status { width: var(--size-100pct); } .form__row { display: grid; grid-template-columns: var(--_form-section-body-cols); gap: var(--_form-section-body-gap); margin-bottom: 0; /* Ensure the row stretches to the available width so fields can wrap naturally. */ width: var(--size-100pct); min-width: 0; align-self: stretch; justify-content: flex-start; } .form__row--flex { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--space-9px); } .form__row--flex-layout { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--space-9px); } .form__row--flex-layout { width: var(--size-100pct); min-width: 0; align-self: stretch; } .form__row-item { grid-column: var( --_form-row-item-semantic-col, span round( up, calc( var(--form-row-item-grid-width, var(--width, var(--form-grid-col-width))) / var(--form-grid-col-width) ) ) ); min-width: 0; } /* Mobile (≤600px): always full width */ @container (max-width: 600px) { .form__row { grid-template-columns: minmax(0, 1fr); } .form__row-item { grid-column: span 1; } } .form__row-field { grid-column: var(--form-row-field-grid-column, span 12); width: var(--form-row-field-width, auto); min-width: 0; max-width: var(--form-row-field-max-width, none); } @media (max-width: 639px) { .form__row-field { grid-column: var(--form-row-field-grid-column-mobile, var(--form-row-field-grid-column, span 12)); } } .form__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-9px); margin-top: var(--space-18px); padding-top: var(--space-18px); border-top: var(--input-border-width-thin) solid var(--soft-slate); grid-column: var(--form-actions-gc); } .form__actions--row { flex-direction: row; align-items: initial; padding-top: 0; border-top: none; } /* ══════════════════════════════════════════════════════════════════════════ BA PROFILE MAP (Google Maps) ══════════════════════════════════════════════════════════════════════════ */ .ba-profile__map-instructions-icon { display: inline-flex; } .ba-profile__map-container { height: var(--height-400px); width: var(--size-100pct); margin-top: var(--space-12px); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); overflow: hidden; } .ba-profile__map { height: var(--size-100pct); width: var(--size-100pct); } .ba-profile__map-instructions { margin-top: var(--space-1-5px); display: flex; align-items: center; gap: var(--space-1-5px); } /* ══════════════════════════════════════════════════════════════════════════ ADDRESS AUTOCOMPLETE ══════════════════════════════════════════════════════════════════════════ */ .address-autocomplete { width: var(--size-100pct); } .address-autocomplete__icon { display: inline-flex; color: var(--medium-slate); } .form__actions--row-right { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); justify-content: flex-end; } .form__actions--row-between { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-9px); justify-content: space-between; } /* Tight variant: one-class BEM alternative to stacked mt-tight */ .form__actions--tight { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5px); margin-top: var(--space-1-5px); padding-top: var(--space-0); border-top: none; } /* ═══════════════════════════════════════════════════════════════════════════ PASSWORD INPUT WITH TOGGLE ══════════════════════════════════════════════════════════════════════════ */ .input__wrapper { position: relative; display: flex; align-items: center; width: var(--size-100pct); } .input__toggle-button { position: absolute; right: var(--space-1px); background: none; border: none; cursor: pointer; padding: var(--space-1-5px); color: var(--medium-slate); display: flex; align-items: center; justify-content: center; width: var(--size-36px); height: var(--size-36px); border-radius: var(--radius-pill); } .input__toggle-button:hover { color: var(--deepest-slate); background: var(--white-glass-light-20); } /* Icon inside toggle button — class applied to the icon element in the input component. */ .input__toggle-button__icon { width: var(--size-16px); height: var(--size-16px); display: block; } /* Textarea emoji picker (dense Material-inspired affordance) */ .input__emoji-button { position: static; width: var(--size-28px); height: var(--size-28px); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-pill); background: var(--white-glass-full-95); color: var(--medium-slate); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-subtle); margin-top: var(--space-0-5px); } .input__emoji-button:hover { color: var(--deepest-slate); background: var(--white); } .input__emoji-button__icon { width: var(--size-14px); height: var(--size-14px); } .input__emoji-popover { position: static; width: var(--size-180px); padding: var(--space-1px); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); background: var(--white-glass-full-95); box-shadow: var(--shadow-surface-high); z-index: var(--z-popover); margin-top: var(--space-0-5px); } .input__emoji-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-0-5px); } .input__emoji-option { border: none; background: transparent; border-radius: var(--radius-standard); min-height: var(--size-24px); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--font-size-14); line-height: 1; } .input__emoji-option:hover { background: var(--white-glass-light-20); } .switch-row { display: inline-flex; align-items: center; gap: var(--space-9px); flex-wrap: wrap; justify-content: flex-end; max-width: var(--size-100pct); } .switch-row__group { display: inline-flex; align-items: center; gap: var(--space-9px); flex-wrap: nowrap; justify-content: center; min-width: 0; max-width: var(--size-100pct); } .switch-row--stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5px); } .input--switch { position: relative; display: inline-block; width: var(--switch-track-width); height: var(--switch-track-height); flex-shrink: 0; cursor: pointer; } .input--switch__input { position: absolute; opacity: 0; width: 0; height: 0; } .input--switch__track { display: block; width: var(--size-100pct); height: var(--size-100pct); border-radius: var(--radius-pill); border: var(--input-border-width-thin) solid var(--input-border); background: var(--input-background); padding: 0; min-height: auto; backdrop-filter: var(--blur-md); transition: background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .input--switch:focus-within { box-shadow: var(--focus-ring-subtle); } .input--switch__track--checked { background: var(--input-background); border-color: var(--input-border); } .input--switch__track--disabled { opacity: 0.7; } .input--switch__thumb { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; width: var(--switch-thumb-size); height: var(--switch-thumb-size); border-radius: var(--radius-pill); border: var(--input-border-width-thin) solid var(--input-border); background: var(--vibrant-teal); color: var(--text-on-primary); padding: 0; min-height: auto; top: var(--position-center-block); left: var(--switch-thumb-offset); transform: translateY(var(--offset-center-block)); transition: all var(--animation-quick) var(--easing-smooth); } .input--switch__thumb--checked { background: var(--text-on-primary); border-color: var(--input-border); color: var(--vibrant-teal); left: var(--switch-thumb-offset-checked); } /* Field shell utilities - visual styling only () Note: Structural .field class now lives in form-and-input-utilities.css These are just visual variants for applying status colors */ /* Neutral field shell: aligns with canonical .input tokens */ .field--shell { position: relative; border: var(--input-border-width-thin) solid var(--soft-gray); border-radius: var(--radius-standard); background: var(--input-background); padding: var(--space-9px); } /* Floating label treatment inside shell */ .field__label--shell { position: absolute; top: 0; left: var(--space-9px); transform: translateY(var(--transform-nudge)); margin-bottom: 0; padding-inline: var(--space-1px); font-size: var(--font-size-11); font-weight: var(--weight-medium); background: var(--page-bg-surface); } .field__control--shell { margin-top: var(--space-1px); } /* Status field shell variants (visual only; combine with .ring-* utilities for focus) */ .field--shell-danger { border-color: var(--strong-red); } .field--shell-success { border-color: var(--accent-teal); } .field--shell-warning { border-color: var(--strong-sunset); } /** * Public Form Structural Styling * Layout and structure for public-facing forms (booking, payment, client intake) * Uses existing .input, .field, .form base blocks from form-and-input-utilities.css * Only adds structural BEM styling for Form.tsx component layout */ /* ═══════════════════════════════════════════════════════════════════════════ FORM WRAPPER & CONTAINER ══════════════════════════════════════════════════════════════════════════ */ /* Override narrow public form wrapper - already defined in form-and-input-utilities.css */ .public-form__wrapper { max-width: var(--breakpoint-tablet); margin-inline: auto; padding: var(--space-18px) var(--space-12px); box-sizing: border-box; min-height: calc(100vh - var(--size-64px)); } /* Main form section card */ .form-section { background: var(--white-glass-frosted-90); border-radius: var(--radius-standard); margin-bottom: var(--space-18px); box-shadow: var(--shadow-soft); overflow: hidden; border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); } /* ═══════════════════════════════════════════════════════════════════════════ SECTION HEADER ══════════════════════════════════════════════════════════════════════════ */ .section-header { padding: var(--space-12px) var(--space-18px); background: linear-gradient(135deg, var(--palest-teal), var(--pale-teal)); border-bottom: var(--input-border-width-md) solid var(--light-teal); display: flex; align-items: center; justify-content: space-between; gap: var(--space-9px); } .section-header-main { display: flex; align-items: flex-start; gap: var(--space-9px); flex: 1; } .section-header__title { font-weight: var(--weight-normal); line-height: var(--line-height-relaxed); } /* Collapsible toggle button */ .section-toggle { background: none; border: none; padding: var(--space-1px); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--animation-quick) var(--easing-smooth); flex-shrink: 0; } .section-toggle:hover { transform: scale(1.1); } .section-caret { width: var(--size-20px); height: var(--size-20px); border-right: var(--input-border-width-md) solid var(--deep-teal); border-bottom: var(--input-border-width-md) solid var(--deep-teal); transform: rotate(45deg); transition: transform var(--animation-quick) var(--easing-smooth); } .section-caret--open { transform: rotate(-135deg); } .section-actions { display: flex; gap: var(--space-1-5px); align-items: center; } /* ═══════════════════════════════════════════════════════════════════════════ INSTRUCTIONS BLOCK ══════════════════════════════════════════════════════════════════════════ */ .section-instructions { padding: var(--space-12px) var(--space-18px); background: var(--white-glass-opaque-80); border-bottom: var(--input-border-width-thin) solid var(--teal-glass-faint-10); border-radius: 0; } .form-instructions { padding: var(--space-12px) var(--space-18px); background: var(--white-glass-opaque-80); border-bottom: var(--input-border-width-thin) solid var(--teal-glass-faint-10); border-radius: 0; } /* Instruction block text — apply to

elements inside instructions */ .form-instructions__text { font-size: var(--font-size-14); color: var(--text-secondary); margin: 0; line-height: var(--line-height-relaxed); } /* Instruction block layout row */ .form-instructions__row { gap: var(--space-9px); align-items: center; } /* Instruction block icon */ .form-instructions__icon { color: var(--vibrant-teal); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION BODY & FIELD LAYOUT ══════════════════════════════════════════════════════════════════════════ */ .section-body { padding: var(--space-18px); } /* ═══════════════════════════════════════════════════════════════════════════ FIELD ROWS - Responsive Grid Layout with HStack Nesting Support Best of both worlds: predictable grid structure + flexible field grouping Usage: - Use field-row for the overall row (becomes 1→2→3 col grid) - Put individual fields directly in the row for full grid cells - Use .hstack inside a grid cell to group related fields (e.g., City + State) Example:

...
...
...
...
══════════════════════════════════════════════════════════════════════════ */ .field-row { display: grid; grid-template-columns: 1fr; /* Mobile: 1 column */ gap: var(--space-12px); margin-bottom: var(--space-12px); align-items: flex-start; } /* Tablet (640px+): 2 columns */ @media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, 1fr); } } /* Desktop (1024px+): 3 columns with more breathing room */ @media (min-width: 1024px) { .field-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-18px); } } /* Last row shouldn't have bottom margin */ .field-row:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ PUBLIC FORM ENHANCEMENTS Uses existing .field and .input base blocks, adds public-form-specific sizing ══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SECTION FOOTER & FORM FOOTER ══════════════════════════════════════════════════════════════════════════ */ .section-footer { padding: var(--space-18px); background: var(--white-glass-visible-15); border-top: var(--input-border-width-thin) solid var(--teal-glass-faint-10); } .form-footer { padding: var(--space-18px); background: var(--white-glass-visible-15); border-top: var(--input-border-width-thin) solid var(--teal-glass-faint-10); } .form-footer { border-radius: 0 0 var(--radius-standard) var(--radius-standard); } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 639px) { .public-form__wrapper { padding: var(--space-12px) var(--space-9px); } .section-header { padding: var(--space-9px) var(--space-12px); } .section-body { padding: var(--space-12px); } .section-footer { padding: var(--space-12px); } .form-footer { padding: var(--space-12px); } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE ACCESSIBILITY OVERRIDES ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* iOS Safari auto-zooms the viewport when any has font-size < 16px. This is disruptive and breaks layout. Fix: force 16px on mobile. Desktop keeps the dense 12px size unchanged. */ .input { font-size: var(--font-size-16); } /* Touch target: standard inputs should be at least 44px tall on mobile (WCAG 2.5.5). */ .input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) { min-height: var(--touch-target-min); } /* Range filter labels: bump from 11px → 14px for readability on mobile */ .range-filter__bound { font-size: var(--font-size-mobile-sm); } /* Field labels: bump from 10-11px to 12px minimum on mobile */ .field__label { font-size: var(--font-size-mobile-2xs); } /* Checkbox: larger visual target on mobile (20px → 24px) */ .input--checkbox { --form-checkbox-size: var(--size-24px); } } /* ============================================================================ TIME INPUT — text field + AM/PM pill toggle ============================================================================ */ .input--time-wrapper { display: flex; align-items: stretch; gap: 0; width: var(--size-100pct); background: var(--input-background); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-subtle); overflow: hidden; min-height: var(--input-height); transition: all var(--animation-quick) var(--easing-smooth); } .input--time-wrapper:focus-within { border-color: var(--vibrant-teal); box-shadow: var(--focus-ring-subtle); transform: translateY(var(--lift-subtle)); } .input--time { flex: 1 1 0; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; border: none; box-shadow: none; background: transparent; border-radius: 0; } .input--time-wrapper--disabled { opacity: 0.5; pointer-events: none; } .input--time-ampm__toggle { flex-shrink: 0; min-width: var(--size-36px); height: auto; padding: 0 var(--space-1px); border: none; border-left: var(--input-border-width-thin) solid var(--input-border); outline: none; background: var(--surface-hover-subtle); color: var(--text-secondary); font-size: var(--font-size-12); font-weight: var(--weight-semibold); line-height: 1; cursor: pointer; } .input--time-ampm__toggle:hover { background: var(--light-slate); color: var(--text-primary); } .input--time-ampm__toggle:focus-visible { background: var(--teal-glass-faint-10); color: var(--text-primary); } /* ============================================================================ BA FORMS PAGE — split layout (nav left, content right) ============================================================================ */ .ba-forms-page { display: flex; align-items: flex-start; gap: var(--space-12px); height: var(--size-100pct); min-height: 0; } .ba-forms-page__nav { flex: 0 0 220px; display: flex; flex-direction: column; gap: var(--space-1px); padding: var(--space-1-5px); background: var(--card-surface); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-subtle); } .ba-forms-page__nav-item { display: flex; align-items: center; gap: var(--space-1-5px); width: var(--size-100pct); padding: var(--space-1-5px) var(--space-9px); border: none; border-radius: var(--radius-standard); background: transparent; cursor: pointer; text-align: left; color: var(--text-default); } .ba-forms-page__nav-item:hover { background: var(--light-slate); } .ba-forms-page__nav-item--active { background: var(--light-teal); color: var(--deep-teal); } .ba-forms-page__nav-item--active:hover { background: var(--teal-glass-light-20); } .ba-forms-page__nav-item--disabled { opacity: 0.5; cursor: default; } .ba-forms-page__content { flex: 1 1 0; min-width: 0; min-height: 0; } .ba-forms-page__empty { display: flex; align-items: center; justify-content: center; height: var(--size-100pct); min-height: var(--size-200px); } /* ── Select rich-option layout ───────────────────────────────────────────── */ /* Root wrapper — display:contents so it is invisible to layout consumers */ .select__root { display: contents; } /* Outer row: avatar + text column */ .select__rich-option-row { display: flex; align-items: center; gap: var(--space-9px); width: var(--size-100pct); } /* Text column inside the row */ .select__rich-option-text { display: flex; flex-direction: column; min-width: 0; } /* Primary label — truncates on overflow */ .select__rich-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Subtitle line — muted, smaller, also truncates */ .select__rich-option-subtitle { font-size: var(--font-size-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * 41-gradient-utilities.scss * ───────────────────────────────────────────────────────────────────────────── */ /* Teal gradients - vertical (solid) */ .gradient-teal-light { background: linear-gradient(var(--angle-vertical), var(--light-teal), var(--soft-teal), var(--medium-teal)); } .gradient-teal-medium { background: linear-gradient(var(--angle-vertical), var(--light-teal), var(--medium-teal), var(--strong-teal)); } .gradient-teal-dark { background: linear-gradient(var(--angle-vertical), var(--medium-teal), var(--strong-teal), var(--deep-teal)); } /* Teal gradients - diagonal */ .gradient-diagonal-teal-light { background: linear-gradient(var(--angle-diagonal), var(--pale-teal) var(--stop-start), var(--light-teal) var(--stop-mid), var(--medium-teal) var(--stop-end)); } .gradient-diagonal-teal-medium { background: linear-gradient(var(--angle-diagonal), var(--light-teal) var(--stop-start), var(--medium-teal) var(--stop-mid), var(--strong-teal) var(--stop-end)); } .gradient-diagonal-teal-dark { background: linear-gradient(var(--angle-diagonal), var(--medium-teal) var(--stop-start), var(--strong-teal) var(--stop-mid), var(--deep-teal) var(--stop-end)); } .gradient-diagonal-teal-fade { background: linear-gradient(var(--angle-diagonal), var(--teal-light-glass-light-24) var(--stop-start), var(--teal-dark-glass-light-20) var(--stop-mid), var(--teal-dark-glass-visible-16) var(--stop-end)); } /* Teal gradients - horizontal */ .gradient-horizontal-teal-medium { /* Soften non-active teal to reduce saturation for passive states */ background: linear-gradient( 90deg, var(--teal-glass-soft-12) 0%, var(--teal-glass-light-20) 50%, var(--teal-glass-soft-12) 100% ); } /* Teal gradients - vertical with alpha */ .gradient-vertical-teal-light { background: linear-gradient(var(--angle-vertical), var(--teal-light-glass-strong-36), var(--teal-light-glass-light-24), var(--teal-glass-soft-12)); } .gradient-vertical-teal-medium { background: linear-gradient(var(--angle-vertical), var(--teal-glass-medium-30) var(--stop-start), var(--teal-glass-light-20) var(--stop-end)); } .gradient-vertical-teal-dark { background: linear-gradient(var(--angle-vertical), var(--teal-dark-glass-heavy-40), var(--teal-dark-glass-strong-30), var(--teal-dark-glass-light-20)); } /* Radial gradients */ .gradient-radial-white-glow { background: radial-gradient(ellipse 140% 100% at 50% 0%, var(--white-glass-faint-10) var(--stop-start), var(--white-glass-bright-86) var(--stop-mid), transparent var(--stop-fade-far)); } .gradient-radial-teal-corner { background: radial-gradient(ellipse 40% 60% at 0% 0%, var(--teal-dark-glass-clear-18) var(--stop-start), transparent var(--stop-fade-far)); } /* Horizontal fade gradients for */ .gradient-horizontal-fade-white { background: linear-gradient( 90deg, transparent var(--stop-start), var(--white-glass-soft-12) var(--stop-near), var(--white-glass-soft-12) var(--stop-far), transparent var(--stop-end) ); } .gradient-horizontal-fade-subtle { background: linear-gradient( 90deg, transparent var(--stop-start), var(--soft-slate) var(--stop-near), var(--soft-slate) var(--stop-far), transparent var(--stop-end) ); } /* ========================================================================== GRID SEMANTICS Canonical grid layout patterns and variants ========================================================================== */ /* Base grid container */ .grid { display: grid; width: var(--size-100pct); max-width: var(--size-100pct); box-sizing: border-box; /* Enable container queries - grids adapt to their own width, not viewport */ container-type: inline-size; container-name: grid; } /* Column count variants - fixed (non-responsive) */ .grid--cols-1 { grid-template-columns: var(--grid-template-cols-1); } .grid--cols-2 { grid-template-columns: var(--grid-template-cols-2); } .grid--cols-3 { grid-template-columns: var(--grid-template-cols-3); } .grid--cols-4 { grid-template-columns: var(--grid-template-cols-4); } .grid--gap-tight { gap: var(--space-1-5px); } .grid--gap-sm { gap: var(--space-1-5px); } /* Combined modifier (max one modifier per base rule) */ .grid--cols-4-tight { grid-template-columns: var(--grid-template-cols-4); gap: var(--space-1-5px); } /* Additional column utilities from stack-utilities */ .grid--cols-12 { grid-template-columns: var(--grid-template-cols-12); } /* Responsive .md: / .lg: grid utilities have been deprecated. Prefer semantic grid variants on the grid block instead. */ /* Standard 3-column: stacks on mobile, 2 on tablet, 3 on Uses container queries (based on page content width by default). */ .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-base); } @container page-content (width >= 768px) { .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-tablet); } } @container page-content (width >= 1024px) { .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-desktop); } } @container page-content (width >= 1920px) { .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-widescreen); } } @container grid (width >= 768px) { .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-tablet); } } @container grid (width >= 1024px) { .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-desktop); } } @container grid (width >= 1920px) { .grid--responsive-3 { grid-template-columns: var(--grid-template-responsive-3-widescreen); } } /* Grid child column span utilities */ /* BEM grid item span variants */ .grid__item--span-1 { grid-column: span 1; } .grid__item--span-2 { grid-column: span 2; } .grid__item--span-3 { grid-column: span 3; } .grid__item--span-4 { grid-column: span 4; } .grid__item--span-full { grid-column: var(--grid-span-full-start) / var(--grid-span-full-end); } /* Dashboard tile span utilities (used by DraggableDashboard) */ .grid-col-span--2 { grid-column: span 2; } .grid-col-span--full { grid-column: var(--grid-span-full-start) / var(--grid-span-full-end); } /* Split layout: one-third + two-thirds columns (e.g. map + table, chat sidebar + main) */ .grid--split-1-3-2-3 { display: grid; grid-template-columns: var(--grid-template-cols-1) 2fr; gap: var(--space-12px); /* CRITICAL: Fill available height so chat content is visible */ width: var(--size-100pct); height: var(--size-100pct); min-height: 0; } /* Split layout: two-thirds + one-third columns (e.g. gallery + detail sidebar) */ .grid--split-2-3-1-3 { display: grid; grid-template-columns: 2fr var(--grid-template-cols-1); gap: var(--space-12px); /* CRITICAL: Fill available height */ width: var(--size-100pct); height: var(--size-100pct); min-height: 0; } /* Dashboard / draggable tiles grid */ .grid--dashboard-tiles { display: grid; grid-template-columns: var(--grid-template-dashboard-tiles-base); /* Rows must grow to the tallest tile's actual content height. */ grid-auto-rows: max-content; /* Pack tiles to avoid large "holes" when some tiles span multiple columns. */ grid-auto-flow: row dense; gap: var(--dashboard-grid-gap, var(--space-9px)); --dashboard-tile-min-height: 0; position: relative; z-index: var(--z-base); width: var(--size-100pct); max-width: var(--size-100pct); /* Child of the scroll owner must be content-sized so parent overflow can scroll. Flex-fill here collapses parent scroll range to near-zero (rubber-band wiggle). */ flex: 0 0 auto; min-height: max-content; /* Prevent a single implicit row from stretching to fill the container height. (Default grid `align-content: stretch` makes empty tiles look huge.) */ align-content: start; /* Tiles should fill their row track (so min-height floors are visible). */ align-items: stretch; box-sizing: border-box; margin-inline: 0; padding: var(--page-header-title-block-size) var(--dashboard-grid-pad, var(--space-9px)) var(--dashboard-grid-pad, var(--space-9px)); margin-top: 0; } .draggable-dashboard--scrollable::-webkit-scrollbar { width: var(--space-0-5px); height: var(--space-0-5px); } .draggable-dashboard--scrollable::-webkit-scrollbar-track { background: transparent; } .draggable-dashboard--scrollable::-webkit-scrollbar-thumb { background-color: var(--teal-glass-strong-40); border-radius: var(--radius-pill); opacity: 0; transition: opacity 0.2s ease; } .draggable-dashboard--scrollable:hover::-webkit-scrollbar-thumb { opacity: 1; } /* Dashboard shell: canonical query container + canonical scroll owner. */ .draggable-dashboard { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; scroll-padding-inline: var(--dashboard-grid-pad, var(--space-9px)); scrollbar-width: thin; scrollbar-color: var(--teal-glass-strong-40) transparent; /* Unified spacing: outside padding should match internal tile gaps. */ --dashboard-grid-gap: var(--space-9px); --dashboard-grid-pad: var(--dashboard-grid-gap); width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; container-type: inline-size; container-name: dashboard; } .draggable-dashboard--scrollable { flex: 1 1 auto; height: 0; block-size: var(--size-100pct); min-block-size: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; } /* Dashboard shell when mounted as a direct page-content child. */ .draggable-dashboard--page-content-child { flex: 1 1 auto; height: var(--size-100pct); block-size: var(--size-100pct); min-height: 0; min-block-size: 0; max-height: var(--size-100pct); } /* Page layout integration: page content applies its own horizontal padding. Cancel it so the dashboard can be full-bleed within the page content area, while the grid reintroduces the correct gutter via --dashboard-grid-pad. */ .draggable-dashboard--padded { margin-inline: calc(-1 * var(--space-9px)); } .draggable-dashboard--spacious { --dashboard-grid-gap: var(--space-14px); /* Keep the tile rhythm roomy, but make the outer scroll edge easier to reach. */ --dashboard-grid-pad: var(--space-8px); } /* Spacious tile styling for reusable dashboard variant content. */ .dashboard-spacious-tile { display: flex; flex-direction: column; gap: var(--dashboard-spacious-tile-gap, var(--space-18px)); min-height: 100%; padding: var(--dashboard-spacious-tile-padding-block, var(--space-28px)) var(--dashboard-spacious-tile-padding-inline, var(--space-28px)); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); } .dashboard-spacious-tile--hero { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(42 165 151 / 8%)); border-color: var(--teal-glass-strong-40); min-height: var(--dashboard-spacious-hero-min-height, var(--size-260)); } .dashboard-spacious-tile--office { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(255 184 108 / 8%)); border-color: var(--teal-glass-strong-40); min-height: var(--dashboard-spacious-office-min-height, var(--size-420)); } .dashboard-spacious-tile--rooms { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(112 92 255 / 6%)); border-color: var(--teal-glass-faint-10); min-height: var(--dashboard-spacious-rooms-min-height, var(--size-300)); --dashboard-spacious-tile-title-size: var(--font-size-20); --dashboard-spacious-tile-title-line-height: 1.12; } .dashboard-spacious-tile--pulse { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(42 165 151 / 8%)); border-color: var(--teal-glass-strong-30); min-height: var(--dashboard-spacious-pulse-min-height, var(--size-280)); } .dashboard-spacious-tile--shoutouts { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(255 194 87 / 8%)); border-color: var(--teal-glass-faint-10); min-height: var(--dashboard-spacious-shoutouts-min-height, var(--size-280)); } .dashboard-spacious-tile--calendar { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(87 149 255 / 8%)); border-color: var(--teal-glass-faint-10); min-height: var(--dashboard-spacious-calendar-min-height, var(--size-260)); } .dashboard-spacious-tile--recognition { background: linear-gradient(135deg, var(--white-glass-frosted-90), rgb(255 123 157 / 8%)); border-color: var(--teal-glass-faint-10); min-height: var(--dashboard-spacious-recognition-min-height, var(--size-300)); } .dashboard-spacious-tile__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dashboard-spacious-card-gap, var(--space-16px)); width: 100%; min-width: 0; } .dashboard-spacious-tile__copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-6px); min-width: 0; } .dashboard-spacious-tile__main { display: flex; flex-direction: column; gap: var(--space-12px); min-width: 0; } .dashboard-spacious-tile__eyebrow { margin: 0; font-size: var(--font-size-12); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); } .dashboard-spacious-tile__title { margin: 0; font-size: var(--dashboard-spacious-tile-title-size, var(--font-size-22)); line-height: var(--dashboard-spacious-tile-title-line-height, 1.1); font-weight: var(--weight-semibold); color: var(--text-primary); } .dashboard-spacious-tile__subtitle { margin: 0; color: var(--text-secondary); line-height: 1.45; } .dashboard-spacious-tile__status { display: inline-flex; align-items: center; gap: var(--space-8px); flex-shrink: 0; color: var(--text-secondary); white-space: nowrap; } .dashboard-spacious-tile__actions { display: flex; flex-wrap: wrap; gap: var(--space-8px); align-items: center; } .dashboard-spacious-tile__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--dashboard-spacious-card-gap, var(--space-16px)); width: 100%; min-width: 0; } .dashboard-spacious-tile__footer--stacked { align-items: flex-start; flex-direction: column; } .dashboard-spacious-who-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--size-160px), 1fr); gap: var(--space-14px); overflow-x: auto; padding-bottom: var(--space-4px); scroll-snap-type: x proximity; } .dashboard-spacious-who-main { display: flex; flex-direction: column; gap: var(--space-16px); } .dashboard-spacious-who-empty-stack { display: flex; flex-direction: column; gap: var(--space-16px); } .dashboard-spacious-who-fallback { display: flex; flex-direction: column; gap: var(--space-12px); } .dashboard-spacious-who-fallback__list { display: flex; flex-direction: column; gap: var(--space-12px); } .dashboard-spacious-who-fallback__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12px); padding: var(--space-12px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); box-shadow: var(--shadow-soft); } .dashboard-spacious-who-fallback__avatar { display: inline-flex; flex-shrink: 0; } .dashboard-spacious-who-fallback__body { display: flex; flex-direction: column; gap: var(--space-4px); min-width: 0; } .dashboard-spacious-who-fallback__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8px); min-width: 0; } .dashboard-spacious-person-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--space-14px); row-gap: var(--space-4px); padding: var(--space-14px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); box-shadow: var(--shadow-soft); min-width: 0; } .dashboard-spacious-person-card__avatar { display: inline-flex; position: relative; flex-shrink: 0; grid-column: 1; grid-row: 1 / span 2; } .dashboard-spacious-feed__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-16px); padding: var(--space-14px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); box-shadow: var(--shadow-soft); min-height: 0; } .dashboard-spacious-feed { display: flex; flex-direction: column; gap: var(--space-16px); } .dashboard-spacious-feed__avatar { position: relative; flex-shrink: 0; } .dashboard-spacious-feed__body { display: flex; flex-direction: column; gap: var(--space-6px); min-width: 0; } .dashboard-spacious-feed__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-14px); min-width: 0; } .dashboard-spacious-feed__name { font-weight: var(--weight-semibold); color: var(--text-primary); } .dashboard-spacious-feed__time { color: var(--text-secondary); white-space: nowrap; } .dashboard-spacious-feed__message { color: var(--text-primary); line-height: 1.45; } .dashboard-spacious-feed__reactions { display: flex; flex-wrap: wrap; gap: var(--space-8px); } .dashboard-spacious-feed__reaction { display: inline-flex; align-items: center; gap: var(--space-4px); padding: var(--space-4px) var(--space-8px); border-radius: 999px; background: var(--teal-glass-faint-10); color: var(--text-secondary); font-size: var(--font-size-12); } .dashboard-spacious-room-list { display: flex; flex-direction: column; gap: var(--space-14px); } .dashboard-spacious-room { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-14px); padding: var(--space-12px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); box-shadow: var(--shadow-soft); } .dashboard-spacious-room__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-56px); height: var(--size-56px); border-radius: var(--radius-pill); background: var(--active-surface-gradient); color: var(--text-on-primary); font-weight: var(--weight-semibold); flex-shrink: 0; } .dashboard-spacious-room__body { display: flex; flex-direction: column; gap: var(--space-6px); min-width: 0; } .dashboard-spacious-room__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8px); min-width: 0; } .dashboard-spacious-room__name { font-weight: var(--weight-semibold); color: var(--text-primary); } .dashboard-spacious-room__rail { display: inline-flex; align-items: center; gap: var(--space-6px); color: var(--text-secondary); } .dashboard-spacious-room__summary { color: var(--text-secondary); line-height: 1.4; } .dashboard-spacious-pulse { display: flex; flex-direction: column; gap: var(--space-18px); } .dashboard-spacious-pulse__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12px); } .dashboard-spacious-pulse__choice { display: flex; flex-direction: column; align-items: center; gap: var(--space-10px); padding: var(--space-14px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); background: var(--white-glass-frosted-90); box-shadow: var(--shadow-soft); color: var(--text-primary); cursor: pointer; transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth); } .dashboard-spacious-pulse__choice:hover { transform: translateY(var(--lift-subtle)); box-shadow: var(--shadow-moderate); background: var(--white); } .dashboard-spacious-pulse__emoji { font-size: var(--font-size-36); line-height: 1; } .dashboard-spacious-pulse__choice-label { font-weight: var(--weight-semibold); text-align: center; } .dashboard-spacious-pulse__note { color: var(--text-secondary); line-height: 1.45; } .dashboard-spacious-highlight-list { display: grid; gap: var(--space-14px); } .dashboard-spacious-highlight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-14px); padding: var(--space-12px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); box-shadow: var(--shadow-soft); } .dashboard-spacious-highlight__avatar { display: inline-flex; flex-shrink: 0; position: relative; } .dashboard-spacious-highlight__body { display: flex; flex-direction: column; gap: var(--space-4px); min-width: 0; } .dashboard-spacious-highlight__title { font-weight: var(--weight-semibold); color: var(--text-primary); } .dashboard-spacious-highlight__message { color: var(--text-primary); line-height: 1.45; } .dashboard-spacious-highlight__time { color: var(--text-secondary); } .dashboard-spacious-calendar-list { display: flex; flex-direction: column; gap: var(--space-14px); } .dashboard-spacious-calendar-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-14px); padding: var(--space-14px); border-radius: var(--dashboard-spacious-card-radius, var(--radius-xl)); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); box-shadow: var(--shadow-soft); } .dashboard-spacious-calendar-item__rail { width: var(--space-4px); border-radius: 999px; background: var(--active-surface-gradient); } .dashboard-spacious-calendar-item__body { display: flex; flex-direction: column; gap: var(--space-4px); min-width: 0; } .dashboard-spacious-calendar-item__title { font-weight: var(--weight-semibold); color: var(--text-primary); } .dashboard-spacious-calendar-item__meta { color: var(--text-secondary); line-height: 1.35; } @media (max-width: 767px) { .dashboard-spacious-tile { padding: var(--space-12px); } .dashboard-spacious-who-grid { grid-auto-flow: row; grid-template-columns: 1fr; overflow-x: visible; } .dashboard-spacious-pulse__choices { grid-template-columns: 1fr; } .dashboard-spacious-person-card { align-items: center; } .dashboard-spacious-who-fallback__item { padding: var(--space-10px); } } /* Dashboard variant for section tab pages (ShaneSpot, etc.) - flush to top, no padding */ .grid--dashboard-tiles--flush { padding-top: 0; margin-top: 0; } .grid--dashboard-tiles--spacious { gap: var(--space-14px); } .grid__dashboard-tile { position: relative; min-width: 0; width: var(--size-100pct); min-height: var(--dashboard-tile-min-height); height: auto; } .grid__dashboard-tile--span-1 { grid-column: span 1; } .grid__dashboard-tile--span-2 { grid-column: var(--grid-span-full-start) / var(--grid-span-full-end); } .grid__dashboard-tile--span-full { grid-column: var(--grid-span-full-start) / var(--grid-span-full-end); } /* Slot element: fill the dashboard tile so the single card/panel owner can stretch to the cell bounds instead of collapsing to content height. */ /* Container queries: respond to container width, not viewport. Thresholds are tuned to actual usable content width (after nav/rails), so we don't force 3 columns into a container that can only comfortably fit 2. */ @container dashboard (width >= 768px) { .grid--dashboard-tiles { grid-template-columns: var(--grid-template-dashboard-tiles-tablet); } .grid__dashboard-tile--span-2 { grid-column: span 2; } } @container dashboard (width >= 960px) { .grid--dashboard-tiles { grid-template-columns: var(--grid-template-dashboard-tiles-desktop); } } @container dashboard (width >= 1440px) { .grid--dashboard-tiles { grid-template-columns: var(--grid-template-dashboard-tiles-wide); } } /* Calendar grid variants */ .grid--calendar-month { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(var(--size-64px), 1fr); gap: var(--space-0-5px); } .grid--calendar-month-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: var(--size-44px); gap: var(--space-0-5px); margin-bottom: var(--space-0-5px); } .grid--calendar-week { display: flex; flex-direction: column; gap: var(--space-0-5px); } .calendar-grid__week-rows { display: flex; flex-direction: column; gap: var(--space-0-5px); } .grid--calendar-day { grid-template-columns: var(--grid-template-calendar-day); gap: var(--space-0-5px); } /* Calendar grid child elements */ .grid__weekday-header { padding: var(--space-1-5px); font-weight: var(--weight-medium); text-align: center; color: var(--text-color-secondary); font-size: var(--font-size-12); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .grid__day-cell { min-width: 0; min-height: 0; padding: var(--space-1px); border: var(--input-border-width-thin) solid var(--teal-glass-faint-10); border-radius: var(--radius-standard); background-color: var(--white-glass-opaque-80); cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; gap: var(--space-0-5px); } .grid__day-cell:hover { background-color: var(--teal-glass-faint-10); border-color: var(--strong-teal); } .grid__day-cell--today { border-color: var(--vibrant-teal); background-color: var(--pale-teal); } .grid__day-cell--other-month { opacity: 0.4; background-color: var(--white-glass-faint-10); } .grid__day-number { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--deep-slate); line-height: var(--line-height-tight); } .grid__day-events { display: flex; flex-direction: column; gap: var(--space-0-5px); flex: var(--flex-grow-standard); min-width: 0; overflow-x: hidden; overflow-y: auto; } .grid__week-header { display: grid; grid-template-columns: var(--grid-template-calendar-week); gap: var(--space-0-5px); } .calendar-grid__week-row { display: grid; grid-template-columns: var(--grid-template-calendar-week); gap: var(--space-0-5px); min-height: var(--size-60px); } .grid__week-time-gutter { padding: var(--space-1px); border-right: var(--input-border-width-thin) solid var(--teal-glass-faint-10); } .grid__week-day-header { padding: var(--space-1-5px); text-align: center; border-bottom: var(--input-border-width-thin) solid var(--teal-glass-faint-10); } .grid__week-day-header--today { background-color: var(--pale-teal); font-weight: var(--weight-semibold); } .grid__week-day-column { position: relative; min-height: var(--size-100pct); border-left: var(--input-border-width-thin) solid var(--teal-glass-faint-10); cursor: pointer; } .grid__week-day-column:hover { background-color: var(--teal-glass-faint-10); } .grid__time-label { padding: var(--space-1px); font-size: var(--font-size-12); color: var(--text-color-secondary); text-align: right; border-top: var(--input-border-width-thin) solid var(--teal-glass-faint-10); } .grid__day-hour { display: flex; gap: var(--space-1-5px); padding: var(--space-1px); border-bottom: var(--input-border-width-thin) solid var(--teal-glass-faint-10); min-height: var(--size-60px); } .grid__day-hour-label { flex-shrink: 0; width: var(--size-80px); font-size: var(--font-size-12); color: var(--text-color-secondary); text-align: right; } .grid__day-hour-events { flex: var(--flex-grow-standard); display: flex; flex-direction: column; gap: var(--space-0-5px); } /* ── Panel data view: cards mode (alternative to table mode) ───────────────── */ .panel-data-view-cards { width: var(--size-100pct); padding: var(--space-9px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1-5px); } @media (max-width: 1200px) { .panel-data-view-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .panel-data-view-cards { grid-template-columns: minmax(0, 1fr); } } .panel-data-view-cards__empty { grid-column: 1 / -1; } /* Hero typography helpers Used for script-style headings like Ops Deck, greetings, and section titles. */ .hero { font-family: var(--font-family-hero); font-weight: var(--weight-light); color: var(--soft-teal); } /* ============================================================================= ICON UTILITIES Generic icon sizing utilities and context-specific icon classes ============================================================================= */ :root { /* Default icon stroke width (can be overridden in specific contexts like FAB) */ --icon-stroke-width: 1.5; } /* Inline icon wrapper for icon+text flows (chat, menu labels, etc.) */ .inline-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .inline-icon__svg { width: 1em; height: 1em; display: block; stroke: currentColor; } .icon > svg { width: 100%; height: 100%; display: block; } .icon-host { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: middle; border-radius: 999px; background: color-mix(in srgb, var(--accent-teal) 7%, var(--white)); } .icon-host--36px { inline-size: var(--size-36px); min-inline-size: var(--size-36px); block-size: var(--size-36px); } .icon-host--48px { inline-size: var(--size-48px); min-inline-size: var(--size-48px); block-size: var(--size-48px); } /* ===== GENERIC ICON SIZE CLASSES ===== */ /* Canonical icon base + size variants. Preferred usage: base icon class with a single size modifier (for example: icon + icon--sm). */ .icon { width: var(--size-20px); height: var(--size-20px); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke-width); vector-effect: non-scaling-stroke; } /* Icon sizes — class name matches the quality token name (--size-Npx). */ .icon--8px { width: var(--size-8px); height: var(--size-8px); } .icon--2xs { width: var(--size-8px); height: var(--size-8px); } .chart__legend-dot--sm { width: var(--size-8px); height: var(--size-8px); } .presence-dot--small { width: var(--size-8px); height: var(--size-8px); } .icon--10px { width: var(--size-10px); height: var(--size-10px); } .icon--xs { width: var(--size-10px); height: var(--size-10px); } .icon--12px { width: var(--size-12px); height: var(--size-12px); } .icon--xs-plus { width: var(--size-12px); height: var(--size-12px); } .icon--drag-handle { width: var(--size-12px); height: var(--size-12px); } .icon--14px { width: var(--size-14px); height: var(--size-14px); } .icon--sm-minus { width: var(--size-14px); height: var(--size-14px); } .icon--16px { width: var(--size-16px); height: var(--size-16px); } .icon--sm { width: var(--size-16px); height: var(--size-16px); } .chip-remove__icon { width: var(--size-16px); height: var(--size-16px); } .chart__legend-dot--lg { width: var(--size-16px); height: var(--size-16px); } .impersonation-menu__role-chip__icon { width: var(--size-16px); height: var(--size-16px); } .presence-dot--large { width: var(--size-16px); height: var(--size-16px); } .icon--18px { width: var(--size-18px); height: var(--size-18px); } .icon--sm-plus { width: var(--size-18px); height: var(--size-18px); } .icon--20px { width: var(--size-20px); height: var(--size-20px); } .icon--md { width: var(--size-20px); height: var(--size-20px); } /* same as default .icon */ .icon--22px { width: var(--size-22px); height: var(--size-22px); } .icon--md-plus { width: var(--size-22px); height: var(--size-22px); } .icon--24px { width: var(--size-24px); height: var(--size-24px); } .icon--lg { width: var(--size-24px); height: var(--size-24px); } .icon--28px { width: var(--size-28px); height: var(--size-28px); } .icon--lg-plus { width: var(--size-28px); height: var(--size-28px); } .icon--32px { width: var(--size-32px); height: var(--size-32px); } .icon--xl { width: var(--size-32px); height: var(--size-32px); } .icon--36px { width: var(--size-36px); height: var(--size-36px); } .icon--xl-plus { width: var(--size-36px); height: var(--size-36px); } .icon--40px { width: var(--size-40px); height: var(--size-40px); } .icon--2xl { width: var(--size-40px); height: var(--size-40px); } .icon--44px { width: var(--size-44px); height: var(--size-44px); } .icon--2xl-plus { width: var(--size-44px); height: var(--size-44px); } .icon--48px { width: var(--size-48px); height: var(--size-48px); } .icon--3xl { width: var(--size-48px); height: var(--size-48px); } .icon--button { width: var(--control-icon-size); height: var(--control-icon-size); } .icon--switch-thumb { width: var(--switch-thumb-icon-size); height: var(--switch-thumb-icon-size); } .icon--avatar-corner-action { width: var(--avatar-corner-action-icon-size); height: var(--avatar-corner-action-icon-size); } /* @deprecated t-shirt aliases */ /* ===== MOBILE ICON SCALING ===== On mobile, small icons are harder to see at arm's length. Bump small explicit-size icons up one step for better visual legibility. Note: icon tap targets are controlled by the BUTTON wrapper (44px from button-utilities.css), not the icon itself — these rules only affect visual size. */ @media (max-width: 767px) { /* Tiny icons: scale to 12–16px minimum */ .icon--8px { width: var(--size-12px); height: var(--size-12px); } .icon--2xs { width: var(--size-12px); height: var(--size-12px); } .icon--10px { width: var(--size-14px); height: var(--size-14px); } .icon--xs { width: var(--size-14px); height: var(--size-14px); } .icon--12px { width: var(--size-16px); height: var(--size-16px); } .icon--xs-plus { width: var(--size-16px); height: var(--size-16px); } .icon--14px { width: var(--size-16px); height: var(--size-16px); } .icon--sm-minus { width: var(--size-16px); height: var(--size-16px); } /* Small icons: one step up for readability */ .icon--16px { width: var(--size-20px); height: var(--size-20px); } .icon--sm { width: var(--size-20px); height: var(--size-20px); } .icon--18px { width: var(--size-22px); height: var(--size-22px); } .icon--sm-plus { width: var(--size-22px); height: var(--size-22px); } /* Default .icon (20px) and larger are already sufficient — no change needed */ } /* ===== ICON COLOR MODIFIERS ===== */ .icon--accent { color: var(--accent-teal); } .icon--positive { color: var(--strong-teal); } .icon--success { color: var(--strong-teal); } .icon--warning { color: var(--strong-sunset); } .icon--info { color: var(--vibrant-teal); } .icon--error { color: var(--strong-red); } .icon--danger { color: var(--strong-red); } .icon--muted { color: var(--soft-slate); } /* ===== ICON STROKE UTILITIES ===== */ /* Explicit stroke-width helpers; sizing comes from .--*. */ .svg-stroke-1-25 { stroke-width: var(--stroke-width-thin); } .lucide--stroke-1-25 { stroke-width: var(--stroke-width-thin); } .lucide-icon--stroke-1-25 { stroke-width: var(--stroke-width-thin); } .svg-stroke-1-5 { stroke-width: var(--stroke-width-regular); } .lucide--stroke-1-5 { stroke-width: var(--stroke-width-regular); } .lucide-icon--stroke-1-5 { stroke-width: var(--stroke-width-regular); } .svg-stroke-1-75 { stroke-width: var(--stroke-width-medium-plus); } .lucide--stroke-1-75 { stroke-width: var(--stroke-width-medium-plus); } .lucide-icon--stroke-1-75 { stroke-width: var(--stroke-width-medium-plus); } .svg-stroke-2 { stroke-width: var(--stroke-width-medium); } .lucide--stroke-2 { stroke-width: var(--stroke-width-medium); } .lucide-icon--stroke-2 { stroke-width: var(--stroke-width-medium); } /* ===== ICON VARIANTS (INTERNAL) ===== */ /* Used by Icon `variant="drag-handle"` */ .icon--drag-handle-wrap { display: inline-flex; align-items: center; justify-content: center; } /* SidebarDragHandle icons: filled circles. Circles are styled directly in SidebarDragHandle.tsx via SVG attributes. */ /* === FOCUS UTILITIES === */ .focus-ring-none:focus-visible { outline: none; } .focus-visible-ring:focus-visible { outline: var(--focus-ring); outline-offset: var(--ring-offset-sm); } /* === TRUNCATION === */ .line-clamp { display: -webkit-box; overflow: hidden; } .line-clamp--1 { line-clamp: var(--line-clamp-1); } .line-clamp--2 { line-clamp: var(--line-clamp-2); } .line-clamp--3 { line-clamp: var(--line-clamp-3); } .line-clamp--4 { line-clamp: var(--line-clamp-4); } .line-clamp--5 { line-clamp: var(--line-clamp-5); } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .break-normal { overflow-wrap: normal; word-break: normal; } /* === HOVER SURFACE === */ .hover-surface-subtle:hover { background: var(--white-glass-subtle-04); } /* intentionally empty: z-index to be set within component CSS using tokens */ /* SKELETON */ .skeleton { display: block; background: var(--gradient-shimmer-horizontal-subtle); background-size: var(--skeleton-background-size); border-radius: var(--radius-standard); animation: var(--skeleton-shimmer-animation); } .skeleton--text { border-radius: var(--radius-standard); } .skeleton--circular { border-radius: var(--radius-pill); } .skeleton--rectangular { border-radius: var(--radius-standard); } .skeleton--w-100pct { width: var(--size-100pct); } .skeleton--w-90pct { width: var(--size-90pct); } .skeleton--w-80pct { width: var(--size-80pct); } .skeleton--w-70pct { width: var(--width-70-percent); } .skeleton--w-60pct { width: var(--size-60pct); } .skeleton--w-50pct { width: var(--size-50pct); } .skeleton--w-30pct { width: calc(var(--size-90pct) - var(--size-60pct)); } .skeleton--w-60px { width: var(--size-60px); } .skeleton--w-80px { width: var(--size-80px); } .skeleton--w-100px { width: var(--size-100px); } .skeleton--w-120px { width: var(--size-120px); } .skeleton--w-180px { width: var(--size-180px); } .skeleton--w-200px { width: var(--size-200px); } .skeleton--w-240px { width: var(--size-240px); } .skeleton--h-0-75rem { height: var(--size-12px); } .skeleton--h-0-875rem { height: var(--size-14px); } .skeleton--h-1rem { height: var(--size-16px); } .skeleton--h-1-25rem { height: var(--size-20px); } .skeleton--h-2rem { height: var(--size-32px); } .skeleton--h-2-5rem { height: var(--size-40px); } .skeleton--h-20px { height: var(--size-20px); } .skeleton--h-40px { height: var(--size-40px); } .skeleton--h-180px { height: var(--size-180px); } .skeleton--h-200px { height: var(--size-200px); } .skeleton--h24 { min-height: var(--size-24px); } .skeleton--h32 { min-height: var(--size-80px); } .skeleton-row { position: relative; } .skeleton-row__bar { display: block; background: var(--gradient-shimmer-horizontal-subtle); background-size: var(--skeleton-background-size); border-radius: var(--radius-standard); animation: var(--skeleton-shimmer-animation); height: var(--space-12px); margin-block: var(--space-0); width: var(--size-100pct); } /* Two-line skeleton used in dense task lists */ .skeleton-line__primary { height: var(--space-9px); border-radius: var(--radius-standard); width: var(--size-75pct); margin-bottom: var(--space-1px); } .skeleton-line__secondary { height: var(--space-1-5px); border-radius: var(--radius-standard); width: var(--size-50pct); } /* LOADING */ .loading { position: fixed; inset: var(--inset-0); background: var(--black-glass-heavy-40); backdrop-filter: var(--blur-sm); display: flex; align-items: center; justify-content: center; z-index: var(--z-topmost); animation: overlay-fade-in var(--animation-quick) var(--easing-smooth); } .loading__status { position: absolute; width: var(--space-0-5px); height: var(--space-0-5px); padding: var(--space-0); margin: calc(-1 * var(--size-1px)); overflow: hidden; clip-path: var(--clip-visually-hidden); white-space: nowrap; border: none; } .loading__dots::after { content: ''; animation: loading-dots var(--animation-smooth) infinite step-end; } .loading__content { align-items: center; gap: var(--space-18px); padding: var(--size-56px); background: var(--white); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); max-width: var(--width-280px); text-align: center; } .loading__brand { margin-bottom: var(--space-9px); } .loading__logo { height: var(--space-24px); width: auto; opacity: var(--opacity-vivid); } .loading__button { padding: var(--space-9px) var(--space-12px); background: transparent; border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); color: var(--dark-slate); font-size: var(--font-size-12); cursor: pointer; transition: background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth); } .loading__button:focus-visible { outline: var(--input-border-width-md) solid var(--deep-teal); outline-offset: var(--size-2px); } .loading__button:hover { background: var(--light-slate); border-color: var(--soft-slate); } .loading__message { font-size: var(--font-size-12); color: var(--dark-slate); font-weight: var(--weight-medium); } .cobrand__message { font-size: var(--font-size-12); color: var(--dark-slate); font-weight: var(--weight-medium); } @keyframes overlay-fade-in { from { opacity: var(--opacity-hidden); transform: scale(0.95); } to { opacity: var(--opacity-visible); transform: scale(1); } } @keyframes loading-dots { 0% { content: ''; } 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80% { content: '...'; } 100% { content: '...'; } } /* Small inline bird icon spinner (e.g., KPI loading) */ .bird-spinner--sm { display: inline-flex; align-items: center; justify-content: center; animation: bird-spin 1.1s linear infinite; transform-origin: center; --icon-color: var(--text-primary); } .bird-spinner--md { display: inline-flex; align-items: center; justify-content: center; animation: bird-spin 1.1s linear infinite; transform-origin: center; --icon-color: var(--text-primary); } /* Medium inline bird icon spinner */ @media (prefers-reduced-motion: reduce) { .loading { animation: none; } .loading__logo { animation: none; } .bird-spinner--sm { animation: none; } .bird-spinner--md { animation: none; } } /* BIRD */ .bird { display: flex; flex-direction: column; align-items: center; justify-content: center; } .bird__stage { position: relative; filter: var(--shadow-bird-soft); display: flex; align-items: center; justify-content: center; background: transparent; border-radius: var(--radius-pill); } .bird__stage--sm { width: var(--size-56px); height: var(--size-56px); } .cobrand--small__pp { width: var(--size-56px); height: var(--size-56px); } /* 56px */ .bird__stage--md { width: calc(var(--size-56px) * 3); height: calc(var(--size-56px) * 3); } /* 168px */ .bird__stage--lg { width: var(--width-480px); height: var(--width-480px); } /* 480px - large centered loader */ .bird-spinner__icon { display: inline-flex; align-items: center; } .bird__img { width: var(--size-100pct); height: auto; display: block; animation: bird-pulse var(--animation-deliberate) var(--easing-smooth) infinite; transform-origin: var(--bird-transform-origin); filter: var(--shadow-bird-soft); } .bird__img--teal { /* default (keeps original teal asset) */ } .bird__img--white { /* Used on surfaces while reusing the same SVG asset. */ filter: var(--shadow-bird-soft) brightness(0) invert(1); } .bird__mask { display: none; /* Superseded by inline SVG img */ } .bird__message { margin-top: var(--space-1-5px); } /* Light-on-dark variant for brand loader message */ .bird__message--light { color: var(--text-on-dark); } .bird::after { content: ''; width: var(--size-67pct); height: var(--space-1-5px); border-radius: var(--radius-pill); background: var(--white-glass-clear-18); filter: var(--blur-2xs); opacity: var(--opacity-light); animation: bird-shadow var(--animation-deliberate) var(--easing-smooth) infinite; } .bird--fullscreen { position: fixed; inset: var(--inset-0); z-index: var(--z-topmost); pointer-events: none; } .bird--fullscreen__img { position: absolute; width: var(--fullscreen-bird-width-max); height: auto; color: var(--accent-teal); filter: var(--shadow-bird-soft); will-change: transform; animation: bird-flight var(--animation-smooth) var(--easing-smooth) infinite; } .bird--fullscreen-wild__img { animation: bird-flight-curve var(--animation-smooth) var(--easing-smooth) infinite; } .bird--fullscreen-flipglide__img { animation: bird-flight-flipglide var(--animation-smooth) var(--easing-smooth) infinite; transform-style: preserve-3d; } /* COBRAND */ .cobrand { align-items: center; animation: cobrand-enter var(--animation-quick) var(--easing-smooth) both; } .cobrand__stage { position: relative; width: var(--size-80px); height: var(--size-80px); } .cobrand__orbit { position: absolute; top: var(--position-center-block); left: var(--position-center-inline); transform: translate(var(--offset-center-inline), var(--offset-center-block)); } .cobrand__logo { display: block; } .cobrand__pp { width: var(--space-24px); height: var(--space-24px); border-radius: var(--space-1-5px); box-shadow: var(--shadow-crisp); animation: orbit-pp var(--animation-smooth) var(--easing-smooth) infinite; transform-origin: top left; } .cobrand__bird { width: var(--size-16px); height: auto; filter: none; opacity: var(--opacity-visible); animation: orbit-bird var(--animation-smooth) var(--easing-smooth) infinite; transform-origin: var(--size-56px) var(--size-56px); } .cobrand__ring { position: absolute; inset: var(--inset-0); border-radius: var(--radius-pill); background: var(--overlay-shine-subtle); filter: var(--shadow-bird-soft); opacity: var(--opacity-subtle); } .cobrand--small__stage { width: var(--size-24px); height: var(--size-24px); } .cobrand--small__bird { width: var(--size-56px); } .cobrand--large__stage { width: var(--size-48px); height: var(--size-48px); } .cobrand--large__pp { width: var(--space-24px); height: var(--space-24px); } .cobrand--large__bird { width: var(--size-20px); } @keyframes cobrand-ring-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes orbit-pp { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--size-56px)) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--size-56px)) rotate(-360deg); } } @keyframes orbit-bird { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(calc(-1 * var(--space-24px))) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg) translateX(calc(-1 * var(--space-24px))) rotate(360deg); } } @keyframes bird-walk { 0% { transform: translateX(0) scale(1); } 25% { transform: translateX(calc(-1 * var(--space-0-5px))) scale(1.02); } 50% { transform: translateX(calc(var(--space-0-5px))) scale(1); } 75% { transform: translateX(0) scale(1.02); } 100% { transform: translateX(0) scale(1); } } @keyframes bird-bounce { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(calc(-1 * var(--space-1-5px))) scale(1.05); } 70% { transform: translateY(var(--space-0-5px)) scale(0.98); } } @media (max-width: 767px) { .cobrand__stage { width: var(--size-80px); height: var(--size-80px); } .cobrand__bird { width: var(--space-24px); } .cobrand__pp { width: var(--space-18px); height: var(--space-18px); } } @media (min-width: 1024px) { .cobrand__stage { width: var(--size-40px); height: var(--size-40px); } .cobrand__bird { width: var(--size-16px); } .cobrand__pp { width: var(--space-24px); height: var(--space-24px); } } .sandpiper-wild-loader { display: flex; align-items: center; justify-content: center; width: var(--size-100pct); min-height: var(--height-240px); padding: var(--space-18px); } .sandpiper-overlay__bird { display: flex; align-items: center; justify-content: center; } /* ACCESSIBILITY: visually-hidden status region styled via .loading__status */ .message__actions-anchor { position: relative; } .chat__bubble { /* Bubble sizing should follow content like iMessage, with a sensible max */ max-width: var(--chat-bubble-max-cqi); /* Shrink to content like iMessage without collapsing to 1-char width */ display: inline-flex; flex-direction: column; gap: var(--space-1px); /* Ensure bubbles never collapse into letter-by-letter wrapping */ word-break: normal; overflow-wrap: break-word; white-space: pre-wrap; align-self: flex-start; position: relative; border-radius: var(--chat-bubble-radius); padding: var(--chat-bubble-padding-y) var(--chat-bubble-padding-x); border: none; background: var(--white); box-shadow: none; color: var(--deepest-slate); font-size: var(--chat-bubble-font-size); line-height: var(--chat-bubble-line-height); } /* Message list layout (iMessage-like vertical rhythm) */ .chat__messages { display: flex; flex-direction: column; gap: 0; padding: var(--chat-messages-padding); max-width: var(--size-100pct); width: var(--size-100pct); align-self: stretch; /* Ensure cqi sizing tracks the message list width */ container-type: inline-size; } .chat__conversation { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; width: var(--size-100pct); max-width: var(--size-900px); margin: 0 auto; } .chat__conversation--empty { justify-content: center; } .chat__conversation--minimizing { pointer-events: none; animation: chatMinimizeToFab var(--animation-quick) var(--easing-smooth) forwards; transform-origin: top right; } @keyframes chatMinimizeToFab { from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } to { opacity: 0.3; transform: translate3d(var(--size-20px), calc(-1 * var(--size-8px)), 0) scale(0.95); filter: blur(var(--space-0-5px)); } } .chat__header-start { display: flex; align-items: flex-start; gap: var(--space-6px); } .chat__title-row { display: flex; align-items: center; gap: var(--space-6px); } .chat__rename-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-6px); } .chat__conversation-title-input { min-width: 0; max-width: var(--size-100pct); padding: var(--space-1px) var(--space-1px); border-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--card-border); background: var(--page-bg-surface); color: var(--text-primary); font: inherit; } .page__side-panel .panel__header .text--heading-h2 { font-size: var(--font-size-18); line-height: var(--line-height-tight); } /* Ensure conversation header names stay on a single readable line and truncate instead of stacking vertically on very narrow layouts. * Note: Text component should handle truncation via className prop. */ .chat__participants-row { display: flex; align-items: center; gap: var(--space-1px); min-width: 0; } .chat__action-row { display: flex; align-items: center; gap: var(--space-1px); } .chat__attachment-item { display: flex; align-items: center; gap: var(--space-1px); } .chat__mention-item { display: flex; align-items: center; gap: var(--space-1px); } /* Outer message row: avatar + message-stack side by side */ .chat__message-row { display: flex; align-items: flex-start; gap: var(--space-5px); width: var(--size-100pct); position: relative; } .chat__message-row--outbound { justify-content: flex-end; } .chat__message-row--inbound { justify-content: flex-start; } .chat__message-avatar--inbound { flex-shrink: 0; align-self: flex-end; } .chat__message-avatar--outbound { flex-shrink: 0; align-self: flex-end; } /* Inner bubble row: positions the bubble within the message stack */ .chat__bubble-row { display: flex; align-items: flex-start; width: var(--size-100pct); } .chat__bubble-row--outbound { justify-content: flex-end; } .chat__bubble-row--inbound { justify-content: flex-start; } /* Attachments inside a bubble */ .chat__bubble-attachments { display: flex; flex-wrap: wrap; gap: var(--space-1px); } .chat__suggestion-chips { display: flex; flex-wrap: wrap; gap: var(--space-1px); } .chat__composer-attachments { display: flex; flex-wrap: wrap; gap: var(--space-1px); } /* Timestamp + status row below a message group */ .chat__timestamp-row { display: flex; align-items: center; justify-content: center; gap: var(--space-1px); } .chat__timestamp-row--inbound { justify-content: flex-start; } .chat__timestamp-row--outbound { justify-content: flex-end; } .chat__header-meta { display: flex; align-items: center; gap: var(--space-1px); min-width: 0; flex-wrap: wrap; } .chat__message-platform { display: inline-flex; align-items: center; align-self: flex-start; margin-top: var(--space-1px); padding: var(--space-1px) var(--space-6px); border-radius: var(--radius-pill); border: var(--input-border-width-thin) solid var(--soft-slate); background: var(--white-glass-faint-10); color: var(--text-muted); font-size: var(--font-size-12); line-height: var(--line-height-tight); text-transform: uppercase; letter-spacing: 0.03em; } /* AI suggestion chips in the footer */ /* Composer attachment preview list */ /* Single attachment item in composer preview */ /* Attachment preview styles (before sending) - with thumbnails */ .chat__attachment-previews { display: flex; flex-wrap: wrap; gap: var(--space-1-5px); padding: var(--space-1-5px); margin-bottom: var(--space-1px); } .chat__attachment-preview { position: relative; display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1px); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); background: var(--white-glass-faint-10); max-width: var(--size-200px); } .chat__attachment-preview-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-1px); } .chat__attachment-preview-image { width: var(--size-60px); height: var(--size-60px); object-fit: cover; border-radius: var(--radius-standard); } .chat__attachment-preview-file { display: flex; align-items: center; gap: var(--space-1px); flex: 1; min-width: 0; } .chat__attachment-preview-file-icon { font-size: var(--font-size-20); flex-shrink: 0; } .chat__attachment-preview-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5px); } .chat__attachment-preview-file-name { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat__attachment-preview-file-size { font-size: var(--font-size-11); color: var(--text-muted); } .chat__attachment-preview-remove { flex-shrink: 0; width: var(--size-24px); height: var(--size-24px); padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); background: transparent; color: var(--text-muted); transition: all var(--animation-quick); } .chat__attachment-preview-remove:hover { background: var(--red-glass-visible-14); color: var(--strong-red); } /* Mention suggestion avatar + name row inside a button */ /* EEBA confirmation form layout */ .chat__eeba-form { display: flex; flex-direction: column; gap: var(--space-1-5px); } .chat__mention-suggestions { display: flex; flex-direction: column; gap: var(--space-1-5px); } /* ============================================================ Freshchat-style reader bar Always present (min-height) so layout never shifts. Shows a thin separator + reader avatars when someone has read. ============================================================ */ .chat__reader-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-1px); min-height: var(--space-18px); padding-inline: var(--space-9px); padding-block: var(--space-1px); } .chat__reader-bar__line { flex: 1 1 auto; height: var(--size-1px); background: var(--soft-slate); min-width: var(--space-1-5px); } .chat__reader-bar__avatars { display: flex; align-items: center; gap: var(--space-1px); flex: 0 0 auto; justify-content: center; } /* Wraps a reader avatar so the presence dot can position absolutely over it */ .chat__reader-bar__avatar { position: relative; } .chat__conversation-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; width: var(--size-100pct); padding-bottom: var(--space-9px); } .chat__conversation-panel-footer { padding: var(--space-9px); border-top: none; background: transparent; } .chat__conversation-footer { display: flex; flex-direction: column; gap: var(--space-9px); flex: 0 0 auto; min-width: 0; } .chat__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1-5px); padding: var(--space-9px); text-align: center; width: var(--size-100pct); min-width: 0; flex: 1 1 auto; min-height: 0; overflow: clip; } .chat__unread-jump { display: flex; justify-content: center; padding: var(--space-1px) var(--space-9px) 0; } .chat__history-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px) var(--space-1px); } .chat__loading-fill { display: flex; align-items: center; justify-content: center; min-height: var(--size-100pct); width: var(--size-100pct); } .chat__date-divider { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1px) var(--space-9px); margin-block: var(--space-1px); } .chat__date-divider-line { flex: 1 1 auto; height: var(--size-1px); background: var(--input-border); opacity: 0.4; } .chat__unread-divider { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); } .chat__unread-divider-line { flex: 1 1 auto; height: var(--size-1px); background: var(--soft-slate); } .chat__message-status { display: inline-flex; align-items: center; gap: var(--space-1px); padding-top: var(--space-1px); } .chat__message-status--sending { opacity: var(--opacity-subtle); } .chat__message-status--failed { opacity: var(--opacity-strong); } .chat__message-stack { display: flex; flex-direction: column; gap: var(--space-1px); width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; /* Allow message bubbles to size relative to the available container width ( feel). */ container-type: inline-size; } .chat__bubble-wrap { display: inline-flex; position: relative; max-width: var(--size-100pct); min-width: 0; cursor: pointer; } /* Hover-visible action button adjacent to a chat bubble */ .chat__message-actions { display: flex; align-items: center; opacity: 0; transition: opacity var(--animation-quick); flex-shrink: 0; position: absolute; inset: 0; pointer-events: none; } .chat__message-actions { opacity: 1; } .chat__message-actions:focus-within { opacity: 1; } .chat__message-actions--outbound { order: -1; /* sits left of outbound (right-aligned) bubbles */ } .chat__message-actions--inbound { order: 1; /* sits right of inbound (left-aligned) bubbles */ } .chat__message-actions-trigger { position: absolute; inset: 0; width: var(--size-100pct); height: var(--size-100pct); border: 0; background: transparent; color: transparent; pointer-events: auto; cursor: pointer; } /* Note: Button primitives control their own . Deleted architectural overrides. */ /* Thread list content wrapper — used inside Panel body for surfaces */ .chat__thread-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; } .chat__suggestions { display: flex; flex-direction: column; gap: var(--space-1-5px); width: var(--size-100pct); min-width: 0; } .chat__message { display: flex; flex-direction: column; max-width: var(--size-100pct); width: var(--size-100pct); margin-top: var(--space-1px); } .chat__message:first-child { margin-top: 0; } .chat__message--outbound-single { align-items: flex-end; } .chat__message--outbound-start { align-items: flex-end; } .chat__message--outbound-middle { align-items: flex-end; } .chat__message--outbound-end { align-items: flex-end; } .chat__message--inbound-single { align-items: flex-start; } .chat__message--inbound-start { align-items: flex-start; } .chat__message--inbound-middle { align-items: flex-start; } .chat__message--inbound-end { align-items: flex-start; } /* Ensure the actions menu (… icon) stays aligned under the bubble, not at far-left. */ .chat__message-stack--outbound-single { align-items: flex-end; } .chat__message-stack--outbound-start { align-items: flex-end; } .chat__message-stack--outbound-middle { align-items: flex-end; } .chat__message-stack--outbound-end { align-items: flex-end; } .chat__message-stack--inbound-single { align-items: flex-start; } .chat__message-stack--inbound-start { align-items: flex-start; } .chat__message-stack--inbound-middle { align-items: flex-start; } .chat__message-stack--inbound-end { align-items: flex-start; } /* iMessage-like rhythm: tighter within a sender run */ .chat__message--outbound-middle { margin-top: var(--space-1px); } .chat__message--outbound-end { margin-top: var(--space-1px); } .chat__message--inbound-middle { margin-top: var(--space-1px); } .chat__message--inbound-end { margin-top: var(--space-1px); } /* hybrid: grouped message shapes */ .chat__bubble--inbound-single { border-radius: var(--chat-bubble-radius); } .chat__bubble--inbound-start { border-radius: var(--chat-bubble-radius); } .chat__bubble--inbound-middle { border-radius: var(--chat-bubble-radius); } .chat__bubble--inbound-end { border-radius: var(--chat-bubble-radius); } .chat__bubble--outbound-single { border-radius: var(--chat-bubble-radius); } .chat__bubble--outbound-start { border-radius: var(--chat-bubble-radius); } .chat__bubble--outbound-middle { border-radius: var(--chat-bubble-radius); } .chat__bubble--outbound-end { border-radius: var(--chat-bubble-radius); } /* iMessage-ish colors in Sandpiper palette: inbound soft teal, outbound strong teal */ .chat__bubble--inbound-single { background: var(--light-teal); box-shadow: none; color: var(--deepest-slate); } .chat__bubble--inbound-start { background: var(--light-teal); box-shadow: none; color: var(--deepest-slate); } .chat__bubble--inbound-middle { background: var(--light-teal); box-shadow: none; color: var(--deepest-slate); } .chat__bubble--inbound-end { background: var(--light-teal); box-shadow: none; color: var(--deepest-slate); } /* Inbound: left "tail side" is less rounded on group continuation */ .chat__bubble--inbound-start { border-bottom-left-radius: var(--chat-bubble-radius-group); } .chat__bubble--inbound-middle { border-top-left-radius: var(--chat-bubble-radius-group); border-bottom-left-radius: var(--chat-bubble-radius-group); } .chat__bubble--inbound-end { border-top-left-radius: var(--chat-bubble-radius-group); } /* Outbound: right "tail side" is less rounded on group continuation */ .chat__bubble--outbound-start { border-bottom-right-radius: var(--chat-bubble-radius-group); } .chat__bubble--outbound-middle { border-top-right-radius: var(--chat-bubble-radius-group); border-bottom-right-radius: var(--chat-bubble-radius-group); } .chat__bubble--outbound-end { border-top-right-radius: var(--chat-bubble-radius-group); } /* Optional tails for bubbles (desktop-ish feel). */ @supports (width: 1cqi) { .chat__bubble--inbound-end::after { content: ''; position: absolute; width: var(--size-10px); height: var(--size-10px); bottom: var(--size-2px); background: inherit; border: inherit; border-top: none; border-left: none; border-bottom-right-radius: var(--chat-bubble-radius-group); transform: rotate(45deg); box-shadow: var(--shadow-soft); pointer-events: none; } .chat__bubble--inbound-single::after { content: ''; position: absolute; width: var(--size-10px); height: var(--size-10px); bottom: var(--size-2px); background: inherit; border: inherit; border-top: none; border-left: none; border-bottom-right-radius: var(--chat-bubble-radius-group); transform: rotate(45deg); box-shadow: var(--shadow-soft); pointer-events: none; } .chat__bubble--outbound-end::after { content: ''; position: absolute; width: var(--size-10px); height: var(--size-10px); bottom: var(--size-2px); background: inherit; border: inherit; border-top: none; border-left: none; border-bottom-right-radius: var(--chat-bubble-radius-group); transform: rotate(45deg); box-shadow: var(--shadow-soft); pointer-events: none; } .chat__bubble--outbound-single::after { content: ''; position: absolute; width: var(--size-10px); height: var(--size-10px); bottom: var(--size-2px); background: inherit; border: inherit; border-top: none; border-left: none; border-bottom-right-radius: var(--chat-bubble-radius-group); transform: rotate(45deg); box-shadow: var(--shadow-soft); pointer-events: none; } .chat__bubble--inbound-end::after { left: calc(var(--size-6px) * -1); transform: rotate(225deg); border-bottom-right-radius: 0; border-bottom-left-radius: var(--chat-bubble-radius-group); } .chat__bubble--inbound-single::after { left: calc(var(--size-6px) * -1); transform: rotate(225deg); border-bottom-right-radius: 0; border-bottom-left-radius: var(--chat-bubble-radius-group); } .chat__bubble--outbound-end::after { right: calc(var(--size-6px) * -1); } .chat__bubble--outbound-single::after { right: calc(var(--size-6px) * -1); } } /* Note: Text primitive inherits color from parent bubble. Deleted architectural override. */ .chat__bubble--outbound-single { align-self: flex-end; background: var(--vibrant-teal); border: none; box-shadow: none; color: var(--text-on-primary); } .chat__bubble--outbound-start { align-self: flex-end; background: var(--vibrant-teal); border: none; box-shadow: none; color: var(--text-on-primary); } .chat__bubble--outbound-middle { align-self: flex-end; background: var(--vibrant-teal); border: none; box-shadow: none; color: var(--text-on-primary); } .chat__bubble--outbound-end { align-self: flex-end; background: var(--vibrant-teal); border: none; box-shadow: none; color: var(--text-on-primary); } .chat__status-badge { color: var(--vibrant-teal); border-color: var(--vibrant-teal); } .chat__receipt { display: inline-flex; align-items: center; gap: var(--space-1px); padding-block: var(--space-1-5px); padding-inline: var(--space-9px); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-pill); background: var(--white); color: var(--deepest-slate); font-size: var(--font-size-12); } .chat__receipt--read { background: var(--light-slate); color: var(--dark-slate); } .chat__receipt--delivered { background: var(--light-teal); color: var(--strong-teal); border-color: var(--strong-teal); } .chat__typing-indicator { display: inline-flex; gap: var(--space-1-5px); align-items: center; } .chat__typing-indicator__dot { width: var(--size-10px); height: var(--size-10px); background: var(--dark-slate); border-radius: var(--radius-pill); opacity: var(--opacity-light); animation: typingBlink var(--animation-smooth) infinite; } .chat__typing-indicator__dot--2 { animation-delay: var(--animation-smooth); } .chat__typing-indicator__dot--3 { animation-delay: var(--animation-deliberate); } .chat__composer { display: flex; flex-direction: column; align-items: stretch; gap: var(--chat-composer-gap); margin: 0; min-width: 0; } .chat__composer-icon-btn { width: var(--size-28px); height: var(--size-28px); min-width: var(--size-28px); min-height: var(--size-28px); border-radius: var(--radius-pill); --btn-icon-w: var(--size-14px); --btn-icon-h: var(--size-14px); } .chat__composer-control { display: inline-flex; align-items: flex-end; } .chat__composer-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-5px); flex-wrap: wrap; min-width: 0; } .chat__composer-delivery-controls { display: inline-flex; align-items: center; gap: var(--space-1px); flex-wrap: wrap; min-width: 0; } .chat__composer-action-row { display: inline-flex; align-items: center; gap: var(--space-1px); flex-wrap: wrap; min-width: 0; } .chat__composer-picker-actions { display: inline-flex; align-items: center; gap: var(--space-1px); flex-wrap: wrap; min-width: 0; } .chat__composer-picker-actions .menu__emoji-btn { width: var(--size-32px); height: var(--size-32px); min-width: var(--size-32px); min-height: var(--size-32px); padding: 0; border: 0; font-size: var(--font-size-18); } .chat__composer-action-row { margin-left: auto; } .chat__composer-control--select { --field-gap: var(--space-0-5px); --field-label-margin-bottom: 0; } .chat__composer-field-label { font-size: var(--font-size-12); color: var(--soft-slate); line-height: 1; white-space: nowrap; cursor: pointer; } .chat__composer-select-trigger { min-width: var(--size-80px); max-width: var(--size-240px); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-pill); background: var(--white); color: var(--deepest-slate); font-size: var(--font-size-12); line-height: var(--line-height-tight); height: var(--size-28px); min-height: var(--size-28px); padding: 0 var(--space-9px); } .chat__composer-format-actions { display: inline-flex; align-items: center; gap: var(--space-0-5px); } .chat__composer-private-toggle--active { color: var(--vibrant-teal); background: var(--teal-glass-soft-12); } /* Mobile: keep composer padding symmetric for maximum input width. */ @media (max-width: 767px) { .chat__composer { padding-right: var(--space-9px); } .chat__composer-control { width: var(--size-100pct); } .chat__composer-controls { width: var(--size-100pct); } .chat__composer-delivery-controls { width: var(--size-100pct); } .chat__composer-action-row { width: var(--size-100pct); } .chat__composer-action-row { justify-content: flex-start; margin-left: 0; } .chat__composer-format-actions { width: var(--size-100pct); justify-content: flex-start; } .chat__composer-select-trigger { flex: 1 1 auto; min-width: 0; } .chat__message-row { gap: var(--space-1px); } .chat__message-avatar--inbound { align-self: flex-end; } .chat__message-avatar--outbound { align-self: flex-end; } } .chat__input { flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto); min-height: var(--space-12px); max-height: var(--size-320px); border: none; border-radius: 0; padding: var(--space-5px); background: transparent; color: var(--deepest-slate); resize: none; font-family: var(--font-family-primary); font-size: var(--font-size-12); line-height: var(--line-height-normal); } .chat__input:focus { outline: none; box-shadow: none; } .chat__formatted-content__p { margin: 0; } .chat__formatted-content__ul { margin: var(--space-1px) 0; padding-inline-start: var(--space-4px); } .chat__formatted-content__code { display: inline-block; padding: var(--space-1px) var(--space-5px); border-radius: var(--radius-standard); background: var(--soft-slate); font-family: var(--font-family-mono); font-size: var(--font-size-12); } .chat__formatted-content__a { color: var(--vibrant-teal); text-decoration: underline; } .chat__actions { display: flex; gap: var(--space-1-5px); align-items: flex-end; } /* Chat context menu (used by message actions) */ .chat__context-menu { position: relative; display: inline-flex; } .chat__template-picker { position: relative; display: inline-flex; } .chat__status-badge-wrapper { position: relative; display: inline-flex; } .chat__context-menu-dropdown { position: absolute; inset-inline: auto 0; inset-block: var(--inset-block-below); margin-top: var(--space-1px); min-width: var(--width-200px); z-index: var(--z-popover); } /* ============================================================ Communications overview — group-by selector + grouped list view ============================================================ */ .comms-overview { display: flex; flex-direction: column; height: var(--size-100pct); min-height: 0; overflow: hidden; } .comms-overview__view-selector { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); border-bottom: var(--input-border-width-thin) solid var(--soft-slate); flex-shrink: 0; } .comms-overview__view-label { font-size: var(--font-size-12); color: var(--medium-slate); margin-right: var(--space-1px); white-space: nowrap; } .comms-grouped-view { flex: 1 1 auto; overflow-y: auto; padding: var(--space-1-5px) var(--space-9px); display: flex; flex-direction: column; gap: var(--space-9px); } .comms-grouped-view__empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--medium-slate); font-size: var(--font-size-12); padding: var(--space-24px); } .comms-grouped-view__group { display: flex; flex-direction: column; border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); overflow: hidden; } .comms-grouped-view__group-header { display: flex; align-items: center; gap: var(--space-1px); padding: var(--space-1px) var(--space-9px); background: var(--light-slate); border-bottom: var(--input-border-width-thin) solid var(--soft-slate); } .comms-grouped-view__group-name { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--deepest-slate); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comms-grouped-view__group-count { font-size: var(--font-size-12); color: var(--medium-slate); background: var(--soft-slate); border-radius: var(--radius-pill); padding: var(--space-1px) var(--space-1px); flex-shrink: 0; } .comms-grouped-view__row { display: flex; align-items: center; gap: var(--space-1-5px); padding: var(--space-1px) var(--space-9px); cursor: pointer; border-bottom: var(--input-border-width-thin) solid var(--soft-slate); transition: background var(--animation-quick); min-width: 0; } .comms-grouped-view__row:last-child { border-bottom: none; } .comms-grouped-view__row:hover { background: var(--light-slate); } .comms-grouped-view__row--unread { background: var(--light-teal); } .comms-grouped-view__row--unread:hover { background: var(--light-teal); filter: brightness(0.97); } .comms-grouped-view__row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-12); color: var(--deepest-slate); } .comms-grouped-view__row-title--unread { font-weight: var(--weight-medium); } .comms-grouped-view__row-meta { font-size: var(--font-size-12); color: var(--medium-slate); white-space: nowrap; flex-shrink: 0; } .comms-grouped-view__row-time { font-size: var(--font-size-12); color: var(--medium-slate); white-space: nowrap; flex-shrink: 0; } .comms-grouped-view__row-unread { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--white); background: var(--vibrant-teal); border-radius: var(--radius-pill); padding: var(--space-1px) var(--space-1px); min-width: var(--size-18px); text-align: center; flex-shrink: 0; } /* ============================================================ Private note (public_visibility=false) — ops-only amber tint Only ops users see these messages; non-ops are filtered at the API level. Amber tint makes the private status visible at a glance without obscuring content. ============================================================ */ .chat__bubble--private { background: var(--warning-surface); border-color: var(--warning-50); color: var(--deepest-slate); } /* ============================================================ TemplatePicker — Quick access to message templates ============================================================ */ .chat__template-picker-dropdown { position: absolute; bottom: calc(var(--size-100pct) + var(--space-1px)); left: 0; width: var(--size-320px); max-height: var(--size-400px); overflow-y: auto; background: var(--white); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); box-shadow: var(--shadow-elevated); z-index: var(--z-dropdown); } .chat__template-picker-loading { padding: var(--space-4px); text-align: center; color: var(--medium-slate); font-size: var(--font-size-12); } .chat__template-picker-empty { padding: var(--space-4px); text-align: center; color: var(--medium-slate); font-size: var(--font-size-12); } .chat__template-picker-list { display: flex; flex-direction: column; gap: 0; } .chat__quick-replies-list { display: flex; flex-direction: column; gap: 0; } .chat__quick-reply-item { display: flex; flex-direction: column; gap: 0; } .chat__template-picker-item { display: flex; flex-direction: column; gap: var(--space-1px); padding: var(--space-9px); text-align: left; background: transparent; border: none; border-bottom: var(--input-border-width-thin) solid var(--soft-slate); cursor: pointer; transition: background var(--animation-instant) var(--easing-smooth); } .chat__template-picker-item:last-child { border-bottom: none; } .chat__template-picker-item:hover { background: var(--teal-glass-soft-12); } .chat__template-picker-item--selected { background: var(--teal-glass-soft-12); } .chat__template-picker-item-name { font-size: var(--font-size-12); font-weight: var(--weight-semibold); color: var(--deepest-slate); } .chat__template-picker-item-content { font-size: var(--font-size-12); color: var(--medium-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ QuickReplies — AI-powered quick reply suggestions ============================================================ */ .chat__quick-replies { margin: var(--space-1px) var(--space-9px) 0; padding: var(--space-1px) 0; border-top: var(--input-border-width-thin) solid var(--slate-glass-light-20); } .chat__quick-replies-content { display: flex; flex-direction: column; gap: 0; padding: 0; } .chat__quick-replies-collapsed { margin: var(--space-1-5px) var(--space-9px) var(--space-1px); padding: var(--space-1px) var(--space-9px); } .chat__quick-replies-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--space-1px); } .chat__quick-replies-meta { display: inline-flex; align-items: center; gap: var(--space-1px); flex-wrap: nowrap; } .chat__quick-replies-meta-action { width: var(--size-20px); height: var(--size-20px); min-width: var(--size-20px); min-height: var(--size-20px); display: inline-flex; align-items: center; justify-content: center; } .chat__quick-reply-main { display: flex; align-items: flex-start; gap: var(--space-1px); } .chat__quick-reply-trigger-host { flex: 1 1 auto; min-width: 0; } .chat__quick-reply-divider { border-top: var(--input-border-width-thin) solid var(--slate-glass-light-20); margin-top: var(--space-1px); padding-top: var(--space-1px); } .chat__quick-reply-feedback-actions { display: inline-flex; align-items: center; gap: var(--space-1px); padding: 0 0 var(--space-1px) var(--space-1px); opacity: 0.85; } .chat__quick-reply-message { flex: 1 1 auto; min-width: 0; white-space: normal; text-wrap: pretty; overflow-wrap: anywhere; } @media (max-width: 767px) { .chat__quick-replies { margin-inline: var(--space-5px); } .chat__quick-replies-meta { flex-wrap: wrap; } } /* ============================================================ LinkPreview — Rich URL previews (Slack-style unfurling) ============================================================ */ .chat__link-preview { display: flex; gap: var(--space-9px); margin-top: var(--space-1-5px); padding: var(--space-9px); background: var(--white); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); text-decoration: none; color: var(--text-default); transition: all var(--animation-instant) var(--easing-smooth); } .chat__link-preview:hover { box-shadow: var(--shadow-soft); border-color: var(--vibrant-teal); } .chat__link-preview-image { width: var(--size-64px); height: var(--size-64px); flex-shrink: 0; object-fit: cover; border-radius: var(--radius-standard); } .chat__link-preview-content { display: flex; flex-direction: column; gap: var(--space-1px); flex: 1 1 auto; min-width: 0; } .chat__forward-thread-info { display: flex; flex-direction: column; gap: var(--space-1px); flex: 1 1 auto; min-width: 0; } .chat__link-preview-title { font-size: var(--font-size-12); font-weight: var(--weight-semibold); color: var(--deepest-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat__forward-thread-name { font-size: var(--font-size-12); font-weight: var(--weight-semibold); color: var(--deepest-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat__link-preview-description { font-size: var(--font-size-12); color: var(--medium-slate); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .chat__link-preview-site { font-size: var(--font-size-12); color: var(--medium-slate); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .chat__link-preview--inline { display: inline; padding: 0; margin: 0; background: none; border: none; color: var(--vibrant-teal); text-decoration: underline; } .chat__link-preview--inline:hover { color: var(--deep-teal); } .chat__link-preview--loading { background: var(--white-glass-faint-10); animation: shimmer var(--animation-deliberate) infinite; } @keyframes shimmer { 0% { opacity: 1; } 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ============================================================ MessageForwardModal — Forward messages to other threads ============================================================ */ .chat__forward-modal { display: flex; flex-direction: column; gap: var(--space-4px); width: var(--size-500px); max-width: var(--size-viewport-photo-viewer-width); } .chat__forward-thread-list { display: flex; flex-direction: column; gap: var(--space-1px); max-height: var(--size-300px); overflow-y: auto; padding: var(--space-1px); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); } .chat__forward-thread-item { display: flex; align-items: center; gap: var(--space-9px); padding: var(--space-9px); background: transparent; border: var(--input-border-width-thin) solid transparent; border-radius: var(--radius-standard); cursor: pointer; transition: all var(--animation-instant) var(--easing-smooth); text-align: left; } .chat__forward-thread-item:hover { background: var(--teal-glass-soft-12); border-color: var(--soft-slate); } .chat__forward-thread-item--selected { background: var(--teal-glass-subtle-25); border-color: var(--vibrant-teal); } .chat__forward-thread-preview { font-size: var(--font-size-12); color: var(--medium-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ ConversationStatusBadge — Thread status management ============================================================ */ .chat__status-dropdown { position: absolute; top: calc(var(--size-100pct) + var(--space-1px)); right: 0; min-width: var(--size-160px); background: var(--white); border: var(--input-border-width-thin) solid var(--soft-slate); border-radius: var(--radius-standard); box-shadow: var(--shadow-elevated); z-index: var(--z-dropdown); display: flex; flex-direction: column; gap: var(--space-1px); padding: var(--space-1px); } /* ── Conversation View Refactored Layout (flex-based, no nested Panel) ──── */ /** * Main flex container for refactored ConversationView. * Structure: [header] [messages scroll] [footer] */ .conversation-view__flex-container { display: flex; flex-direction: column; height: var(--size-100pct); width: var(--size-100pct); gap: 0; min-height: 0; min-width: 0; } /** * Header section: Avatar, title, subtitle, actions, toolbar. * Fixed height, no scroll. */ .conversation-header { flex: 0 0 auto; border-bottom: var(--input-border-width-thin) solid var(--teal-glass-soft-12); padding: var(--space-9px); background: transparent; min-width: 0; } /** * Scrollable messages region. * Flex: 1 to expand and fill available space. * Must use min-height: 0 to enable scroll in flex child. */ .conversation-view__messages-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; min-height: 0; min-width: 0; width: var(--size-100pct); display: flex; flex-direction: column; padding: var(--space-9px) 0; } /** * Footer section: Composer, notices, typing, reply context, etc. * Fixed height or auto-expand (depends on content height). * Does not scroll; sits above messages scroll. */ .conversation-composite-footer { flex: 0 0 auto; border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12); padding: var(--space-9px); background: transparent; min-width: 0; display: flex; flex-direction: column; gap: var(--space-9px); } /* Modal structural utilities (shared across semantic stacks) Canonical structure: modal overlay containing modal surface. */ .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: var(--size-viewport-width-dynamic); height: var(--size-viewport-height-dynamic); background: var(--black-glass-opaque-65); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); backdrop-filter: blur(4px); animation: modalFadeIn var(--animation-smooth) var(--easing-smooth); padding: var(--space-18px); overflow: auto; } /* Full-screen modals need stronger background diffusion to reduce visual noise. */ .modal__overlay--full { backdrop-filter: blur(8px); } .modal__overlay[data-size="full"] { backdrop-filter: blur(8px); } .modal__overlay--dark { background: var(--black-glass-heavy-40); } .modal__overlay[data-tone="dark"] { background: var(--black-glass-heavy-40); } .modal__overlay--subtle { background: var(--black-glass-strong-30); backdrop-filter: blur(2px); } .modal__overlay[data-tone="subtle"] { background: var(--black-glass-strong-30); backdrop-filter: blur(2px); } /* Canonical modal container */ .modal { /* Panel header gradient override */ --panel-header-gradient: linear-gradient(180deg, var(--teal-glass-soft-12) var(--stop-start), transparent var(--stop-end)); --panel-header-backdrop: none; outline: none; /* tabIndex={-1} for keyboard trap — prevent browser default blue outline */ box-shadow: var(--shadow-soft), var(--focus-ring-subtle); animation: modalSlideIn var(--animation-smooth) var(--easing-snappy); background: var(--modal-surface-elevated); /* Default medium width; size modifiers override */ max-width: var(--width-800px); width: var(--modal-width-fluid); max-height: calc(var(--size-viewport-height-dynamic) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-24px)); position: relative; color: var(--text-primary); display: flex; flex-direction: column; overflow: hidden; /* body scrolls; header/footer stay pinned */ padding: 0; border: var(--input-border-width-thin) solid var(--modal-border); border-radius: var(--radius-standard); } /* Shine overlay on modals */ .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--size-40pct); background: var(--overlay-shine-subtle); pointer-events: none; z-index: 0; opacity: 0.7; } @media (prefers-reduced-motion: reduce) { .modal__overlay { animation: none; } .modal-overlay { animation: none; } .modal { animation: none; } } /* Modal size variants - Semantic sizing based on content purpose SEMANTIC SIZE GUIDE: - auto-fit: Auto-sizes to content (400-800px range) - confirm: Yes/no prompts and confirmations (~440px) - progress: Progress indicators with details (~500px) - complex: Legacy alias for full - wizard: Full-screen workflows with side-by-side panes (80vw x 80dvh) - full: Fullscreen modal (90vw x 90vh, default) */ .modal--auto-fit { width: fit-content; max-width: min(var(--width-800px), 90vw); min-width: var(--width-400px); } .modal[data-size="auto-fit"] { width: fit-content; max-width: min(var(--width-800px), 90vw); min-width: var(--width-400px); } .modal--confirm { max-width: var(--size-440px); width: var(--modal-width-fluid); } .modal[data-size="confirm"] { max-width: var(--size-440px); width: var(--modal-width-fluid); } .modal--progress { max-width: var(--size-500px); width: var(--modal-width-fluid); } .modal[data-size="progress"] { max-width: var(--size-500px); width: var(--modal-width-fluid); } .modal--wizard { /* Step-through workflows: slightly smaller than full to feel contained */ width: var(--size-max-width-screen-80); max-width: var(--size-max-width-screen-80); height: 80dvh; max-height: 80dvh; min-width: 0; min-height: 0; } .modal[data-size="wizard"] { /* Step-through workflows: slightly smaller than full to feel contained */ width: var(--size-max-width-screen-80); max-width: var(--size-max-width-screen-80); height: 80dvh; max-height: 80dvh; min-width: 0; min-height: 0; } /* Smaller screens: maximize viewport usage */ @media (max-width: 1099px) { .modal--wizard { width: var(--size-max-width-screen-96); max-width: var(--size-max-width-screen-96); height: 92dvh; max-height: 92dvh; } .modal[data-size="wizard"] { width: var(--size-max-width-screen-96); max-width: var(--size-max-width-screen-96); height: 92dvh; max-height: 92dvh; } } /* Split-pane layout — usable inside any modal size. Structure: modal fill containing split panes. Each pane scrolls independently; the modal container never grows. */ .modal__fill { display: flex; flex-direction: column; height: var(--size-100pct); min-height: 0; gap: var(--space-12px); } .modal__split { display: grid; grid-template-columns: minmax(300px, 0.75fr) 1fr; gap: var(--space-12px); flex: 1 1 auto; min-height: 0; overflow: hidden; height: var(--size-100pct); } .modal__pane { min-width: 0; min-height: 0; overflow: auto; } .modal__pane--image { display: flex; align-items: center; justify-content: center; background: var(--card-surface); border: var(--input-border-width-thin) solid var(--card-border); border-radius: var(--radius-standard); padding: var(--space-9px); } .wizard-receipt-image { width: var(--size-100pct); height: var(--size-100pct); max-width: var(--size-100pct); max-height: var(--size-100pct); object-fit: contain; display: block; transform-origin: top left; transition: transform 0.2s ease; } .wizard-receipt-image--z-50 { transform: scale(0.5); } .wizard-receipt-image--z-75 { transform: scale(0.75); } .wizard-receipt-image--z-100 { transform: scale(1); } .wizard-receipt-image--z-125 { transform: scale(1.25); } .wizard-receipt-image--z-150 { transform: scale(1.5); } .wizard-receipt-image--z-175 { transform: scale(1.75); } .wizard-receipt-image--z-200 { transform: scale(2); } .wizard-receipt-image--z-225 { transform: scale(2.25); } .wizard-receipt-image--z-250 { transform: scale(2.5); } .wizard-receipt-image--z-275 { transform: scale(2.75); } .wizard-receipt-image--z-300 { transform: scale(3); } .wizard-image-frame { overflow: auto; max-height: var(--size-max-height-screen-70); border: var(--input-border-width-thin) solid var(--input-border); border-radius: var(--radius-standard); padding: var(--space-1-5px); } .wizard-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-9px); } .wizard-scroll-x { overflow-x: auto; width: var(--size-100pct); min-width: 0; } .wizard-table { width: var(--size-100pct); } .wizard-table__cell { /* Base hook for alignment modifiers. */ } .wizard-table__cell--left { text-align: left; } .wizard-table__cell--right { text-align: right; } .wizard-table__cell--top { vertical-align: top; } .wizard-table__cell--right-top { text-align: right; vertical-align: top; } .modal--full { width: var(--size-viewport-photo-viewer-width); max-width: var(--size-viewport-photo-viewer-width); height: var(--size-max-height-screen-90); max-height: var(--size-max-height-screen-90); } .modal[data-size="full"] { width: var(--size-viewport-photo-viewer-width); max-width: var(--size-viewport-photo-viewer-width); height: var(--size-max-height-screen-90); max-height: var(--size-max-height-screen-90); } /* Balanced form layout for very wide modal content: - Keep readable max line lengths - On large desktop, place sections in a 2-column grid - Keep footer/actions full-width below sections */ .form--balanced { width: min(var(--size-100pct), var(--size-max-width-screen-96)); margin-inline: auto; } @media (min-width: 1280px) { .form--balanced { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9px); align-items: start; --form-section-mb: 0; --form-section-divider-display: none; --form-actions-gc: 1 / -1; } } .modal__row { display: flex; flex-direction: row; gap: var(--space-1-5px); align-items: center; } .modal__row--align-start { align-items: flex-start; } .modal__row--align-center { align-items: center; } .modal__row--align-end { align-items: flex-end; } .modal__row--justify-start { justify-content: flex-start; } .modal__row--justify-center { justify-content: center; } .modal__row--justify-end { justify-content: flex-end; } .modal__row--justify-between { justify-content: space-between; } /* Combined modifiers — align + justify in one class (max one modifier per base rule) */ .modal__row--between { justify-content: space-between; } .modal__row--between-start { align-items: flex-start; justify-content: space-between; } .modal__row--wrap { flex-wrap: wrap; } /* Inline email-input inside a modal__row (flex: 1 + right spacing before an action button). */ .modal__email-input { flex: 1; margin-right: var(--space-9px); } .modal__group { display: flex; flex-direction: column; gap: var(--space-1-5px); align-items: flex-start; } /* Card-like sections rendered inside modals. These mirror the visual chrome of .card but scoped to modal bodies so that modal forms do not need to depend on the Card component. */ .modal__section { position: relative; width: var(--size-100pct); min-width: 0; max-width: var(--size-100pct); background: var(--modal-surface-elevated); border: var(--input-border-width-thin) solid var(--modal-border); border-radius: var(--radius-standard); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--white-glass-light-20); padding: var(--space-9px); box-sizing: border-box; } .modal__section--borderless { background: transparent; border: none; box-shadow: none; padding: 0; } .modal-form-body { display: flex; flex-direction: column; gap: var(--space-1-5px); } /* Floating close button wrapper — composed modals (no title prop). Pins the X to the top-right of .modal (position: relative; overflow: hidden) so it stays visible even when inner content scrolls. */ .modal__floating-close { position: absolute; top: var(--space-9px); right: var(--space-9px); z-index: 2; } .modal__close { position: absolute; top: var(--space-12px); right: var(--space-12px); background: transparent; border: none; font-size: var(--font-size-16); cursor: pointer; color: var(--dark-slate); width: var(--space-24px); height: var(--space-24px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); transition: all var(--animation-quick) var(--easing-smooth); } .modal__close:hover { background-color: var(--light-slate); color: var(--deepest-slate); } /* ============================================================================= 76-MODALS-CORE.CSS - CORE MODAL SYSTEM ============================================================================= Base modal system with overlays, dialog boxes, popovers, and tooltips. Focus on fundamental modal patterns with semantic tokens. ============================================================================= */ /* ================================================================= OVERLAY & MODAL FOUNDATION Core patterns for all modal-like components ================================================================= */ /* Structural modal classes live in */ /* ================================================================= DENSITY OVERRIDES Must come before UT modal styles to avoid specificity conflicts ================================================================= */ /* ================================================================= UNIVERSAL TEMPLATE MODAL VARIANTS Modals that follow UT design patterns (form modals, centered headers) ================================================================= */ /* ================================================================= POPOVER COMPONENTS ================================================================= */ .popover { position: absolute; z-index: var(--z-popover); background: var(--gradient-teal-diagonal-tiertiary-light); border: var(--input-border-width-thin) solid var(--teal-dark-glass-clear-18); border-radius: var(--radius-standard); box-shadow: var(--shadow-elevated); padding: var(--space-9px); min-width: var(--width-200px); overflow: hidden; position: relative; } /* Shine overlay on popover */ .popover::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--size-50pct); background: var(--overlay-shine-subtle); pointer-events: none; z-index: 0; opacity: 0.6; } .popover__arrow { position: absolute; width: var(--space-0); height: var(--space-0); border: var(--space-1px) solid transparent; } .popover__arrow--top { top: calc(var(--space-9px) * -1); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)); border-bottom-color: var(--white-glass-frosted-90); } .popover__arrow--bottom { bottom: calc(var(--space-9px) * -1); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)); border-top-color: var(--white-glass-frosted-90); } .popover__arrow--left { left: calc(var(--space-9px) * -1); top: var(--position-center-block); transform: translateY(var(--offset-center-block)); border-right-color: var(--white-glass-frosted-90); } .popover__arrow--right { right: calc(var(--space-9px) * -1); top: var(--position-center-block); transform: translateY(var(--offset-center-block)); border-left-color: var(--white-glass-frosted-90); } /* Dropdown menu positioning (reuses semantics) */ .select__menu { position: absolute; inset-inline: var(--inset-0) auto; inset-block: var(--inset-block-below); } .select__menu--bottom-right { inset-inline: auto 0; } .select__menu--top-left { inset-block: var(--inset-block-above); } .select__menu--top-right { inset-block: var(--inset-block-above); inset-inline: auto 0; } /* ================================================================= TOOLTIP COMPONENTS Shared base styles + specific variants for classic and help tooltips ================================================================= */ /* Shared visual container for all tooltips */ .tooltip { position: absolute; /* Raise above UT and menus */ z-index: var(--z-tooltip); background: var(--white-glass-frosted-90); padding: var(--space-1px) var(--space-9px); border-radius: var(--radius-standard); font-size: var(--font-size-12); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); box-shadow: var(--shadow-moderate); backdrop-filter: var(--saturation-lg) var(--blur-sm); pointer-events: none; } .help-tooltip__content { position: absolute; /* Raise above UT and menus */ z-index: var(--z-tooltip); background: var(--white-glass-frosted-90); padding: var(--space-1px) var(--space-9px); border-radius: var(--radius-standard); font-size: var(--font-size-12); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); box-shadow: var(--shadow-moderate); backdrop-filter: var(--saturation-lg) var(--blur-sm); pointer-events: none; } /* SemanticTooltip wrapper: must be layout-safe for wrapping block elements (e.g., KPI tiles, icon buttons in Drawer headers). */ .tooltip-trigger { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: var(--size-100pct); } /* Fill variant: stretch to fill the cell (e.g. KPI tiles in kpi-grid__row). */ .tooltip-trigger--fill { display: flex; width: var(--size-100pct); height: var(--size-100pct); align-self: stretch; } .tooltip { color: var(--text-on-primary); white-space: nowrap; } .help-tooltip__content { color: var(--deepest-slate); padding: var(--space-1-5px) var(--space-9px); line-height: var(--line-height-standard); width: max-content; max-width: var(--tooltip-help-max-width-fluid); white-space: normal; overflow-wrap: break-word; animation: none; text-align: left; font-size: var(--font-size-12); pointer-events: none; } .help-tooltip__content::after { content: ''; position: absolute; width: var(--size-10px); height: var(--size-10px); background: var(--white-glass-frosted-90); transform: rotate(90deg); box-shadow: var(--shadow-moderate); border-left: var(--input-border-width-thin) solid var(--soft-gray); border-top: var(--input-border-width-thin) solid var(--soft-gray); } .help-tooltip__content--pos-top::after { bottom: calc(var(--space-1px) * -1); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)) rotate(90deg); } .help-tooltip__content--pos-bottom::after { top: calc(var(--space-1px) * -1); left: var(--position-center-inline); transform: translateX(var(--offset-center-inline)) rotate(90deg); } .help-tooltip__content--pos-left::after { right: calc(var(--space-1px) * -1); top: var(--position-center-block); transform: translateY(var(--offset-center-block)) rotate(90deg); } .help-tooltip__content--pos-right::after { left: calc(var(--space-1px) * -1); top: var(--position-center-block); transform: translateY(var(--offset-center-block)) rotate(90deg); } /* Dense sizing variants */ .tooltip--dense { font-size: var(--font-size-12); padding: var(--space-1-5px) var(--space-9px); } .help-tooltip--dense { font-size: var(--font-size-12); padding: var(--space-1-5px) var(--space-9px); } /* Header service health tooltip: brand-aligned glass teal treatment. */ .help-tooltip--service-health { background: var(--deep-teal); color: var(--text-on-primary); border-color: var(--teal-dark-glass-clear-18); box-shadow: var(--shadow-soft); backdrop-filter: none; font-weight: var(--weight-semibold); animation: tooltipFadeIn var(--animation-quick) var(--easing-smooth) both; } .help-tooltip--service-health::after { background: var(--deep-teal); border-left-color: var(--teal-dark-glass-clear-18); border-top-color: var(--teal-dark-glass-clear-18); box-shadow: var(--shadow-soft); } .help-tooltip__list-scroll { max-height: var(--size-80px); overflow-y: auto; padding-inline-end: var(--space-0-5px); } .help-tooltip__list { margin: 0; padding-inline-start: var(--space-9px); display: flex; flex-direction: column; gap: var(--space-0-5px); } .help-tooltip__list-item { margin: 0; color: var(--text-primary); } /* No-wrap modifier for single-line hints */ .tooltip--nowrap { white-space: nowrap; } /* ================================================================= RESPONSIVE ADJUSTMENTS ================================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .modal { width: var(--size-100pct); max-height: var(--height-screen-full); margin: var(--space-9px); } .modal-header { padding: var(--space-9px) var(--space-12px); } .modal-body { padding: var(--space-9px) var(--space-12px); } .modal-footer { padding: var(--space-9px) var(--space-12px); } .modal-close { top: var(--space-9px); right: var(--space-9px); } } /* ================================================================= MOBILE MODAL ENHANCEMENTS Mobile-specific modal behavior and safe area support ================================================================= */ @media (max-width: 767px) { .modal__overlay { /* Reserve space for the app header (top) and mobile nav bar (bottom). Add a small horizontal gap so rounded corners are visible. */ padding-top: calc(var(--app-header-height) + env(safe-area-inset-top, 0px) + var(--space-1px)); padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-1px)); padding-left: calc(env(safe-area-inset-left, 0px) + var(--space-1px)); padding-right: calc(env(safe-area-inset-right, 0px) + var(--space-1px)); } .modal-overlay { /* Reserve space for the app header (top) and mobile nav bar (bottom). Add a small horizontal gap so rounded corners are visible. */ padding-top: calc(var(--app-header-height) + env(safe-area-inset-top, 0px) + var(--space-1px)); padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-1px)); padding-left: calc(env(safe-area-inset-left, 0px) + var(--space-1px)); padding-right: calc(env(safe-area-inset-right, 0px) + var(--space-1px)); } .modal { width: var(--size-viewport-full); max-width: none; max-height: calc( var(--size-viewport-height-full) - var(--app-header-height) - var(--mobile-nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - (2 * var(--space-1px)) ); margin: var(--space-0); border-radius: var(--radius-standard); /* Reduce shell padding so sections are closer to the modal edge on mobile. */ padding: var(--space-1px); } .modal--full { width: var(--size-viewport-full); max-width: var(--size-viewport-full); height: auto; max-height: calc( var(--size-viewport-height-full) - var(--app-header-height) - var(--mobile-nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - (2 * var(--space-1px)) ); } .modal[data-size="full"] { width: var(--size-viewport-full); max-width: var(--size-viewport-full); height: auto; max-height: calc( var(--size-viewport-height-full) - var(--app-header-height) - var(--mobile-nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - (2 * var(--space-1px)) ); } /* Mobile guardrail: desktop min-width tokens on data--* fields must not force horizontal overflow inside full-screen modals. */ /* Mobile filter sheet hardening: - preserve inset from parent/screen edge - normalize filter input sizing/width - reduce dead blank space between controls */ .modal__overlay--auto-fit:has(.panel--mobile-filter-modal) { padding: var(--space-1-5px); } .modal__overlay[data-size="auto-fit"]:has(.panel--mobile-filter-modal) { padding: var(--space-1-5px); } .modal--auto-fit:has(.panel--mobile-filter-modal) { width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; margin: var(--space-0); } .modal[data-size="auto-fit"]:has(.panel--mobile-filter-modal) { width: var(--size-100pct); max-width: var(--size-100pct); min-width: 0; margin: var(--space-0); } .panel--mobile-filter-modal { display: flex; flex-direction: column; gap: var(--space-1-5px); padding: var(--space-0-5px) var(--space-0) var(--space-1px); } .panel__search--mobile-filter-modal { display: flex; flex-direction: column; width: var(--size-100pct); min-width: 0; } .panel__scrollable-body--mobile-filter-modal { display: flex; flex-direction: column; width: var(--size-100pct); min-width: 0; } .modal--bottom-sheet { align-self: flex-end; width: var(--size-100pct); max-height: var(--height-400px); margin: var(--space-0); border-radius: var(--radius-standard) var(--radius-standard) 0 0; animation: modalSlideUpIn var(--animation-smooth) var(--easing-smooth); } /* Larger touch targets on mobile */ .modal-close { min-width: var(--size-32px); min-height: var(--size-32px); display: flex; align-items: center; justify-content: center; } /* Mobile gesture hints */ .modal-bottom-sheet::before { content: ''; display: block; width: var(--space-24px); height: var(--space-1-5px); background: var(--soft-gray); border-radius: var(--radius-standard); margin: var(--space-9px) auto var(--space-9px); opacity: var(--opacity-soft); } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .modal-footer-touch-btn { min-height: var(--size-32px); padding: var(--space-9px) var(--space-12px); } .modal-close:hover { background: var(--light-slate); } } /* 77-bottom-sheet.css - Tokenized bottom sheet component (canonical) */ .bottom-sheet-backdrop { position: fixed; inset: var(--inset-0); background: var(--black-glass-subtle-05); backdrop-filter: var(--blur-2xs); z-index: var(--z-modal); display: flex; align-items: flex-end; } .bottom-sheet { width: var(--size-100pct); background: var(--white-glass-frosted-90); border-top-left-radius: var(--radius-standard); border-top-right-radius: var(--radius-standard); border: var(--input-border-width-thin) solid var(--soft-gray); box-shadow: var(--shadow-moderate); max-height: var(--height-400px); overflow: auto; padding: var(--space-9px); padding-bottom: calc(var(--space-12px) + env(safe-area-inset-bottom, 0)); } .bottom-sheet-header { padding-bottom: var(--space-9px); border-bottom: var(--input-border-width-thin) solid var(--soft-gray); margin-bottom: var(--space-9px); } .bottom-sheet-content { color: var(--deepest-slate); } /* Optional grab handle */ .bottom-sheet__handle { width: var(--size-56px); height: var(--space-1-5px); border-radius: var(--radius-pill); background: var(--soft-gray); margin: var(--space-1px) auto var(--space-9px); } .popover { position: absolute; z-index: var(--z-popover); background: var(--white-glass-frosted-90); border: var(--input-border-width-thin) solid var(--soft-gray); border-radius: var(--radius-standard); box-shadow: var(--shadow-moderate); padding: var(--space-9px); min-width: var(--width-200px); } /* (popover, caret dropdown, and tooltip styles moved to earlier canonical block) */ .modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top, var(--space-9px)) env(safe-area-inset-right, var(--space-9px)) env(safe-area-inset-bottom, var(--space-9px)) env(safe-area-inset-left, var(--space-9px)); z-index: var(--z-modal); } .modal-bottom-sheet { align-self: flex-end; width: var(--size-100pct); max-height: var(--height-400px); margin: var(--space-0); border-radius: var(--radius-standard) var(--radius-standard) 0 0; animation: modalSlideUpIn var(--animation-smooth) var(--easing-smooth); } .modal-close { min-width: var(--height-150px); min-height: var(--height-150px); display: flex; align-items: center; justify-content: center; } .modal-bottom-sheet::before { content: ''; display: block; width: var(--space-24px); height: var(--space-1-5px); background: var(--soft-gray); border-radius: var(--radius-standard); margin: var(--space-9px) auto var(--space-1-5px); opacity: var(--opacity-soft); } @media (hover: none) and (pointer: coarse) { .modal-footer-btn { min-height: var(--height-150px); padding: var(--space-9px) var(--space-12px); } .modal-close:hover { background: var(--white-glass-bright-86); } } .bottom-sheet-backdrop { position: fixed; inset: var(--inset-0); background: var(--black-glass-strong-30); backdrop-filter: var(--blur-2xs); z-index: var(--z-modal); display: flex; align-items: flex-end; } .bottom-sheet-header { padding-bottom: var(--space-1-5px); border-bottom: var(--input-border-width-thin) solid var(--soft-gray); margin-bottom: var(--space-1-5px); } .bottom-sheet-content { color: var(--deeper-slate); } .bottom-sheet__handle { width: var(--size-56px); height: var(--space-1-5px); border-radius: var(--radius-pill); background: var(--soft-gray); margin: var(--space-1px) auto var(--space-1-5px); } /* Receipt image zoom utilities */ .receipt-image { max-height: calc(var(--size-max-height-screen-80) - var(--space-18px)); max-width: var(--size-50pct); min-width: var(--width-200px); width: auto; height: auto; object-fit: contain; cursor: zoom-in; transition: transform var(--animation-smooth) var(--easing-smooth); flex-shrink: 0; user-select: none; align-self: flex-start; } .receipt-image--zoomed { cursor: zoom-out; transform: scale(2); transform-origin: center; } .receipt-image--dragging { cursor: grabbing; } .receipt-image__placeholder { max-height: calc(var(--size-max-height-screen-80) - var(--space-18px)); max-width: var(--size-50pct); min-width: var(--width-200px); width: auto; height: auto; flex-shrink: 0; user-select: none; align-self: flex-start; display: flex; align-items: center; justify-content: center; background: var(--soft-gray); color: var(--deeper-slate); border-radius: var(--radius-standard); padding: var(--space-9px); } /* ============================================================================ OVERLAY UTILITIES ============================================================================ Fixed-position overlay elements (modals, drawers, backdrops, scrims) ========================================================================= */ /* Base overlay - contained backdrop (fills positioned parent) */ .overlay { position: absolute; inset: var(--inset-0); width: var(--size-100pct); height: var(--size-100pct); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; background: var(--black-glass-heavy-40); backdrop-filter: var(--backdrop-glass-light); } /* Viewport-overlay variant (explicit full-screen usage) */ .overlay--viewport { position: fixed; } /* Combined modifier (max one modifier per base rule) */ .overlay--viewport-subtle { position: fixed; background: var(--black-glass-strong-30); } /* Overlay variants */ .overlay--layer { background: transparent; backdrop-filter: none; pointer-events: none; } .overlay--dark { background: var(--black-glass-solid-60); } .overlay--strong { background: var(--black-glass-deep-80); backdrop-filter: var(--backdrop-glass-medium); } .overlay--subtle { background: var(--black-glass-strong-30); } /* Overlay positioning variants */ .overlay--top { align-items: flex-start; } .overlay--bottom { align-items: flex-end; } .overlay--left { justify-content: flex-start; } .overlay--right { justify-content: flex-end; } /* Clickable overlay (for dismissing) */ .overlay--dismissible { cursor: pointer; } .overlay__content { cursor: default; } /* Archived: moved to `` */ /* This file intentionally left empty to avoid duplicate styles. */ /* ============================================================================= PHONE PWA COMPONENTS - Strict BEM Structure Block: .phone Elements use double underscore: .phone__element Modifiers use double dash: .phone__element--modifier Naming: kebab-case only (no camelCase). ============================================================================= */ /* Phone App Grid Layout */ .phone { display: flex; flex-direction: column; flex: 1 1 auto; width: var(--size-100pct); min-width: 0; min-height: 0; } .phone-app-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 100vh; width: var(--size-100pct); background: linear-gradient(180deg, var(--white) 0%, var(--light-off-white) 100%); color: var(--deepest-slate); } .phone-app-shell__content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; padding: clamp(var(--space-12px), 2vw, var(--space-18px)); box-sizing: border-box; align-items: stretch; } .phone__panel--dialer { display: flex; flex-direction: column; gap: var(--space-3px); width: min(100%, 28rem); min-width: 0; margin-inline: auto; } .phone__drawer-toggle-row { display: flex; justify-content: center; width: min(100%, 28rem); min-width: 0; margin-inline: auto; } .phone__status-message { width: min(100%, 28rem); min-width: 0; margin-inline: auto; margin-block-start: var(--space-3px); } .phone__drawer { display: flex; flex-direction: column; gap: var(--space-3px); width: var(--size-100pct); min-width: 0; margin-inline: auto; box-sizing: border-box; padding: var(--space-3px); border: var(--input-border-width-thin) solid var(--slate-glass-light-20); border-radius: var(--radius-standard); background: radial-gradient(circle at 12% 8%, var(--teal-glass-light-18) 0%, transparent 42%), linear-gradient(180deg, var(--white-glass-visible-15) 0%, var(--white-glass-soft-12) 100%); box-shadow: var(--shadow-soft); width: min(100%, 28rem); } .phone__drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3px); width: var(--size-100pct); } .phone__drawer-body { display: flex; flex-direction: column; gap: var(--space-3px); width: var(--size-100pct); } .phone__drawer-section { width: var(--size-100pct); } .phone__recent-updated { display: inline-flex; align-items: center; } .phone__shell { display: flex; flex-direction: column; width: var(--size-100pct); height: var(--size-100pct); max-height: var(--size-max-height-screen-90); /* Prevent overflow off viewport */ min-height: 0; border: var(--input-border-width-thin) solid var(--slate-glass-light-20); border-radius: var(--radius-standard); background: radial-gradient(circle at 12% 8%, var(--teal-glass-light-18) 0%, transparent 42%), linear-gradient(180deg, var(--white-glass-visible-15) 0%, var(--white-glass-soft-12) 100%); box-shadow: var(--shadow-soft); overflow: hidden; } .phone__shell--dialer { border-color: var(--teal-glass-light-30); box-shadow: var(--shadow-moderate); width: var(--size-100pct); } .phone__shell-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3px); padding: var(--space-3px); border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20); background: linear-gradient(135deg, var(--teal-glass-light-18) 0%, var(--white-glass-visible-15) 100%); } .phone__shell-titles { display: flex; flex-direction: column; gap: var(--space-1px); min-width: 0; } .phone__shell-title { margin: 0; font-size: var(--font-size-16); font-weight: var(--weight-semibold); color: var(--deepest-slate); line-height: var(--line-height-tight); letter-spacing: var(--tracking-sm); } .phone__shell-subtitle { margin: 0; font-size: var(--font-size-12); color: var(--medium-slate); line-height: var(--line-height-normal); } .phone__shell-actions { display: inline-flex; align-items: center; flex-shrink: 0; } .phone__shell-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-3px); scrollbar-gutter: stable; } .phone__recent-list { display: flex; flex-direction: column; gap: var(--space-1-5px); } .phone__lines { display: flex; flex-direction: column; gap: var(--space-1-5px); } .phone__recent-call { display: flex; flex-direction: column; gap: var(--space-1px); border-radius: var(--radius-standard); background: var(--white-glass-faint-10); } /* ============================================================================= PHONE LINES (elements) ============================================================================= */ .phone__lines-item { display: flex; align-items: flex-start; justify-content: space-between; width: var(--size-100pct); padding: var(--space-1-5px) var(--space-3px); text-align: left; gap: var(--space-3px); } .phone__lines-number { display: flex; flex-direction: column; gap: var(--space-1px); font-weight: var(--weight-medium); color: var(--deepest-slate); } .phone__lines-badges { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3px); } .phone__lines-instructions { display: flex; flex-direction: column; gap: var(--space-1-5px); padding-top: var(--space-3px); border-top: var(--input-border-width-thin) solid var(--white-glass-faint-10); } .phone__lines-instructions-list { padding-left: var(--space-3px); color: var(--medium-slate); font-size: var(--font-size-12); } /* ============================================================================= PHONE DIALER (elements) ============================================================================= */ .phone__dialer { display: flex; flex-direction: column; gap: var(--space-3px); flex: 1 1 auto; min-height: 0; justify-content: space-between; } .phone__dialer-top { display: flex; flex-direction: column; gap: var(--space-1px); } .phone__dialer-top > article { width: var(--size-100pct); } .phone__dialer-input-row { display: flex; gap: var(--space-1px); align-items: stretch; } .phone__dialer-input-row > .input { flex: 1 1 auto; min-width: 0; } /* Number display — large, centered, phone-style */ .input--dialer { font-size: var(--font-size-16); font-weight: var(--weight-semibold); text-align: center; letter-spacing: 0.06em; } .phone__dialer-status { display: flex; flex-direction: column; gap: var(--space-1px); padding: var(--space-1-5px); border: var(--input-border-width-thin) solid var(--slate-glass-light-20); border-radius: var(--radius-standard); background: var(--white-glass-faint-10); } .phone__dialer-status-action { display: flex; justify-content: flex-start; } .phone__dialer-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1-5px); width: var(--size-100pct); max-width: 18rem; margin-inline: auto; justify-items: center; align-items: center; } .phone__dialer-key { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-1-5px); width: clamp(3.25rem, min(22vw, 10dvh), 5rem); height: clamp(3.25rem, min(22vw, 10dvh), 5rem); min-height: 0; font-family: var(--font-family-primary); border-radius: var(--size-50pct); background: linear-gradient(180deg, var(--white-glass-soft-12) var(--stop-start), var(--white-glass-faint-10) var(--stop-end)); border: var(--input-border-width-thin) solid var(--slate-glass-light-20); color: var(--deepest-slate); cursor: pointer; transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .phone__dialer-key:hover:not(:disabled) { background: var(--white-glass-visible-15); border-color: var(--accent-teal); transform: translateY(var(--lift-subtle)); box-shadow: var(--shadow-soft); } .phone__dialer-key:active:not(:disabled) { transform: scale(var(--scale-down-0-95x)); box-shadow: var(--shadow-subtle); } .phone__dialer-key:disabled { opacity: var(--opacity-soft); cursor: not-allowed; } .phone__dialer-key-digit { font-size: var(--font-size-16); font-weight: var(--weight-semibold); line-height: var(--line-height-tight); color: var(--deepest-slate); } .phone__dialer-key-label { font-size: var(--font-size-12); font-weight: var(--weight-normal); color: var(--medium-slate); text-transform: uppercase; letter-spacing: var(--tracking-lg); margin-top: var(--space-1px); } /* iPhone-style secondary controls: mute, hold, speaker */ .phone__dialer-controls-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1-5px); align-items: stretch; } /* Primary dial / hang-up button — centered, pill-shaped, prominent */ .phone__dialer-action { display: flex; justify-content: center; padding-bottom: var(--space-1px); } .phone__dialer-dtmf { display: flex; flex-direction: column; gap: var(--space-3px); padding-top: var(--space-3px); border-top: var(--input-border-width-thin) solid var(--slate-glass-light-20); } /* Mobile Responsive */ @media (max-width: 767px) { .phone__shell-header { flex-direction: column; align-items: stretch; } .phone__shell-actions { justify-content: flex-start; } .phone__shell-title { font-size: var(--font-size-14); } .phone__dialer-keypad { gap: var(--space-1px); } .phone__dialer-key { width: clamp(3rem, min(17vw, 9dvh), 4.25rem); height: clamp(3rem, min(17vw, 9dvh), 4.25rem); min-height: 0; padding: var(--space-1-5px); } .phone__dialer-key-digit { font-size: var(--font-size-14); } } @media (max-width: 639px) { .phone__shell-header { padding: var(--space-1-5px); } .phone__shell-body { padding: var(--space-1-5px); } .phone__dialer-status { padding: var(--space-1px); } } @media (max-width: 479px) { .phone__shell-actions { width: var(--size-100pct); } .phone__dialer-input-row { grid-template-columns: 1fr; } .phone__dialer-key { width: clamp(2.9rem, min(16.5vw, 8.6dvh), 3.9rem); height: clamp(2.9rem, min(16.5vw, 8.6dvh), 3.9rem); min-height: 0; } } @media (max-width: 419px) { .phone__dialer-keypad { gap: var(--space-1px); } .phone__dialer-key { width: clamp(2.7rem, min(16vw, 8.1dvh), 3.6rem); height: clamp(2.7rem, min(16vw, 8.1dvh), 3.6rem); min-height: 0; } .phone__dialer-key-digit { font-size: var(--font-size-13); } .phone__dialer-key-label { letter-spacing: var(--tracking-md); } } @media (max-width: 359px) { .phone__shell-title { font-size: var(--font-size-13); } .phone__shell-subtitle { font-size: var(--font-size-12); } .phone__dialer-key { width: clamp(2.5rem, min(15.2vw, 7.7dvh), 3.35rem); height: clamp(2.5rem, min(15.2vw, 7.7dvh), 3.35rem); min-height: 0; padding: var(--space-1px); } .phone__dialer-key-label { font-size: var(--font-size-12); } } @media (min-width: 768px) and (max-width: 1023px) { .phone__shell-header { align-items: flex-start; } } /* Pill group container - handles spacing between pills */ .pill-group { display: flex; flex-wrap: wrap; gap: var(--space-1-5px); align-items: center; width: max-content; max-width: var(--size-100pct); } .pill-group--nowrap { flex-wrap: nowrap; width: max-content; max-width: none; } .pill-group--route { gap: var(--space-4px); } .pill-group--route .pill { font-size: var(--font-size-14); line-height: var(--line-height-relaxed); padding-block: var(--space-2px); padding-inline: var(--space-14px); } /* Sidebar pill groups must wrap and consume available width to prevent overflow. */ .pill-group--sidebar { width: var(--size-100pct); min-width: 0; max-width: var(--size-100pct); justify-content: flex-start; align-items: flex-start; } /* Mobile: allow opt-in centering when a pill group occupies a full row (common in Stack layouts). */ @media (max-width: 767px) { .pill-group--center-on-mobile { justify-content: center; } } .pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--input-height); padding-block: var(--control-padding-block); padding-inline: var(--control-padding-inline); font-size: var(--control-font-size); font-weight: var(--weight-medium); color: var(--deepest-slate); box-shadow: var(--shadow-soft); background: var(--pill-gradient-default); border-width: var(--input-border-width-thin); border-style: solid; /* Softer teal glass border to match inactive surface chrome */ border-color: var(--teal-dark-glass-clear-18); border-radius: var(--radius-pill); cursor: pointer; transition: all var(--animation-quick) var(--easing-smooth); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--control-line-height); /* Spacing handled by pill-group gap instead */ } .pill:hover { background: var(--pill-gradient-hover); border-color: var(--teal-light-glass-medium-26); box-shadow: var(--shadow-moderate); transform: translateY(var(--lift-subtle)); } .pill:focus-visible { /* Keep a clear focus indicator without overpowering the active state */ outline: var(--input-border-width-md) solid var(--accent-teal); outline-offset: var(--size-2px); box-shadow: none; } /* Active state: use unified active surface gradient */ .pill[aria-pressed="true"] { color: var(--text-on-primary); background: var(--active-surface-gradient); border-color: var(--accent-teal); font-weight: var(--weight-bold); box-shadow: var(--shadow-glow-subtle); } .pill--on { color: var(--text-on-primary); background: var(--active-surface-gradient); border-color: var(--accent-teal); font-weight: var(--weight-bold); box-shadow: var(--shadow-glow-subtle); } .pill[aria-pressed="true"]:hover { background: var(--hover-surface-gradient); transform: translateY(var(--lift-subtle)); } .pill--on:hover { background: var(--hover-surface-gradient); transform: translateY(var(--lift-subtle)); } /* Inactive state */ .pill--off { color: var(--deepest-slate); /* Use semantic inactive surface so inactive pills are clearly distinct */ background: var(--inactive-surface-gradient); border-color: var(--teal-dark-glass-clear-18); } .pill--off:hover { background: var(--pill-gradient-hover); border-color: var(--teal-light-glass-medium-26); transform: translateY(var(--lift-subtle)); } /* Visual divider between pill groups */ .pill-divider { width: var(--size-1px); height: var(--size-24px); background: var(--teal-dark-glass-clear-18); margin-inline: var(--space-1-5px); align-self: center; } /* Feedback-specific pill modifiers */ .feedback-type--bug { color: var(--strong-red); } .feedback-type--feature { color: var(--accent-teal); } .feedback-type--improvement { color: var(--rainbow-purple); } /* Priority pills */ .pill--priority--critical { background: var(--light-red); color: var(--strong-red); border-color: transparent; } .pill--priority--high { background: var(--light-sunset); color: var(--strong-sunset); border-color: transparent; } .pill--priority--medium { background: var(--rainbow-purple); color: var(--rainbow-purple); border-color: transparent; } .pill--priority--low { background: var(--white-glass-subtle-04); color: var(--text-secondary); border-color: transparent; } /* Status pills */ .pill--status--open { background: var(--pale-teal); color: var(--accent-teal); border-color: transparent; } .pill--status--in-progress { background: var(--pale-teal); color: var(--accent-teal); border-color: transparent; } .pill--status--resolved { background: var(--pale-teal); color: var(--strong-teal); border-color: transparent; } .pill--status--closed { background: var(--pale-teal); color: var(--strong-teal); border-color: transparent; } .pill--status--wont-fix { background: var(--white-glass-subtle-04); color: var(--soft-slate); border-color: transparent; } /* Vote pills */ .pill--vote--upvote { background: var(--pale-teal); color: var(--strong-teal); } .pill--vote--downvote { background: var(--light-sunset); color: var(--strong-sunset); } /* Calendar event pills */ .calendar-event--meeting { background-color: var(--accent-teal); } .calendar-event--event { background-color: var(--rainbow-purple); } .calendar-event--deadline { background-color: var(--strong-red); } .calendar-event--reminder { background-color: var(--strong-sunset); } .calendar-event--task { background-color: var(--vibrant-teal); } /* Presence indicators (used with ) */ .presence-indicator { position: relative; display: inline-block; vertical-align: middle; } /* Avatar-overlay variant: positions the dot at the bottom-right corner of the avatar. The parent element must have position: relative (all Avatar/UserAvatar wrappers do). */ .presence-indicator-avatar { position: absolute; bottom: 0; right: 0; transform: translate(25%, 25%); line-height: 0; } .presence-dot { width: var(--size-10px); height: var(--size-10px); border-radius: var(--radius-pill); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--soft-gray); display: inline-block; position: relative; /* Ring + drop shadow so the dot pops against any background, including teal */ box-shadow: 0 0 0 1.5px var(--page-bg-surface), 0 1px 3px var(--black-glass-medium-25); } .presence-dot--online { background-color: var(--accent-teal); border-color: var(--accent-teal); } .presence-dot--active { background-color: var(--accent-teal); border-color: var(--accent-teal); } .presence-dot--available { background-color: var(--accent-teal); border-color: var(--accent-teal); } .presence-dot--away { background-color: var(--soft-gray); } .presence-dot--idle { background-color: var(--soft-gray); } .presence-dot--dnd { background-color: var(--strong-red); border-color: var(--strong-red); } .presence-dot--busy { background-color: var(--strong-amber); border-color: var(--strong-amber); } .presence-dot--in-meeting { background-color: var(--rainbow-purple); border-color: var(--rainbow-purple); } .presence-dot--out-of-office { background-color: var(--soft-gray); border-color: var(--soft-gray); opacity: 0.7; } .presence-dot--offline { background-color: var(--soft-gray); border-color: var(--soft-gray); opacity: 0.5; } .presence-dot--animated { animation-name: presencePulse; animation-duration: var(--animation-deliberate); animation-timing-function: var(--easing-gentle); animation-iteration-count: infinite; } /* Presence text labels */ .presence-label { font-size: var(--font-size-12); margin-left: var(--space-0-5px); opacity: 0.7; font-weight: var(--weight-normal); } .presence-label--active { color: var(--accent-teal); } .presence-label--idle { color: var(--soft-gray); } .presence-label--available { color: var(--accent-teal); } .presence-label--busy { color: var(--medium-red); } .presence-label--dnd { color: var(--medium-red); } .presence-label--in-meeting { color: var(--medium-red); } /* ============================================================================ MOBILE ACCESSIBILITY — PILLS ============================================================================ */ @media (max-width: 767px) { /* Pills: larger font, comfortable padding, and 44px touch target (WCAG 2.5.5). All pills are interactive — every pill gets the full touch target on mobile. */ .pill { font-size: var(--font-size-mobile-sm); /* 14px — readable at arm's length */ padding-block: var(--space-2px); /* 6px */ padding-inline: var(--space-9px); /* 9px per side */ min-height: var(--touch-target-min); /* 44px */ } /* Presence labels: bump from 10px to 12px minimum */ .presence-label { font-size: var(--font-size-mobile-2xs); } } /** * PipelineFunnel * Component: / * * Horizontal row of arrow-shaped chevron chips for ops pipeline stage filtering. * Horizontally scrollable on small screens with hidden scrollbar. */ .pipeline-funnel { display: flex; align-items: stretch; overflow-x: auto; overflow-y: visible; /* allow box-shadow to show */ -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: var(--space-1px); /* breathing room for active box-shadow */ } .pipeline-funnel::-webkit-scrollbar { display: none; } .pipeline-funnel__stage { --pf-arrow: var(--size-10px); display: inline-flex; align-items: center; gap: var(--space-1px); padding-block: var(--space-1-5px); padding-inline: calc(var(--space-9px) + var(--pf-arrow)); background: var(--inactive-surface-gradient); color: var(--text-secondary); font-size: var(--font-size-12); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-sm); white-space: nowrap; cursor: pointer; border: none; flex-shrink: 0; margin-right: var(--size-2px); /* Chevron: notch on left, point on right */ clip-path: polygon( 0 0, calc(100% - var(--pf-arrow)) 0, 100% var(--size-50pct), calc(100% - var(--pf-arrow)) 100%, 0 100%, var(--pf-arrow) var(--size-50pct) ); transition: background var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } /* First stage: flat left edge, no notch */ .pipeline-funnel__stage--first { padding-left: var(--space-9px); clip-path: polygon( 0 0, calc(100% - var(--pf-arrow)) 0, 100% var(--size-50pct), calc(100% - var(--pf-arrow)) 100%, 0 100% ); } /* Last stage: notch on left, flat right edge */ .pipeline-funnel__stage--last { padding-right: var(--space-9px); clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, var(--pf-arrow) var(--size-50pct) ); } /* Active (filtered) state */ .pipeline-funnel__stage--active { background: var(--active-surface-gradient); color: var(--text-on-primary); } .pipeline-funnel__stage:hover:not(.pipeline-funnel__stage--active) { background: var(--hover-surface-gradient); color: var(--text-primary); } .pipeline-funnel__stage:focus-visible { outline: var(--size-2px) solid var(--vibrant-teal); outline-offset: var(--size-1px); } /* Label text (inherits from __stage; class anchors future overrides) */ .pipeline-funnel__label { /* inherits from .pipeline-funnel__stage */ } /* Count badge */ .pipeline-funnel__count { font-size: var(--font-size-12); font-weight: var(--weight-bold); opacity: 0.75; } /* ============================================================================= PRINT UTILITIES ============================================================================= Print-specific utility classes for controlling page breaks and visibility. Apply these classes directly to elements that need print-specific behavior. Browser default print stylesheets handle most formatting automatically. ============================================================================= */ /* ===== PAGE BREAK UTILITIES ===== */ @media print { .page-break { break-before: always; } .page-break-after { break-after: always; } .avoid-break { break-inside: avoid; } .break-before { break-before: auto; } .break-after { break-after: auto; } /* ===== PRINT VISIBILITY ===== */ .no-print { display: none; } .print-only { display: block; } } /* ============================================================================= RESPONSIVE VISIBILITY UTILITIES Show/hide elements based on viewport breakpoints ============================================================================= */ /* Mobile-only visibility */ .visible-mobile-only { display: block; } @media (min-width: 768px) { .visible-mobile-only { display: none; } } /* Tablet-up visibility */ .visible-tablet-up { display: none; } @media (min-width: 768px) { .visible-tablet-up { display: block; } } /* Desktop-up visibility */ .visible-desktop-up { display: none; } @media (min-width: 1024px) { .visible-desktop-up { display: block; } } /* Hidden on mobile */ .hidden-mobile { display: none; } @media (min-width: 768px) { .hidden-mobile { display: block; } } /* Hidden on tablet and up */ .hidden-tablet-up { display: block; } @media (min-width: 768px) { .hidden-tablet-up { display: none; } } /* Hidden on desktop */ .hidden-desktop { display: block; } @media (min-width: 1024px) { .hidden-desktop { display: none; } } /* ============================================================================ SCROLLBAR UTILITIES Global, on-brand scrollbar styling (matches Ops home dashboard tiles) ============================================================================ */ :root { --app-scrollbar-size: var(--space-0-5px); --app-scrollbar-thumb-color: var(--teal-glass-strong-40); --app-scrollbar-track-color: transparent; } /* Firefox */ :where(*) { scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb-color) var(--app-scrollbar-track-color); } /* WebKit */ :where(*)::-webkit-scrollbar { width: var(--app-scrollbar-size); height: var(--app-scrollbar-size); } :where(*)::-webkit-scrollbar-track { background: var(--app-scrollbar-track-color); } :where(*)::-webkit-scrollbar-thumb { background-color: var(--app-scrollbar-thumb-color); border-radius: var(--radius-pill); opacity: 0; transition: opacity 0.2s ease; } :where(*:hover)::-webkit-scrollbar-thumb { opacity: 1; } /* ============================================================================ SEARCH RESULTS UTILITIES Helper classes for search result styling and highlighting. ========================================================================== */ /* Highlight matched text — use .search-results__highlight on elements */ .search-results__highlight { background-color: var(--teal-glass-light-20); color: var(--accent-teal); font-weight: var(--weight-semibold); padding: 0 var(--space-0-5px); border-radius: var(--radius-standard); } /* Group title styling for entity type labels */ .search-results__group-title { font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-1px) 0; } /* Result count badge */ .search-results__count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-24px); height: var(--size-24px); padding: 0 var(--space-0-5px); font-size: var(--font-size-12); font-weight: var(--weight-semibold); border-radius: var(--radius-pill); background: var(--white-glass-soft-12); color: var(--text-secondary); } .search-results__count-badge--accent { background: var(--teal-glass-light-20); color: var(--accent-teal); } /* Quick action buttons in search results */ .search-results__action { display: inline-flex; align-items: center; gap: var(--space-1px); padding: var(--space-1px) var(--space-1-5px); font-size: var(--font-size-12); font-weight: var(--weight-medium); color: var(--text-secondary); background: var(--white-glass-faint-10); border-width: var(--input-border-width-thin); border-style: solid; border-color: var(--teal-glass-soft-12); border-radius: var(--radius-standard); cursor: pointer; transition: all var(--animation-smooth); } .search-results__action:hover { color: var(--text-primary); background: var(--white-glass-visible-15); border-color: var(--teal-glass-visible-15); } .search-results__action:active { transform: scale(0.98); } /* Loading skeleton for search results */ .search-results__skeleton { height: var(--height-240px); background: linear-gradient( 90deg, var(--white-glass-faint-10) 0%, var(--white-glass-soft-12) var(--size-100pct), var(--white-glass-faint-10) var(--size-100pct) ); background-size: var(--size-200pct) var(--size-100pct); animation: search-skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-standard); } @keyframes search-skeleton-shimmer { 0% { background-position: var(--size-200pct) 0; } 100% { background-position: calc(-1 * var(--size-200pct)) 0; } } /** * Section Tabs Utilities * Component: frontend/src/render/__00-birthplace/SectionTabsView.tsx * Class names are emitted by Button variant="section-tab". */ /* Containers */ .section-tabs__container { margin-top: var(--space-0); display: flex; flex: 1 1 auto; min-width: 0; block-size: var(--section-tabs-block-size); width: var(--size-100pct); background: transparent; padding-top: var(--space-0); --section-tabs-start-gap: var(--space-9px); --section-tabs-end-gap: var(--space-18px); } /* Scroll frame + tab strip */ .section-tabs__container--scroll-container { flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto); display: flex; align-items: stretch; justify-content: flex-start; gap: var(--space-0-5px); block-size: var(--size-100pct); position: relative; overflow: auto hidden; padding-inline: var(--section-tabs-start-gap) var(--section-tabs-end-gap); scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding-inline: var(--section-tabs-start-gap) var(--section-tabs-end-gap); } /* Individual tabs */ .section-tabs__tab { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; block-size: var(--size-100pct); padding: 0 var(--space-9px); gap: var(--space-0); font-size: var(--section-tabs-font-size); line-height: var(--section-tabs-line-height); font-weight: var(--weight-medium); flex-shrink: var(--flex-shrink-none); /* Softer glassy gradient for inactive tabs */ background: var(--teal-glass-soft-gradient); backdrop-filter: var(--backdrop-glass-medium); box-shadow: var(--secondary-surface-shadow); outline: var(--shadow-tab-outline-subtle); color: var(--text-primary); border: none; border-radius: var(--radius-standard) var(--radius-standard) var(--radius-flat) var(--radius-flat); cursor: pointer; transition: all var(--animation-quick) var(--easing-smooth); opacity: var(--opacity-visible); white-space: nowrap; text-decoration: none; scroll-snap-align: start; overflow: visible; } .section-tabs__tab-content { width: auto; block-size: var(--size-100pct); display: flex; justify-content: center; align-items: center; gap: var(--space-1-5px); } .section-tabs__tab::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--overlay-tab-shine); } .section-tabs__tab:hover { color: var(--text-primary); transform: translateY(var(--lift-subtle)); opacity: var(--opacity-visible); } .section-tabs__tab:hover:not(.section-tabs__tab--active):not([aria-selected="true"]) { background: var(--hover-surface-gradient); box-shadow: var(--hover-surface-shadow); } .section-tabs__tab--active { background: var(--active-surface-gradient); box-shadow: var(--active-surface-shadow); color: var(--text-on-primary); margin-bottom: var(--space-0); font-weight: var(--weight-bold); border-radius: var(--radius-standard) var(--radius-standard) var(--radius-flat) var(--radius-flat); opacity: var(--opacity-visible); } .section-tabs__tab[aria-selected="true"] { background: var(--active-surface-gradient); box-shadow: var(--active-surface-shadow); color: var(--text-on-primary); margin-bottom: var(--space-0); font-weight: var(--weight-bold); border-radius: var(--radius-standard) var(--radius-standard) var(--radius-flat) var(--radius-flat); opacity: var(--opacity-visible); } .section-tabs__tab-label { display: flex; align-items: center; block-size: var(--size-100pct); color: currentColor; letter-spacing: var(--tracking-sm); } .section-tabs__tab-badge { background: var(--vibrant-teal); color: var(--text-on-primary); font-size: var(--font-size-12); font-weight: var(--weight-bold); padding: var(--space-1-5px) var(--space-1-5px); border-radius: var(--radius-standard); min-width: var(--space-12px); text-align: center; } /* Visual affordances */ .section-tabs__fade-right { position: absolute; top: var(--space-0); right: var(--space-0); height: var(--size-100pct); width: var(--space-24px); pointer-events: none; background: linear-gradient(to left, var(--white-glass-heavy-50), transparent); } .section-tabs__indicator { position: absolute; left: var(--space-0); bottom: var(--space-0); height: var(--input-border-width-medium); width: var(--space-0); transform: translateX(var(--space-0)); background: linear-gradient(to right, transparent, var(--accent-teal), transparent); border-radius: var(--radius-standard) var(--radius-standard) var(--radius-flat) var(--radius-flat); transition: transform var(--animation-quick) var(--easing-smooth), width var(--animation-quick) var(--easing-smooth), opacity var(--animation-quick) var(--easing-smooth); opacity: var(--opacity-vivid); } .section-tabs__scroll { position: absolute; top: var(--position-center-block); transform: translateY(var(--offset-center-block)); background: var(--white); border-width: var(--input-border-width-thin); border-style: solid; border-color: currentColor; border-radius: var(--radius-standard); padding: var(--space-9px); cursor: pointer; color: var(--dark-slate); transition: all var(--animation-quick) var(--easing-smooth); z-index: var(--z-dropdown); box-shadow: var(--shadow-subtle); } .section-tabs__scroll:hover { color: var(--deepest-slate); background: var(--light-slate); } @media (prefers-reduced-motion: reduce) { .section-tabs__container--scroll-container { scroll-behavior: auto; } .section-tabs__tab { transition: none; } } /* NOTE: media queries require explicit values in native CSS. */ @media (max-width: 767px) { .section-tabs__container { --section-tabs-start-gap: var(--space-1-5px); --section-tabs-end-gap: var(--space-18px); } .section-tabs__container { block-size: var(--size-44px); } .section-tabs__tab { min-height: var(--size-44px); padding-inline: var(--space-9px); font-size: var(--font-size-14); } .section-tabs__tab-label { font-size: var(--font-size-14); } } /** * Segmented Control * Component: /render/__01-single-purpose/SegmentedControl.tsx * * A compact, single-select switcher for mutually exclusive options. * Use for view switching, mode selection, display toggles. * * NOT for navigation → use SectionTabs * NOT for multi-select filters → use pills * NOT for a long list of options → use Select */ /* Canonical segmented-control sizing tokens */ .segmented-control { /* Semantic tokens mapped to actual computed px values */ --segmented-control-track-padding: var(--space-0); /* 0px - padding around entire track */ --segmented-control-track-gap: var(--space-1px); /* 1px - gap between segment buttons */ --segmented-control-segment-gap: var(--space-1px); /* 1px - gap between text and badge inside button */ --segmented-control-padding-block: var(--space-1px); /* 1px - vertical padding inside segment button */ --segmented-control-padding-inline: var(--space-2px); /* 2px - horizontal padding inside segment button */ --segmented-control-min-height: var(--input-height); --segmented-control-min-width: var(--size-64px); } /* Track — the unified container that houses all segments */ .segmented-control { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: var(--segmented-control-track-gap); width: fit-content(100%); align-self: flex-start; padding: var(--segmented-control-track-padding); background: var(--inactive-surface-gradient); border-radius: var(--radius-pill); box-shadow: var(--secondary-surface-shadow); } .segmented-control__button { --segmented-control-badge-background: var(--white-glass-light-20); --segmented-control-badge-color: var(--darker-slate); display: inline-flex; align-items: center; justify-content: center; gap: var(--segmented-control-segment-gap); min-height: var(--segmented-control-min-height); min-width: var(--segmented-control-min-width); width: 100%; padding: var(--segmented-control-padding-block) var(--segmented-control-padding-inline); border-radius: var(--radius-pill); border: var(--input-border-width-thin) solid transparent; font-family: var(--font-family-primary); font-size: var(--font-size-12); font-weight: var(--weight-medium); line-height: var(--line-height-tight); cursor: pointer; white-space: nowrap; background: transparent; color: var(--darker-slate); box-shadow: none; transition: transform var(--animation-quick) var(--easing-smooth), box-shadow var(--animation-quick) var(--easing-smooth), background-color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } .segmented-control__button:hover { transform: translateY(var(--transform-lift)); } .segmented-control__button:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); } .segmented-control__button--active { min-width: var(--size-80px); background: var(--active-surface-gradient); border-color: var(--teal-glass-soft-12); color: var(--text-on-dark); --segmented-control-badge-background: var(--white-glass-visible-15); --segmented-control-badge-color: var(--text-on-dark); box-shadow: var(--shadow-moderate); font-weight: var(--weight-semibold); } .segmented-control__button--active:hover { background: var(--hover-surface-gradient); border-color: var(--teal-glass-medium-30); box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle); } .segmented-control__button--inactive:hover { background: var(--hover-surface-gradient); color: var(--deep-slate); box-shadow: var(--hover-surface-shadow); } .segmented-control__badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-18px); min-height: var(--size-18px); padding: 0 var(--space-1px); border-radius: var(--radius-pill); font-size: var(--font-size-9); font-weight: var(--weight-semibold); line-height: 1; background: var(--segmented-control-badge-background); color: var(--segmented-control-badge-color); } @media (--mobile-only) { .segmented-control { --segmented-control-padding-block: var(--space-1px); /* 1px */ --segmented-control-padding-inline: var(--space-2px); /* 2px - tighter to fit longer labels */ --segmented-control-min-height: var(--touch-target-min); --segmented-control-min-width: 0; /* allow 1fr to work without overflow */ /* Full-width so grid-auto-columns: 1fr divides space correctly */ width: 100%; } /* Binary (2 or fewer segments): fixed-width compact switch, not full-width */ .segmented-control--binary { width: max-content; } /* Allow grid cells to shrink below content size (CSS grid min-width fix) */ .segmented-control__button { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* ============================================================================ SIDEBAR UTILITIES Layout and styling for sidebar navigation ============================================================================ */ /* Ghost button light variant: white text for dark backgrounds */ .sidebar { position: relative; isolation: isolate; /* contain: paint; REMOVED - clips absolutely positioned children */ overflow-y: hidden; overflow-x: visible; box-sizing: border-box; border-inline-end: none; /* Outer lift + subtle inner right-edge glow for depth */ box-shadow: var(--shadow-glow-crisp), var(--shadow-soft), inset -1px 0 0 0 var(--white-glass-strong-20); z-index: var(--z-base); align-self: var(--align-stretch-fill); width: fit-content; max-width: none; /* Clamp to viewport height to avoid vertical overflow */ height: var(--size-viewport-height-full); max-height: var(--size-viewport-height-full); min-height: 0; background: var(--sidebar-background-gradient); font-family: var(--font-family-primary); font-size: var(--font-size-12); font-weight: var(--weight-normal); color: var(--text-on-dark); display: flex; flex-direction: column; /* Sidebar bottom gap used to keep items clear of FAB or bottom UI. Generous clearance to ensure last items stay visible above FAB. */ --sidebar-bottom-gap: calc(var(--fab-size-fluid) + var(--fab-offset-fluid) + var(--space-18px)); } /* Removed unused .sidebar__logo-container (wrapper no longer used) */ .sidebar::after { content: ''; position: absolute; inset: var(--inset-0); pointer-events: none; z-index: var(--z-base); /* Use teal-only stops; avoid mixing with via transparent */ opacity: 1; background-image: linear-gradient( 90deg, var(--teal-dark-glass-soft-12) 0%, var(--teal-glass-faint-10) 40%, var(--teal-glass-whisper-05) 100% ), var(--sidebar-noise-overlay); background-blend-mode: normal, soft-light; } /* Performance mode removed: always use standard sidebar rendering */ /* Collapsed state */ .sidebar--collapsed { width: fit-content; min-width: var(--sidebar-collapsed-width); max-width: var(--sidebar-collapsed-width); padding-inline: var(--space-0); align-items: var(--align-vertical-center); transition: width var(--animation-smooth) var(--easing-smooth); } .sidebar--collapsed-logo-container { padding: var(--space-0); } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } .sidebar__item { transition: background var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); } } .sidebar--collapsed-item-label { display: none; } .sidebar--collapsed-badge { display: none; } .sidebar--collapsed-item { padding: var(--space-1px); justify-content: center; } .sidebar--expanded { width: fit-content; min-width: var(--sidebar-collapsed-width); max-width: none; padding-inline: var(--space-1px); transition: width var(--animation-smooth) var(--easing-smooth); } .sidebar__expand { position: absolute; right: var(--size-8px); top: var(--size-50pct); transform: translateY(calc(-1 * var(--size-50pct))); opacity: 0; pointer-events: none; transition: opacity var(--animation-quick) var(--easing-smooth); } .sidebar__expand:hover { opacity: 1; pointer-events: auto; } .btn--sidebar-header-caret:hover { opacity: 1; pointer-events: auto; } .btn--sidebar-header-caret:focus-visible { opacity: 1; pointer-events: auto; } .sidebar__expand-fab { position: fixed; /* Center on the vertical divider between sidebar and page */ left: calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed-width) - (var(--fab-size-fluid) / 2)); /* Vertically center in viewport */ top: var(--size-50pct); transform: translateY(calc(-1 * var(--size-50pct))); z-index: var(--z-fab); opacity: 1; pointer-events: auto; transition: opacity var(--animation-quick) var(--easing-smooth), transform var(--animation-quick) var(--easing-smooth); } .sidebar__expand-fab:hover { transform: translateY(calc(-1 * var(--size-50pct))) translateX(var(--size-2px)); } /* Mobile override: use mobile collapsed width token */ @media (max-width: 767px) { .sidebar--collapsed { min-width: var(--sidebar-collapsed-width-mobile); } .sidebar__expand-fab { left: calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed-width-mobile) - (var(--fab-size-fluid) / 2)); } } /* Sidebar nav container: constrain height to viewport minus */ .sidebar__nav { flex: 1 1 0; min-height: 0; overflow: hidden; box-sizing: border-box; width: var(--size-100pct); max-inline-size: var(--size-100pct); padding-inline-end: var(--space-0); overscroll-behavior: contain; display: flex; flex-direction: column; } /* Reset list semantics inside sidebar nav so we control markers fully */ .sidebar__nav-list { list-style: none; margin: var(--space-0); padding: var(--space-0); display: flex; flex-direction: column; gap: var(--space-0); flex: 1 1 0; min-height: 0; width: var(--size-100pct); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } /* Spacer to prevent sidebar items from going behind FAB */ .sidebar__fab-spacer { flex-shrink: 0; height: var(--sidebar-bottom-gap); min-height: var(--sidebar-bottom-gap); } .sidebar__fab-spacer-item { flex-shrink: 0; } /* ----------------------------- Sidebar Header ----------------------------- */ .sidebar__header { flex-grow: var(--flex-grow-none); flex-shrink: var(--flex-shrink-none); flex-basis: var(--app-header-height); height: var(--app-header-height); width: var(--size-100pct); position: relative; overflow: visible; /* Use 3-column grid: [blank placeholder] [centered logo] [collapse caret] */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: var(--align-vertical-center); padding: var(--space-0) var(--space-1-5px); gap: var(--space-0); color: var(--text-on-dark); } /* Section tabs container (forms tabs, etc) */ .sidebar__section { flex-shrink: 0; padding: var(--space-1-5px) var(--space-9px); padding-top: var(--space-0); } .sidebar__header::before { content: ''; display: block; } .sidebar__logo-container { display: flex; align-items: var(--align-vertical-center); justify-content: center; width: var(--size-100pct); height: var(--app-header-height); padding: var(--space-0); background: transparent; position: relative; overflow: hidden; z-index: var(--z-nav); } /* caret button in header */ .btn--sidebar-header-caret { grid-column: 3; justify-self: end; color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; padding: var(--space-1px); border: none; background: transparent; cursor: pointer; border-radius: var(--radius-standard); transition: background-color 0.15s ease, opacity var(--animation-quick) var(--easing-smooth); opacity: 0.4; pointer-events: auto; min-width: var(--size-40px); min-height: var(--size-40px); } .btn--sidebar-header-caret:hover { background-color: var(--white-glass-subtle-04); } .btn--sidebar-header-caret__icon { color: var(--text-on-dark); stroke: currentColor; width: var(--size-20px); height: var(--size-20px); } /* Reveal caret when interacted */ .sidebar__logo-btn { display: flex; align-items: center; justify-content: center; padding: var(--space-0); position: relative; border: none; background: transparent; color: var(--text-on-primary); height: calc(var(--app-header-height) - (2 * var(--space-9px))); width: calc(var(--app-header-height) - (2 * var(--space-9px))); border-radius: var(--radius-standard); overflow: hidden; isolation: isolate; cursor: pointer; } .sidebar__logo-halo { position: absolute; inset: 0; pointer-events: none; mask-image: url('/images/logos/pp-icon.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .sidebar__logo-mark { position: absolute; inset: 0; pointer-events: none; mask-image: url('/images/logos/pp-icon.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .sidebar__logo-shimmer { position: absolute; inset: 0; pointer-events: none; mask-image: url('/images/logos/pp-icon.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .sidebar__logo-halo { z-index: 0; background: linear-gradient( 115deg, transparent 34%, rgb(165 232 255 / 72%) 46%, rgb(255 255 255 / 88%) 50%, rgb(165 232 255 / 72%) 54%, transparent 66% ); background-size: 240% 100%; background-position: -180% 0; opacity: 0; filter: blur(3px) drop-shadow(0 0 4px rgb(185 239 255 / 45%)) drop-shadow(0 0 10px rgb(140 220 245 / 32%)); transform: scale(1.1); transition: opacity 180ms var(--easing-smooth), transform 220ms var(--easing-smooth); will-change: background-position, opacity, transform; } .sidebar__logo-mark { z-index: 1; background: currentColor; opacity: 0.96; } .sidebar__logo-shimmer { z-index: 2; opacity: 0; background: linear-gradient( 115deg, transparent 38%, rgb(95 176 198 / 48%) 44%, rgb(210 243 255 / 92%) 48%, rgb(255 255 255 / 100%) 50%, rgb(210 243 255 / 92%) 52%, rgb(95 176 198 / 48%) 56%, transparent 62% ); background-size: 220% 100%; background-repeat: no-repeat; background-position: -180% 0; mix-blend-mode: normal; will-change: background-position, opacity; } .sidebar__logo-halo--active { opacity: 0.7; transform: scale(1.15); animation: sidebarLogoHaloShimmer 1200ms linear infinite, sidebarLogoHaloPulse 900ms var(--easing-smooth) infinite alternate; } .sidebar__logo-shimmer--active { opacity: 0.98; animation: sidebarLogoShimmerSweep 1200ms linear infinite; } @media (prefers-reduced-motion: reduce) { .sidebar__logo-halo--active { animation: none; opacity: 0.5; transform: scale(1.12); } .sidebar__logo-shimmer--active { animation: none; opacity: 0.6; } } /* Double-click bounce animation */ .sidebar__logo-btn--bounce { animation: logoBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes logoBounce { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.2) rotate(-5deg); } 50% { transform: scale(0.9) rotate(5deg); } 75% { transform: scale(1.1) rotate(-3deg); } } @keyframes shimmerSweep { 0% { background-position: var(--skeleton-shimmer-pos-start), 0 0; } 100% { background-position: var(--skeleton-shimmer-pos-end), 0 0; } } @keyframes sidebarLogoShimmerSweep { 0% { background-position: -180% 0; } 100% { background-position: 160% 0; } } @keyframes sidebarLogoHaloPulse { 0% { opacity: 0.44; } 100% { opacity: 0.74; } } @keyframes sidebarLogoHaloShimmer { 0% { background-position: -180% 0; } 100% { background-position: 160% 0; } } /* ----------------------------- Sidebar Items ----------------------------- */ /* Link reset: sidebar__item IS the anchor element */ .sidebar__item { text-decoration: none; color: currentColor; } .sidebar__item:visited { text-decoration: none; color: currentColor; } .sidebar__item:hover { text-decoration: none; color: currentColor; } .sidebar__item:active { text-decoration: none; color: currentColor; } .sidebar__item:focus { text-decoration: none; color: currentColor; } .sidebar__item { display: flex; align-items: var(--align-vertical-center); text-align: left; position: relative; z-index: 1; --sidebar-item-inline-gap: var(--space-1-5px); width: var(--size-100pct); min-inline-size: var(--size-100pct); max-width: none; flex: 1 1 auto; height: auto; min-height: var(--size-36px); max-height: var(--size-80px); padding: var(--space-0-5px) var(--space-1px); gap: var(--sidebar-item-inline-gap); border: none; border-radius: var(--radius-standard); border-inline-start: var(--input-border-width-thin) solid transparent; background: transparent; color: var(--text-on-dark); --sidebar-item-accent-background: transparent; --sidebar-item-accent-opacity: 1; --sidebar-drag-handle-opacity: 0; --sidebar-drag-handle-color: var(--text-on-dark); white-space: nowrap; cursor: pointer; transition: background-color var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth), border-color var(--animation-quick) var(--easing-smooth); } .sidebar__item:focus-visible { outline: var(--ring-width-thin) solid var(--vibrant-teal); outline-offset: var(--ring-offset-sm); border-radius: var(--radius-standard); } /* Tiny bird appears on hover (easter egg) */ .sidebar__item:hover::after { content: ''; position: absolute; right: var(--space-1-5px); top: var(--size-50pct); transform: translateY(-50%) scale(0); width: var(--size-12px); height: var(--size-12px); background-color: currentColor; /* Use brand sandpiper icon instead of emoji (mask = keeps correct color in ). */ mask-image: url('/icons/sandpiper-bird1px-outline-1.svg'); mask-image: url('/icons/sandpiper-bird1px-outline-1.svg'); mask-repeat: no-repeat; mask-repeat: no-repeat; mask-position: center; mask-position: center; mask-size: contain; mask-size: contain; opacity: 0; animation: sandpiperPop 0.3s ease-out 0.2s forwards; pointer-events: none; z-index: 1; } @keyframes sandpiperPop { 0% { transform: translateY(-50%) scale(0) rotate(-10deg); opacity: 0; } 50% { transform: translateY(-50%) scale(1.2) rotate(5deg); opacity: 1; } 100% { transform: translateY(-50%) scale(1) rotate(0deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sidebar__item:hover::after { animation: none; transform: translateY(-50%) scale(1); opacity: 1; } } /* When a drag handle is present, tighten the intra-item gap so it doesn't create an oversized gutter between the handle and the rest of the content. */ .sidebar__item:has(.sidebar__drag-handle) { gap: var(--space-0-5px); } .sidebar__item--dnd-enabled { padding-inline-start: var(--space-1-5px); } .sidebar__item--active { position: relative; z-index: 0; color: var(--text-primary); background: var(--white-glass-frosted-90); box-shadow: var(--shadow-glass-soft); } .sidebar__item[aria-current="page"] { position: relative; z-index: 0; color: var(--text-primary); background: var(--white-glass-frosted-90); box-shadow: var(--shadow-glass-soft); } /* Active item icon styling — applied to the icon content container */ .sidebar__item-content--active { color: var(--text-primary); stroke: currentColor; } .sidebar__item--active:hover { color: var(--text-primary); } .sidebar__item[aria-current="page"]:hover { color: var(--text-primary); } .sidebar__item-accent { display: block; width: var(--size-3px); min-width: var(--size-3px); align-self: stretch; /* ensure vertical fill for reliable sizing */ margin-block: var(--space-0-5px); /* near-full-height stripe without percent heights */ border-radius: var(--radius-standard); background: transparent; flex-shrink: 0; position: relative; z-index: 1; background: var(--sidebar-item-accent-background); opacity: var(--sidebar-item-accent-opacity); } .sidebar__item-accent--active { background: var(--sidebar-active-item-stripe); opacity: 1; } .sidebar__item:hover { --sidebar-item-accent-background: var(--sidebar-active-item-stripe); --sidebar-item-accent-opacity: 0.6; --sidebar-drag-handle-opacity: var(--opacity-visible); --sidebar-drag-handle-color: var(--text-primary); } .sidebar__item:focus-visible { --sidebar-item-accent-background: var(--sidebar-active-item-stripe); --sidebar-item-accent-opacity: 0.6; --sidebar-drag-handle-opacity: var(--opacity-visible); --sidebar-drag-handle-color: var(--text-primary); } .sidebar__item--active { --sidebar-item-accent-background: var(--sidebar-active-item-stripe); --sidebar-item-accent-opacity: 1; } .sidebar__item[aria-current="page"] { --sidebar-item-accent-background: var(--sidebar-active-item-stripe); --sidebar-item-accent-opacity: 1; } .sidebar-tab-btn--active { background: var(--white-glass-elevated-45); border-inline-start-color: var(--accent-teal); color: var(--deepest-slate); } .sidebar__item:has(:focus-visible) { box-shadow: var(--ring-teal); background: var(--teal-glass-light-20); } .sidebar__item--dragging { z-index: var(--z-modal); background: var(--white); box-shadow: var(--shadow-glass-soft); } .sidebar__bottom-actions { display: flex; flex-direction: column; align-items: var(--align-stretch-fill); gap: var(--space-9px); position: sticky; bottom: var(--inset-0); background: transparent; padding: var(--space-12px) var(--space-1-5px); margin-top: var(--size-auto); } .sidebar-bottom-actions { display: flex; flex-direction: column; align-items: var(--align-stretch-fill); gap: var(--space-9px); position: sticky; bottom: var(--inset-0); background: transparent; padding: var(--space-12px) var(--space-1-5px); margin-top: var(--size-auto); } /* Bottom spacer row: empty space to anchor FAB or provide breathing room NOTE: This element renders outside .sidebar__nav, so it should NOT have height or it will cause the sidebar to overflow 100dvh. The ul padding-block-end handles clearance. */ .sidebar__bottom-spacer { display: none; } .sidebar__bottom-actions--collapsed { align-items: var(--align-vertical-center); } .sidebar__bottom-actions--collapsed-theme-toggle { justify-content: center; width: var(--size-56px); height: var(--size-56px); padding: var(--space-9px); } .sidebar-bottom-actions--collapsed-theme-toggle { justify-content: center; width: var(--size-56px); height: var(--size-56px); padding: var(--space-9px); } .sidebar__bottom-actions--collapsed-theme-toggle-text { display: none; } .sidebar__item-content { display: flex; align-items: center; gap: var(--space-1-5px); flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; } .sidebar__item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar__item-badges { display: inline-flex; align-items: center; gap: var(--space-0-5px); flex-shrink: 0; margin-inline-start: auto; position: relative; z-index: 1; } .sidebar__item-shortcut { display: inline-flex; align-items: center; } .sidebar__item-count-badge { display: inline-flex; align-items: center; } /* Right-side offset spacer to mirror draggable icon width */ /* Removed offset spacer and variants to restore original layout */ /* Drag handle — BEM class applied directly to the handle element */ .sidebar__drag-handle { cursor: grab; opacity: var(--sidebar-drag-handle-opacity); transition: opacity var(--animation-quick) var(--easing-smooth), color var(--animation-quick) var(--easing-smooth); /* Override button color for dark sidebar background */ color: var(--sidebar-drag-handle-color); /* Minimal sizing */ flex-shrink: 0; width: var(--width-12px); height: var(--height-16px); min-width: var(--width-12px); min-height: var(--height-16px); max-width: var(--width-12px); max-height: var(--height-16px); padding: 0; margin: 0; position: relative; z-index: 1; } .sidebar__drag-handle__icon { color: currentColor; display: block; width: 100%; height: 100%; } .sidebar__drag-handle:active { cursor: grabbing; } /* Reveal drag handle when JS adds --visible modifier on parent item hover */ .sidebar__drag-handle--visible { opacity: var(--opacity-visible); color: var(--text-primary); } .sidebar__item:has(:focus-visible) { --sidebar-drag-handle-opacity: var(--opacity-visible); --sidebar-drag-handle-color: var(--text-primary); } /* Sidebar-specific badge styling – use .badge--ghost-muted-light or .badge--sidebar */ .badge--sidebar { background-color: transparent; border: none; box-shadow: none; color: var(--text-on-dark); } /* Badge on active items - darker slate */ .badge--sidebar-active { background-color: var(--white-glass-medium-25); color: var(--text-primary); } /* Section headers */ .sidebar__section-header { font-size: var(--font-size-12); color: var(--dark-slate); text-transform: uppercase; font-weight: var(--weight-bold); padding: var(--space-9px) var(--space-0) var(--space-1px) var(--space-0); margin-top: var(--space-1-5px); } /* ----------------------------- Sidebar Bottom Actions ----------------------------- */ .sidebar__bottom-actions--collapsed { align-items: var(--align-vertical-center); } .sidebar-bottom-actions--collapsed { align-items: var(--align-vertical-center); } .sidebar__bottom-actions--collapsed-theme-toggle-text { display: none; } .sidebar-bottom-actions--collapsed-theme-toggle-text { display: none; } /* ----------------------------- Scroll Indicator ----------------------------- */ .sidebar__scroll-caret { position: sticky; bottom: var(--inset-0); padding: var(--space-1-5px); display: flex; justify-content: center; align-items: var(--align-vertical-center); color: var(--text-on-dark); } .sidebar-scroll-caret { position: sticky; bottom: var(--inset-0); padding: var(--space-1-5px); display: flex; justify-content: center; align-items: var(--align-vertical-center); color: var(--text-on-dark); } /* Ensure caret icon remains visible on light backgrounds */ .sidebar__scroll-caret-icon { color: var(--text-on-dark); stroke: currentColor; filter: drop-shadow(0 1px 1px var(--black-glass-visible-15)); } /* ----------------------------- Mobile Bottom Nav ----------------------------- */ .bottom-nav { display: flex; position: fixed; bottom: var(--inset-0); left: var(--inset-0); right: var(--inset-0); z-index: var(--z-modal); background: var(--white); border-top: var(--input-border-width-thin) solid var(--soft-slate); } .page__nav-panel { background-color: transparent; border-inline-end: none; color: var(--text-on-dark); width: var(--size-fit); flex-shrink: var(--flex-shrink-none); overscroll-behavior: contain; } /* Signature Pad utilities Canvas is sized and visually framed via standard containers (e.g., .field, .card). This file only defines interaction-related behavior for the canvas element. */ .signature-canvas { width: var(--size-100pct); height: 180px; cursor: crosshair; touch-action: none; } .signature-canvas--disabled { cursor: not-allowed; } /* ============================================================================= SIZE UTILITIES Responsive height/width helpers without media queries ============================================================================= */ /* Responsive tall height that shrinks when constrained - Defaults to a tall block (var(--size-80px)) - Caps to viewport height (100dvh) - Never less than content (fit-content) */ .height--responsive-tall { height: max(fit-content, min(var(--size-80px), 100dvh)); min-height: 0; /* allow flex parents to shrink */ max-height: var(--size-80px); } /* Responsive medium height variant */ .height--responsive-md { height: max(fit-content, min(var(--size-56px), 100dvh)); min-height: 0; max-height: var(--size-56px); } /* Responsive dense height variant */ .height--responsive-dense { height: max(fit-content, min(var(--size-40px), 100dvh)); min-height: 0; max-height: var(--size-40px); } /* Stable, semantic min-width helpers (avoid tailwind-style bracket tokens). */ .min-width--60px { min-width: var(--size-60px); } /* ============================================================================ SURFACE UTILITIES Background surface tokens for cards, panels, and elevated content ========================================================================= */ /* NOTE: These should be CSS custom properties used inside BEM blocks, not standalone utility classes. Keeping minimal set for legacy compatibility. */ .surface-info-light { background: var(--soft-teal); } .surface-positive-light { background: var(--soft-teal); } .surface-subtle { background: var(--white-glass-visible-15); } /* UNIVERSAL TABLE - TOOLBARS Legacy utility hooks removed; canonical toolbar styles live in 04-semantic-classes/toolbar.css. */ /* ============================================================================= TYPOGRAPHY CLASSES ============================================================================= */ /* Base text - shared properties */ .text { font-family: var(--font-family-primary); font-weight: var(--weight-normal); color: currentColor; margin: 0; word-break: normal; overflow-wrap: normal; hyphens: none; } /* Text size utilities (used by ) */ .text-xs { font-size: var(--font-size-12); } .text-sm { font-size: var(--font-size-12); } .text-base { font-size: var(--font-size-12); } .text-lg { font-size: var(--font-size-14); } .text-xl { font-size: var(--font-size-18); } /* Heading variants */ .text--heading-h1 { font-family: var(--font-family-hero); font-size: var(--font-size-56); line-height: var(--line-height-tight); display: block; } .text--heading-h2 { font-family: var(--font-family-primary); font-size: var(--font-size-24); margin: 0; display: block; } .text--heading-h3 { font-family: var(--font-family-primary); font-size: var(--font-size-18); line-height: var(--line-height-tight); font-weight: var(--weight-semibold); margin: 0; display: block; } /* Component-specific header variants */ .text--page-header { font-family: var(--font-family-hero); font-size: var(--font-size-24); font-weight: var(--weight-bold); display: block; } .text--code-block { font-family: var(--font-family-mono); font-size: var(--font-size-12); line-height: var(--line-height-standard); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; display: block; } .text--section-header { font-size: var(--font-size-16); font-weight: var(--weight-semibold); color: var(--text-primary); display: block; } .text--section-label { font-size: var(--font-size-11); font-weight: var(--weight-bold); letter-spacing: 0.02em; font-variant-caps: small-caps; text-transform: none; color: var(--text-color-secondary); display: block; } /* section-label inside an outlined section badge: dense weight + line-height */ .text--section-label-badge { font-size: var(--font-size-10); font-weight: var(--weight-semibold); letter-spacing: 0.04em; font-variant-caps: normal; text-transform: uppercase; line-height: 1; display: inline-block; } /* Multi-paragraph text blocks (Paragraphs component) */ .paragraphs > .text:not(:last-child) { margin-bottom: var(--space-3); } .paragraphs > .text:not(:first-child) { text-indent: 1.5em; } /* Body text variants */ .text--body { font-size: var(--font-size-12); } .text--body-sm { font-size: var(--font-size-12); } .text--body-lg { font-size: var(--font-size-14); } .text--body-bold { font-weight: var(--weight-bold); } .text--body-semibold { font-weight: var(--weight-semibold); } .text--body-medium { font-weight: var(--weight-medium); font-size: var(--font-size-12); line-height: var(--line-height-normal); } .text--label { font-weight: var(--weight-medium); font-size: var(--font-size-12); line-height: var(--line-height-normal); } /* Supporting text variants */ .text--caption { font-weight: var(--weight-normal); font-size: var(--font-size-12); line-height: var(--line-height-tight); } .text--caption-secondary { font-weight: var(--weight-normal); font-size: var(--font-size-12); line-height: var(--line-height-tight); color: var(--medium-slate); } .text--caption-muted { font-weight: var(--weight-normal); font-size: var(--font-size-12); line-height: var(--line-height-tight); color: var(--medium-slate); } .text--label-emphasis { font-weight: var(--weight-semibold); font-size: var(--font-size-12); line-height: var(--line-height-normal); } .text--fine-print { font-weight: var(--weight-normal); font-size: var(--font-size-10); line-height: var(--line-height-tight); font-style: italic; } .text--fine-print { color: var(--medium-slate); } .text--fine-print-meta { font-weight: var(--weight-medium); font-size: var(--font-size-10); line-height: var(--line-height-tight); font-style: italic; color: var(--text-secondary); } /* Body text color variants */ .text--body-negative { font-size: var(--font-size-12); color: -1; } /* Emphasis variants */ .text--emphasis-primary { font-weight: var(--weight-semibold); font-size: var(--font-size-12); } .text-primary { font-weight: var(--weight-semibold); color: var(--text-primary); } .text-secondary { font-weight: var(--weight-normal); color: var(--text-secondary); } .text-tertiary { font-weight: var(--weight-normal); color: var(--text-muted); } .text--emphasis-secondary { color: var(--text-color-secondary); } .text--emphasis-tertiary { color: var(--text-color-muted); } /* ============================================================================ MOBILE RESPONSIVE TYPOGRAPHY Scaled font sizes and line heights for optimal readability across devices ============================================================================ */ /* Mobile (≤768px): Reduced heading sizes for small screens */ @media (max-width: 767px) { /* Headings: Scale down for mobile readability */ .text--heading-h1 { font-size: var(--font-size-33); line-height: var(--line-height-130pct); } .text--page-header { font-size: var(--font-size-33); line-height: var(--line-height-130pct); } .text--heading-h2 { font-size: var(--font-size-20); line-height: var(--line-height-130pct); } .text--heading-h3 { font-size: var(--font-size-16); line-height: var(--line-height-138pct); } .text--section-header { font-size: var(--font-size-14); line-height: var(--line-height-138pct); } /* Card headers: readable on mobile */ .text--card-header { font-size: var(--font-size-mobile-sm); /* 14px */ line-height: var(--line-height-138pct); } /* Body text: 14px minimum for comfortable reading at arm's length */ .text--body { font-size: var(--font-size-mobile-sm); /* 14px — up from 12px desktop */ line-height: var(--line-height-150pct); } .text--body-lg { font-size: var(--font-size-mobile-md); /* 15px */ line-height: var(--line-height-150pct); } /* : 12px minimum — 10px desktop is unreadable at arm's length */ .text--caption { font-size: var(--font-size-mobile-2xs); /* 12px */ line-height: var(--line-height-150pct); } .text--caption-secondary { font-size: var(--font-size-mobile-2xs); /* 12px */ line-height: var(--line-height-150pct); } .text--caption-muted { font-size: var(--font-size-mobile-2xs); /* 12px */ line-height: var(--line-height-150pct); } .text--label { font-size: var(--font-size-mobile-2xs); /* 12px */ line-height: var(--line-height-138pct); } .text--label-emphasis { font-size: var(--font-size-mobile-2xs); /* 12px */ line-height: var(--line-height-138pct); } /* Fine print: Bump to 11px — 10px is genuinely inaccessible at arm's length */ .text--fine-print { font-size: var(--font-size-11); line-height: var(--line-height-150pct); } /* Size utilities: Mobile adjustments */ .text-xl { font-size: var(--font-size-16); } .text-lg { font-size: var(--font-size-mobile-sm); /* 14px */ } } /* Tablet (769px - 1024px): Intermediate sizing */ @media (min-width: calc(var(--breakpoint-mobile-max) + 1px)) and (max-width: var(--breakpoint-tablet-max)) { .text--heading-h1 { font-size: var(--font-size-40); line-height: var(--line-height-138pct); } .text--page-header { font-size: var(--font-size-40); line-height: var(--line-height-138pct); } .text--heading-h2 { font-size: var(--font-size-22); line-height: var(--line-height-138pct); } .text--heading-h3 { font-size: var(--font-size-17); line-height: var(--line-height-138pct); } .text--section-header { font-size: var(--font-size-15); line-height: var(--line-height-138pct); } } /* Large screens (≥1280px): Enhanced readability with slightly larger text */ @media (min-width: var(--breakpoint-desktop)) { .text--heading-h1 { font-size: var(--font-size-56); line-height: var(--line-height-tight); } .text--page-header { font-size: var(--font-size-56); line-height: var(--line-height-tight); } .text--heading-h2 { font-size: var(--font-size-28); line-height: var(--line-height-tight); } .text--heading-h3 { font-size: var(--font-size-20); line-height: var(--line-height-130pct); } } /* NOTE: Do not add a "light on dark" prop or selector overrides. Dark surfaces should set the appropriate semantic text variables instead. */ /* Debug & health overlay styles split from 73-table-semantics.scss (non-table specific). Legacy floating badge/panel styles have been removed; only active overlay and chip/indicator semantics remain. */ .system-health-visible { display: block; visibility: visible; } .system-health-ready-sentinel { position: absolute; left: calc(-1 * var(--size-9999px)); } /* ============================================================================= HEALTH OVERLAY SEMANTICS (from 83-feedback-semantics.css) Centralized here so dev/health UI is scoped to debug styles ============================================================================= */ .health-overlay-container { position: fixed; inset-inline-start: var(--position-center-inline); bottom: var(--space-18px); transform: translateX(var(--offset-center-inline)); z-index: var(--z-topmost); pointer-events: none; } .health-overlay-panel { pointer-events: auto; min-width: var(--width-280px); max-width: var(--width-320px); background: var(--deeper-slate); border: var(--input-border-width-thin) solid var(--soft-gray); border-radius: var(--radius-standard); padding: var(--space-20px); box-shadow: var(--shadow-moderate); animation: slideInFromBottom var(--animation-deliberate) var(--easing-snappy); color: var(--deepest-slate); text-align: center; } .health-overlay-close-btn { position: absolute; inset-inline-end: var(--space-20px); top: var(--space-12px); border: none; background: transparent; font-size: var(--font-size-16); cursor: pointer; color: var(--medium-slate); } .health-overlay-title { font-size: var(--font-size-12); font-weight: var(--weight-semibold); color: var(--medium-slate); } .health-overlay-description { color: var(--dark-slate); font-size: var(--font-size-12); margin-top: var(--space-9px); } .health-overlay-message { color: var(--dark-slate); font-size: var(--font-size-12); } .health-overlay-urls-section { margin-top: var(--space-9px); } .health-overlay-url-label { padding: var(--space-9px) var(--space-9px); border-radius: var(--radius-standard); background: var(--brand-teal-hover); color: var(--text-color-on-dark); border: var(--input-border-width-thin) solid var(--soft-gray); } .health-overlay-url-container { margin-top: var(--space-9px); border: var(--input-border-width-thin) solid var(--soft-gray); border-radius: var(--radius-standard); padding: var(--space-9px); } .health-overlay-url-item { display: flex; gap: var(--space-9px); align-items: center; font-family: var(--font-family-mono); font-size: var(--font-size-12); color: var(--deepest-slate); } .health-overlay-url-text { flex: auto; min-width: var(--space-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .health-overlay-actions { margin-top: var(--space-12px); display: flex; gap: var(--space-9px); justify-content: center; } .health-overlay-error-details { background: var(--overlay-shine-subtle); border: var(--input-border-width-thin) solid var(--soft-gray); border-radius: var(--radius-standard); padding: var(--space-9px); margin-top: var(--space-9px); text-align: left; } .health-overlay-error-title { font-weight: var(--weight-bold); font-size: var(--font-size-12); margin-bottom: var(--space-9px); } .health-overlay-error-content { font-family: var(--font-family-mono); font-size: var(--font-size-12); color: var(--deepest-slate); } .health-overlay-error-actions { display: flex; gap: var(--space-9px); margin-top: var(--space-9px); } .health-overlay-copy-btn { padding: var(--space-9px) var(--space-9px); border-radius: var(--radius-standard); background: var(--surface-hover-subtle); color: var(--text-color-primary); border: var(--input-border-width-thin) solid var(--soft-slate); cursor: pointer; font-size: var(--font-size-12); } /* Dense inline health indicator used in overlays */ .health-indicator { display: inline-flex; align-items: center; gap: var(--space-1px); } .health-indicator__icon { width: var(--space-3-5px); height: var(--space-3-5px); } .health-indicator__icon--ok { color: var(--strong-teal); } .health-indicator__icon--error { color: var(--strong-red); } .health-indicator__label { font-size: var(--font-size-12); opacity: var(--opacity-subtle); } .health-chip__separator { opacity: var(--opacity-light); } .health-status-chip__wrapper { position: fixed; left: var(--position-center-inline); bottom: var(--space-24px); transform: translateX(var(--offset-center-inline)); z-index: var(--z-topmost); pointer-events: none; } .health-status-chip { display: inline-flex; align-items: center; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); border-radius: var(--radius-pill); background: var(--white); color: var(--text-color-on-light); border: var(--input-border-width-thin) solid var(--soft-slate); font-size: var(--font-size-12); box-shadow: var(--shadow-moderate); pointer-events: auto; opacity: var(--opacity-visible); } .health-status-chip { display: inline-flex; align-items: center; gap: var(--space-1px); padding: var(--space-1-5px) var(--space-9px); border-radius: var(--radius-pill); background: var(--deep-slate); color: var(--light-slate); border: var(--input-border-width-thin) solid var(--soft-slate); font-size: var(--font-size-12); box-shadow: var(--shadow-moderate); backdrop-filter: blur(2px); pointer-events: auto; opacity: var(--opacity-visible); } .health-chip-logs-btn { background: none; border: none; color: var(--text-color-on-dark); cursor: pointer; font-family: inherit; font-size: var(--font-size-12); opacity: var(--opacity-muted-strong); padding: var(--space-0); margin: var(--space-0); transition: opacity var(--animation-quick) var(--easing-smooth); } .health-chip-logs-btn:hover { opacity: var(--opacity-visible); text-decoration: underline; } .health-overlay-slack-btn { padding: var(--space-9px) var(--space-9px); border-radius: var(--radius-standard); background: var(--light-teal); color: var(--strong-teal); border: var(--input-border-width-thin) solid var(--strong-teal); cursor: pointer; font-size: var(--font-size-12); } .health-overlay-slack-disabled { font-size: var(--font-size-12); color: var(--medium-slate); align-self: center; } /* ============================================================================ VIRTUAL SCROLLING Performance optimization for large lists using virtual scrolling ============================================================================ */ /* ===== VIRTUAL LIST ===== */ .virtual-list { overflow-y: auto; overflow-x: hidden; } .virtual-list__container { position: relative; height: var(--height-screen-full); } .virtual-list__loading { display: flex; align-items: center; justify-content: center; padding: var(--space-12px); color: var(--medium-slate); font-size: var(--font-size-12); } .virtual-list__end { display: flex; align-items: center; justify-content: center; padding: var(--space-12px); color: var(--medium-slate); font-size: var(--font-size-12); } .virtual-list__error { display: flex; align-items: center; justify-content: center; padding: var(--space-12px); color: var(--strong-red); font-size: var(--font-size-12); background: var(--light-red); border: var(--input-border-width-thin) solid var(--soft-slate); border-color: var(--strong-red); border-radius: var(--radius-standard); margin: var(--space-1-5px); } /* ============================================================================ CANONICAL SEMANTIC DATA TYPE CLASSES (use these going forward) These classes apply semantic styling based on data type. They win over column-specific selectors due to cascade order. ============================================================================ */ /* Date */ .data--date { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--assc-expiration { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--agent-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--approval-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ba-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--batch-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--budget-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--candidate-stage { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--certification-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--compliance-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--confirmation-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--contract-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--data-quality-preset { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--document-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--document-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--document-visibility { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--exception-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--expense-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--feedback-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--feedback-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--field-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--form-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--form-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--form-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--geo-audit { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--geo-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--health-check-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--job-state { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--jurisdiction-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--jurisdiction-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--lead-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--line-item-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--line-item-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--line-item-validation-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--location-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--location-validation-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--message-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--message-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--notification-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--onboarding-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ops-update-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payable-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payables-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payment-method { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--receive-payment-method { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--method { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--position-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--pricing-mode { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--punch-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recap-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recap-submission-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--receipt-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recipient-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recurrence-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--rejection-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--report-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--row-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--rsvp-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--sensitivity { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--service-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--source { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--source-system { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--submission-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--task-status { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--task-priority { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--task-watcher { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--thread-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--training-product-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--transaction-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--agent-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--brand { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--brand-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--merchant-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--region { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--service-unit { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--tax-classification { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--billing-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--contact-role { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--entity-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--requires-sign-on { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--requires-permit { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--requires-business-registration { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--difficulty { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--assc-expiration-date { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* DateTime */ .data--datetime { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--receipt-match { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-time-zone-derived { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Date Range */ .data--date-range { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Date period selector (e.g., Last 7 days / Last 30 days / All time) */ .data--date-period { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payroll-punch-in { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payroll-punch-out { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--punch-in { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--punch-in-out { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--punch-out { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--punch-schedule { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--time-range { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Section-tabs responsive fallback dropdown */ .data--section-tabs-dropdown { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Active date filter trigger - strong but polite highlight */ .input-date--active { outline: var(--input-border-width-thin) solid var(--deep-teal); box-shadow: var(--ring-teal); } /* Event Schedule (event date + arrive/depart summary) */ .data--event-schedule { --width: var(--width-28ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; --col-text-overflow: clip; } /* Time */ .data--time { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--assc-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--eligibility { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-status-details { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-type-details { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--experience-level { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--job-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--parking-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--push-priority { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--reconciliation-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--referral-source { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--remittance-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--settlement-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--status-display { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--thread-task-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Rows-per-page selector in table pagination */ .data--rows-per-page { --width: var(--width-12ch); --filter-surface-column-span: 2; text-align: center; --col-white-space: nowrap; } .input--select.data--rows-per-page { width: var(--width); min-width: var(--width); max-width: var(--width); } .data--payment-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--match-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--request-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--application-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--ops-signal-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--attendance-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--receipt-match-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--audit-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--portal-feedback-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--portal-feedback-priority { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--portal-feedback-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--deploy-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } /* Money */ .data--money { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } .data--read-only-currency { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } /* Receipt details (date / venue / product / amount — multi-line) */ .data--receipt-details { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--reference-number { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--reference { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--meeting-template-name { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--crm-subject { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--note { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--service-role-assignments { width: auto; min-width: var(--width-32ch); max-width: none; text-align: left; --col-white-space: normal; } .data--schedule { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--payment-memo { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--form-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--url { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--contract-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--notification-action-url { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Invoice / line item description (description + product name) */ .data--line-item-description { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--address-line1 { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--address-line2 { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--ops-signal-message-preview { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--error-message { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--submission-linked-event { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--portal-resolved-target { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--portal-submission-error { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--search-query { --width: var(--width-36ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--message-preview { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--assigned-ba-list { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--client-special-requirements { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--location { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--mixers-accessories { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--notification-preferences { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--products-list { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: pre-line; } .data--recap-location { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--roles { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--services { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--users-multi { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--notification-title { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--notification-subject { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--user-identity-stack { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } .data--user-last-next-events { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; --col-white-space: normal; } /* Meeting template name + description */ /* Geolocation (lat / lng / accuracy / distance) */ .data--geolocation { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--submitter-name { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--submission-supplier { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--submission-client-entity { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--brands-sampled { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--training-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--action-log-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--billing-alert-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--billing-approval-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--billing-detail { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--billing-ocr-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--calendar-error { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--calendar-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--communication-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--escalation-reason { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--event-group-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--event-services { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--event-staff-roles { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--expense-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--health-details { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--help-tip-category { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--help-tip-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--item-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--message-error { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--message-recipient { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--recipients { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--message-subject { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--payment-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--payables-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--payables-reference { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--receipt-description { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--resolution-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--tag-assignment-notes { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--photo-annotation { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } /* CRM subject + body preview */ /* Duration in minutes + optional buffer */ .data--duration { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--gender { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--visibility { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--budget-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Meeting / event name (single-line extracted name) */ .data--meeting-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--position { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--template-type { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--user-notes { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--user-tags { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--ops-critical { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--support-ticket-category { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--document-asset-type { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--asset-upload { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--eeba-template { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--ba-confirmation-template { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--email-sender { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--invoice-grouping-period { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Email subject line */ /* Error message / failure reason */ /* Job position / role title */ /* Routing strategy display */ .data--routing-strategy { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--user-stage { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--contact-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--card-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--activity-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--account-activity-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--event-site { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--group-event { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--thread-topic { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--supplier-select { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--billing-account { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--budget-select { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--unified-template-media { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--budget-service-type-criteria { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--announcement-audience { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--announcement-priority { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--announcement-notification-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--announcement-upcoming-events-filter { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--announcement-worked-events-filter { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--value-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--media-purpose { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--budget { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--brand-name { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--budget-range { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--contact-method { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--payment-terms { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--target-invoice { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--timeline { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Team member count */ .data--team-count { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--item-type { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--count { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--show-to-client { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--timezone { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--active-status { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--invoice-number { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Document / form title */ .data--document-title { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; } .data--file-name { width: auto; min-width: var(--width-24ch); max-width: none; text-align: left; } /* Template name / type */ /* Document completion status */ .data--document-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--channel-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--roles-summary { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--user-events-count { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--review-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--submission-ref-id { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--git-hash { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--premise-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--user-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--receipt-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--supplier-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--payment-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--reimbursement-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--solo-bonus-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--recap-review-status { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--mark-as-read { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--ai-sentiment { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--portal-submission-status { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--billable-party-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--portal-form-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--external-reference { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--bill-to-external-id { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--choice { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--occasion { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--calendar-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } /* External system ID */ /* Account internal */ .data--git-branch { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--calendar-notification-preference { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } /* Search card summary content */ /* File name */ /* MIME type */ .data--mime-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--portal-feedback-sla { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--event-timezone { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } /* User account status: Active, Invited, Inactive, Fired */ .data--invoice-line-item-type { --width: var(--width-15ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } /* Select dropdown (interactive) */ /* Occasion (event-level short text) */ /* Expense Type (Receipts Audit) */ .data--expense-type { --width: var(--width-22ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--email-inbox { --width: var(--width-22ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--email-from { --width: var(--width-22ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Staffing summary (" Staffed") */ .data--staffing { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payroll-department { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--job-department { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--last-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--stage-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ba-role { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--external-position-id { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--external-worker-id { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--foreign-key-reference { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--incentive { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--incentives { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Type (generic - prefer specific variants below) */ /* Receipt Type */ /* Supplier Type */ /* Payment Type */ /* Priority - dense status-like column (~8ch) */ .data--priority { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); --col-white-space: nowrap; } /* Payment Reference ( reference number) */ .data--payment-reference { width: var(--width-18ch); min-width: var(--width-18ch); max-width: var(--width-18ch); text-align: left; } /* Payment Source (ACH, Check, Wire, etc.) */ .data--payment-source { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--job-title { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--job-title-profile { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--conversation-thread-status { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ba-leaderboard-name { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--tag-description { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ranked-value { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--role { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--campaign-message-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--billing-period { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--invoice-numbers { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--job-salary-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--po-number { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--source-file-id { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ba-tag { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--client-tag { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Payment Memo (free-text note on payment) */ /* Form Name (display name of a form template) */ /* Position Name (job name) */ .data--position-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--batch-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--expense-type-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--user-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--user-role { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--field-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--feedback-title { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--quiz-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ranked-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--target-column { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--target-table { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--template-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--thread-status { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--transform-function { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--update-title { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--calendar-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-group-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-label { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--automation-rules { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--shared-google-calendar-id { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--line-item-label { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--attendee-notification-preferences { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--communication-preference { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--static-choice-filter { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--template-editor-mode { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--user-choice { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--application-source { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Payroll Company (ADP name) */ .data--payroll-company { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--user-events-cell { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--client-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--booking-rep-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--contact-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--event-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--signal-subject { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--bill-to-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--billing-item-type { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--user-avatar { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--company-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--location-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--merchant-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Payroll Department */ /* Job Title */ /* Profile Job Title */ /* Job Department */ /* Worker ID (external payroll system ID) */ .data--worker-id { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--zip { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--first-name { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--group-key-instance { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Event ID */ .data--event-id { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--line-item-id { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--invoice-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--match-type { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--receipts { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--notification-preference { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--template-category { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--editor-mode { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Event ID + Status (stacked) */ .data--event-id-status { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Line Item Number */ .data--line-item-number { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--boolean-toggle { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--is-active { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--is-required { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--send-invoices { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--send-reminders { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--send-statements { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--send-announcements { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--client-visible { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--is-sensitive { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--is-premium { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--has-detailed-profile { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--has-social-media { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--processed-to-candidate-list { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--allow-personal-events { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--require-event-approval { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--auto-sync-google-calendar { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--group-by-state { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--group-by-brand { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--group-by-supplier { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--group-by-booking-rep { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--group-by-account { --width: var(--width-9ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Line Item Number */ /* Line Item Number */ /* Count */ /* Roles Summary (billed qty + filled count stacked) */ /* User Roles (multi-select role assignment) */ .data--user-roles { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--supplier { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--supplier-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--budget-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--policy-name { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } /* Sales Stats ( stacked) */ .data--sales-stats { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--validation-flags { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--data-validation { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* User Events Count (bucketed count filter) */ /* User Events Cell (user + event count summary cell) */ /* Email */ .data--email { --width: var(--width-26ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Frequency */ /* Phone */ .data--phone { --width: var(--width-15ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Gender */ /* ZIP / Postal */ /* Exact semantic text contracts replacing deleted generic free-text token */ .data--account-google-place-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--account-merchant-service-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--account-venue-types { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--action { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--amount { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--app-context-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--apparel-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--assigned-to-user { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--attention-reason { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--attire-notes { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--audit-status-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--audit-ts { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--auto-apply-status-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-approval-notes { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-client-billable { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-expense-category { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-id { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-merchant-category-code { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-merchant-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-raw-merchant-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-transaction-review-status { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--billability-reason { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--budget-summary { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--calendar { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--candidate-id { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--city-state { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--client-entity-id { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--client-entity-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--client-internal-id { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--close-note { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--config-bill-to-email { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--contact { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--contact-title { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--contract-number { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--counterparty-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--create-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--create-subject { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--created-by-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--credential-key { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--credential-username { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--days-overdue { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--display-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--edit-hashtags { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--edit-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--edit-subject { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--email-recipients { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--employee-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-external-key { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-info { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--expiration-date { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--certificate-expiration-date { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--external-id { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--global-bcc { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--global-cc { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--grade { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--group-by { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--date-basis { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--revenue-mode { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--exec-range { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--top-products-metric { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--group-to-override { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--grouping-period { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--hear-about-detail { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--how-did-you-hear { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--hours-worked { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--id-text { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--idempotency-key { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--implied-hourly-rate { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--industry { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--intake-reason { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--intake-source { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--intake-status { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--jf-account { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--jf-location { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--jf-overview { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--key { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--last-message-at { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--last-message-preview { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--location-type-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--log-output { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--login-url { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--manual-bcc { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--manual-cc { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--manual-to { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--mileage-due { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--mileage-due-override { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--mime { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--notification-message-template { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--occasion-contains-any-text { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--open-positions-summary { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--password-env-var { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--pay-due { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--payment-method-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--processing-status { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--processor-function { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--product-name-contains-any-text { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recipient-phone { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--referral-status { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--referred-user-stage-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--referred-user-status-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--referred-user-type-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--referrer-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--remittance-photos { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--responsible-party-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--revenue-source { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--commission-percent { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--review-priority { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--reviewed-by { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--safe-serve-certificate-url { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--send-variant-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--service-name-contains-any-text { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--signature-html { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--site-map-label { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--slack-webhook-url { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--source-ip { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--source-table { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ssn { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ssn-last-4 { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--state-code { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--state-event-reference-counts-text { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--status-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--platform { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--scheduled-time { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--published-at { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--priority-score { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--submission-id { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--submitted-by { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--summary { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--target-model { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--targeting-type { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--time-window { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--training-type { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--updated-by-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--user-full-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--validation-status { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--value-display { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--product { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ambassador-names { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--assigned-user { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--booking-rep { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--calendar-team-members { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--client-service-details { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--full-name-email { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--name-email { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--owner-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--site-contact-name { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Name (generic - prefer specific variants below) */ .data--full-name { --width: var(--width-28ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--portal-feedback-title { --width: var(--width-28ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Group Key (invoice grouping identifiers like "250|27|02|002|1080 1045") */ .data--group-key { --width: var(--width-30ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--email-snippet { --width: var(--width-30ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Client Name ( names) */ /* Booking Source (event booking source label select) */ .data--booking-source { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--portal-feedback-created-by { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--portal-feedback-owner { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Booking Ref (external booking reference string) */ .data--booking-ref { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Booking Rep Name (sales agent names) */ /* Contact Name (contact person names) */ /* Participants (comma-separated list of participant names) */ .data--participants { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--concatenated { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--address { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Concatenated Fields (multiple fields joined with separator) */ /* First Name */ /* Last Name */ /* Event Name */ /* Hours */ .data--hours { /* Slightly wider so header labels like "# Hours" don't truncate. */ --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } /* Products */ /* Address */ /* Notes */ .data--user-bio { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--event-type { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--sampling-type { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--account-name { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--width-ocr { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Message Preview (Signal feed, chat messages, notification previews) */ /* Signal Subject (Ops Signal feed ) */ .data--user-type { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--ocr-compare { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--subject { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--task-title { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--archive-reason { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--correction-reason { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--notification-type { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--requirement-level { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--responsible-party { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--service-interest { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Budget Type */ /* Budget (brand name) */ /* Category */ /* Icon — pixel-based: 14px SVG icons need reliable space, ch units clip in Safari */ .data--icon { --width: var(--size-40px); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--row-expand { --width: var(--size-40px); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Avatar — pixel-based so ch-unit differences don't clip the image */ .data--avatar { --width: var(--size-44px); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Email inbox table */ .data--email-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--flag { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--is-available { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--is-expired { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--is-manager-on-duty { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--is-overdue { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--is-polarity { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--is-read { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--first-response-breached { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--resolution-breached { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--reuse-allowed { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--purchase-allowed { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--time-conflict { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--email-subject { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--company { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--calendar-title { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--composer-subject { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--conversation-thread-name { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ops-signal-subject { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--saved-view-name { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--task-subject { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--bill-to-incentive { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--product-ids { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--service-ids { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--site-name { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--email-assigned { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--day { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--loc { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--email-received { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; --col-white-space: nowrap; } /* Thumbnail — pixel-based: image thumbnails have px dimensions, ch units clip in Safari */ .data--thumbnail { --width: var(--width-80px); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--logo-upload { --width: var(--width-80px); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--photos { --width: var(--width-80px); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Logo upload thumbnail slot */ /* Day */ /* Time Zone */ .data--tz { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Location (map pin / coords affordance) */ /* Actions - shrink-to-fit content, never grows */ .data--actions { /* Table columns don't respect flex sizing; use intrinsic sizing instead. */ width: max-content; min-width: max-content; text-align: center; } /* Account Name ( names) */ /* Photos — pixel-based: image thumbnails have px dimensions, ch units clip in Safari */ /* Boolean */ .data--boolean { --width: var(--width-5ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--avatar-editor { --width: var(--width-5ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } .data--channel-icon { --width: var(--width-5ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; } /* Bool toggles (wider columns) */ /* Bool semantic aliases (must be explicitly defined for consistent table widths) */ /* City */ .data--city { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--punch-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--severity { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--tag { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* State / Province */ .data--state { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--postal-code { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--status-label { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--ocr-status { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--ocr-compare-status { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--automation-status { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--email-status { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--deploy-environment { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--yes-no { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--recap-eligible-ba { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--recap-eligible-event { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--checkbox { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--quarter { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--rating { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } /* Postal Code / ZIP */ /* Address lines (forms): keep readable width and allow wrapping */ /* Timezone */ /* Event Status */ /* Invoice Status */ .data--invoice-description { --width: var(--width-28ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Review Status */ /* Active Status */ /* Invoice Number */ /* Bill To / Responsible Party */ .data--bill-to { --width: var(--width-30ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } .data--event-location { --width: var(--width-30ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Supplier */ /* Supplier Name (text-only variant) */ /* Budget Name (text-only variant) */ /* Product Name */ .data--product-name { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); } /* Policy Name */ /* Thread Title (communication threads) */ .data--thread-title { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--event-service { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); } /* Tag Name */ .data--tag-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--label-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--category-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--channel-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--table-view { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } /* Label Name */ /* Category Name */ /* Channel Name (Slack, communication channels) */ /* Table view / saved view selector */ /* Service Name */ .data--service-name { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width-32ch); min-width: var(--width-32ch); max-width: var(--width-32ch); } /* Match Type */ /* OCR Compare */ /* Width Details */ .data--width-details { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } .data--delivery-status { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Receipts Audit: stacked grid */ .data--receipt-audit-grid { --width: var(--width-100ch); --filter-surface-column-span: 10; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; } /* Width OCR */ /* Validation Flags */ /* Data Validation (for multiple flag chips) */ /* Percentage (numeric percent values) */ .data--percentage { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; } /* Receipts presence ("Attached"/"None") */ /* ============================================================================ DOMAIN-SPECIFIC STATUS CLASSES ============================================================================ */ /* Reimbursement Status */ /* Payment Status */ /* Solo Bonus Type */ /* Status Label */ /* Match Status */ /* OCR Status */ /* OCR Compare Status */ /* Automation Status */ /* Request Status */ /* Email Status */ /* Ops Signal Read Status */ /* Ops Signal Category */ /* Ops Signal Message Preview */ /* Recap Review Status */ /* Attendance Status */ /* Receipt Match Status */ /* Audit Status */ /* Portal Feedback Type */ /* Portal Feedback Priority */ /* Portal Feedback Status */ /* Portal Feedback Title */ /* Portal Feedback Created By */ /* Portal Feedback Owner */ /* Portal Feedback SLA */ /* ============================================================================ DOMAIN-SPECIFIC NAME CLASSES ============================================================================ */ /* BA Name */ .data--ba-name { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; } /* Stage Name */ /* User Avatar (name with ) */ /* Company Name ( name — generic company, not client-specific) */ /* Contract Name */ /* Batch Name (payroll batch, payout batch) */ /* Slug (URL-safe identifier) */ .data--slug { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; font-family: var(--font-family-mono); } /* Location Name ( display name) */ /* BA Role (brand ambassador role label) */ /* Period Code (YYMM period identifiers like "2401") */ .data--period-code { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; font-variant-numeric: tabular-nums; } /* Merchant Name ( merchant name) */ /* Expense Type Name ( category label) */ /* ============================================================================ SWEEP ADDITIONS — classes used in standaloneCanonicalBuilders.ts Added by css-class-coverage guardrail sweep. ============================================================================ */ /* === IDs ( IDs — narrow, right-aligned, tabular) === */ .data--id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--user-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--thread-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--company-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--invoice-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--receipt-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recap-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--task-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--eeba-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--eesr-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--registration-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--duplicate-candidate-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--matched-receipt-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--receipt-or-service-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--reimbursement-request-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ba-tag-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--client-tag-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--actual-invoice-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--entity-id { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === Year / Age / Multiplier (very narrow numeric) === */ .data--year { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } .data--card-last-four { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } .data--age { --width: var(--width-6ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } .data--multiplier { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } .data--percent { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } .data--distance { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; } /* === Codes (short alphanumeric codes — center, tabular) === */ .data--adp-company-code { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--batch-code { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--nhls-code { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ein { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--assc { --width: var(--width-10ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === Boolean / flag columns (narrow, center) === */ /* === Group key instance === */ /* === Status / type / category columns (short, center, 12ch) === */ /* Deploy environment label () */ /* Deploy status () */ /* Git commit hash (short SHA) */ /* Git branch name */ /* === SLA (short, center) === */ .data--sla { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === Medium name columns (left-aligned, 16–18ch) === */ .data--task-details-grid { --width: var(--width-22ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); --col-white-space: normal; vertical-align: top; } /* BA leaderboard — avatar + "First L." abbreviated display name */ .data--calendar-event-title { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === Tag description / ranked value (medium width, may wrap) === */ /* === Long text / notes / descriptions (flexible, wrapping) === */ .data--alert-notes { width: auto; min-width: var(--width-50ch); max-width: none; text-align: left; --col-white-space: normal; } .data--ops-critical-info { width: auto; min-width: var(--width-50ch); max-width: none; text-align: left; --col-white-space: normal; } .data--integration-type { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); } .data--communication-channel { width: var(--width-10ch); min-width: var(--width-8ch); max-width: var(--width-14ch); text-align: left; } .data--product-description { --width: var(--width-20ch); --filter-surface-column-span: 2; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--products { --width: var(--width-40ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: pre-line; } .data--account-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--admin-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--textarea { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--availability { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--bio { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--billing-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--eeba-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--event-alert-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--event-booking-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--event-service-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--invoice-criterion-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--invoice-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--job-description { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--job-requirements { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--motivation { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--payment-processing-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--payout-batch-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--processing-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--recap-answer-text { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--recap-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--receipt-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--receipt-review-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--satisfaction-comments { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--satisfaction-improvements { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--staffing-summary { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--staffing-assignment-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--sticky-note { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--template-content { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--thread-merge-reason { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } /* === External / foreign IDs (medium, left) === */ /* === Additional status / type columns (12ch, center) === */ /* === Additional IDs (8ch, right, tabular) === */ /* === Card last four (narrow, center, tabular) === */ /* === Receipt match (indicator, narrow center) === */ /* === Line item label (medium, left) === */ /* === Endpoint URL (flexible, left) === */ .data--endpoint-url { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === Template list / bill-to details (flexible multi-value) === */ .data--template-list { width: auto; min-width: var(--width-30ch); max-width: none; text-align: left; --col-white-space: normal; } .data--hard-stop { width: auto; min-width: var(--width-30ch); max-width: none; text-align: left; --col-white-space: normal; } .data--kit-location { width: auto; min-width: var(--width-30ch); max-width: none; text-align: left; --col-white-space: normal; } .data--bill-to-details { --width: var(--width-30ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } /* === Open staffing info (BA open events — client entity + products + role slots) === */ .data--open-staffing-info { width: auto; min-width: var(--width-30ch); max-width: var(--width-54ch); text-align: left; --col-white-space: normal; } /* === Email error (flexible, left) === */ .data--email-error { width: auto; min-width: var(--width-16ch); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* ============================================================================ MISSING BUILDER-SPECIFIC FIELD CLASSES These are used in canonical builders but were not previously defined ============================================================================ */ /* === Generic name (person, place, thing) === */ /* === Company name === */ /* === Product name === */ /* === (short descriptive) === */ /* === (multi-line flexible text) === */ /* === Event & document long-form text fields === */ .data--additional-information { --width: var(--width-34ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--parking-details { --width: var(--width-34ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--instructions { --width: var(--width-34ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--internal-notes { --width: var(--width-34ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--special-requirements { --width: var(--width-34ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--contact-notes { --width: var(--width-40ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--kit-contents { --width: var(--width-40ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--product-purchase-instructions { --width: var(--width-40ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--supplies-other { --width: var(--width-40ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--kit-location-details { --width: var(--width-40ch); --filter-surface-column-span: 4; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--event-description { --width: var(--width-30ch); --filter-surface-column-span: 3; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } .data--event-details { --width: var(--width-100ch); --filter-surface-column-span: 10; width: auto; min-width: var(--width); max-width: none; text-align: left; --col-white-space: normal; } /* === Builder-specific notes (multi-line flexible text) === */ /* === Short fields (single-line) === */ /* === Email-ish multi-recipient fields === */ .data--composer-bcc { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--composer-cc { --width: var(--width-32ch); --filter-surface-column-span: 4; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === fields (single-line) === */ /* === Long multi-value lists (wrapping allowed) === */ /* === fields (single-line) === */ /* === Status-ish fields (dense, centered) === */ /* === Simple boolean-ish fields === */ /* === Date-ish fields === */ /* === Numeric-ish fields === */ .data--number { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--read-only-number { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--driving-distance-miles { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--remittance-remaining { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--threshold-value { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: right; font-variant-numeric: tabular-nums; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* === === */ /* === Small categorical fields === */ /* === Time-ish fields === */ /* === (dense) === */ /* === Image-ish cells === */ .data--photo { width: var(--size-80px); min-width: var(--size-80px); max-width: var(--size-80px); text-align: center; --col-white-space: nowrap; } .data--receipt-image { width: var(--size-80px); min-width: var(--size-80px); max-width: var(--size-80px); text-align: center; --col-white-space: nowrap; } .data--remittance-image { width: var(--size-80px); min-width: var(--size-80px); max-width: var(--size-80px); text-align: center; --col-white-space: nowrap; } /* === Misc (safe defaults) === */ .data--allocation-row { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--audit-grid { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--audit-summary { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--billing-invoice-lookup { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--comment { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--jump-to-receipt { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--ocr-data { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--password { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } /* Descendant combinator, not a same-element compound selector: form__row-field lands on the outer
(FormFieldSurface.tsx), while dataClassName lands on the inner (Input.tsx) — see formControlWidthOwner.test.ts, which enforces that split. A same-element selector here can never match, so these fields silently kept their narrow table-column width (26ch/18ch from the bare .data--email/.data--password rules above) instead of going full width in a standalone form row. */ .form__row-field .data--email, .form__row-field .data--password { width: var(--size-100pct); min-width: 0; max-width: none; } .data--row-choice { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--submission-premise-type { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--template-root { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: none; text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--legacy-notes { width: var(--size-100pct); min-width: var(--size-100pct); max-width: var(--size-100pct); text-align: left; --col-white-space: pre-wrap; } /* === identifiers & IDs === */ /* === fields === */ /* === Application source (where candidate heard about us) === */ /* === BA tag ( badge) === */ /* === Client tag ( badge) === */ /* === Incentive details (dense money-like display) === */ /* === Distance measurement ( with units) === */ /* Cell layout helpers for stacked-lines cells that include an action button */ /* Flex row: [action btn col] [location stack col] — only rendered when action is present */ .cell-location__flex-wrapper { display: flex; align-items: flex-start; gap: var(--space-1px); min-width: 0; } .cell-bill-to { display: grid; min-width: 0; row-gap: var(--space-0-5px); } .cell-bill-to--with-avatar { display: grid; min-width: 0; row-gap: var(--space-0-5px); } .cell-bill-to--with-avatar { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-0-5px); } .cell-bill-to__avatar { grid-column: 1; grid-row: 1; } .cell-location__map-pin { grid-column: 1; grid-row: 1; } .cell-bill-to__primary-text { grid-column: 1; } .cell-bill-to__meta { grid-column: 1; } .cell-bill-to__primary-text--with-avatar { grid-column: 2; } .cell-bill-to__meta--with-avatar { grid-column: 2; } .cell-bill-to__primary-text { min-width: 0; } .cell-bill-to__primary-text--with-avatar { min-width: 0; } .cell-bill-to__meta { display: grid; row-gap: var(--size-1px); min-width: 0; } .cell-bill-to__meta--with-avatar { display: grid; row-gap: var(--size-1px); min-width: 0; } .icon-text__content { display: grid; row-gap: var(--size-1px); min-width: 0; } .icon-text__content--with-icon { display: grid; row-gap: var(--size-1px); min-width: 0; } .name-with-avatar-cell { display: inline-flex; align-items: center; gap: var(--space-0-5px); min-width: 0; width: var(--size-100pct); } .name-with-avatar-cell__avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .name-with-avatar-cell__content { display: grid; row-gap: var(--size-1px); min-width: 0; flex: 1 1 auto; } .name-with-avatar-cell__name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name-with-avatar-cell__email { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name-with-avatar-cell__email-action { display: block; min-width: 0; color: var(--text-muted); } .name-with-avatar-cell__email-action:hover { color: var(--text-primary); } .template-name-cell { display: inline-flex; align-items: center; gap: var(--space-0-5px); min-width: 0; width: 100%; } /* Two-line stacked cells: a primary identifying line over a secondary muted detail line. Mirrors .name-with-avatar-cell__content's grid/row-gap shape. */ .event-schedule-cell, .event-location-cell, .bill-to-details-cell, .service-validation-cell, .ranked-primary-display, .user-events-cell, .user-identity-cell { display: grid; row-gap: var(--size-1px); min-width: 0; } .event-schedule-cell__date, .event-schedule-cell__time, .event-location-cell__name, .event-location-cell__address, .bill-to-details-cell__bill-to, .bill-to-details-cell__meta, .service-validation-cell__rate, .service-validation-cell__flags, .ranked-primary-display__primary, .ranked-primary-display__meta, .user-events-cell__count, .user-events-cell__range, .user-identity-cell__name, .user-identity-cell__meta { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .participants-summary-cell { display: inline-flex; align-items: baseline; gap: var(--space-0-5px); min-width: 0; } .participants-summary-cell__names { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .participants-summary-cell__overflow { display: block; flex: 0 0 auto; } .sales-stats-cell { display: inline-flex; align-items: baseline; gap: var(--space-9px); min-width: 0; } .sales-stats-cell__stat { display: inline-flex; align-items: baseline; gap: var(--space-0-5px); white-space: nowrap; } .sales-stats-cell__label { display: inline-block; } .badge-list-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-0-5px); min-width: 0; } .team-member-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-0-5px); min-width: 0; width: 100%; } .team-member-cell > :first-child { grid-column: 1; grid-row: 1 / span 8; align-self: start; justify-self: start; } .team-member-cell > :not(:first-child) { grid-column: 2; min-width: 0; } .team-member-cell > :not(:first-child):not(.badge-list-cell) { display: block; } .team-member-cell > .badge-list-cell { display: grid; row-gap: var(--size-1px); min-width: 0; } .team-member-cell > .badge-list-cell + .text, .team-member-cell > .text + .text { display: grid; row-gap: var(--size-1px); min-width: 0; } .icon-text { display: grid; min-width: 0; } .icon-text--with-icon { display: grid; min-width: 0; } .icon-text--with-icon { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-0-5px); align-items: flex-start; } .icon-text__icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; } .icon-text__content--with-icon { grid-column: 2; } .icon-text__main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-text__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-location__content-col { flex: 1; min-width: 0; } .cell-location__grid { display: grid; min-width: 0; row-gap: var(--size-1px); } .cell-location__grid--with-pin { display: grid; min-width: 0; row-gap: var(--size-1px); } .cell-location__grid--with-pin { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--size-1px); } .cell-location__name { grid-column: 1; } .cell-location__name--link { grid-column: 1; } .cell-location__address { grid-column: 1; } .cell-location__city-state { grid-column: 1; } .cell-location__name--with-pin { grid-column: 2; } .cell-location__name--link--with-pin { grid-column: 2; } .cell-location__address--with-pin { grid-column: 2; } .cell-location__city-state--with-pin { grid-column: 2; } /* Ensure Location cells match stacked-lines density even if legacy component CSS loads later. */ .cell-location__content-col { display: block; gap: 0; } .cell--stacked { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } .punch-time-slot { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } .punch-time-slot__details { display: flex; flex-direction: column; gap: var(--space-0-5px); min-width: 0; } /* === Open staffing cell internals (BA open events — client entity + products + role slots) === */ .cell-open-staffing { display: flex; flex-direction: column; gap: var(--space-9px); align-items: flex-start; min-width: 0; } .cell-open-staffing__slot { display: flex; flex-direction: column; gap: var(--space-1-5px); width: var(--size-100pct); min-width: 0; } .cell-open-staffing__role { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3px); min-width: 0; } .cell-open-staffing__assignee { display: flex; flex-direction: row; align-items: center; gap: var(--space-9px); min-width: 0; } .punch-time-slot__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1px); min-width: 0; } .punch-time-slot__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1px); min-width: 0; } .live-punch-time__cell { display: inline-flex; align-items: center; gap: var(--space-0-5px); min-width: 0; } .live-punch-time__value { display: inline-flex; align-items: center; min-width: 0; } .live-punch-time__override-indicator { display: inline-flex; align-items: center; gap: var(--size-1px); } .cell-location__name-row { display: flex; align-items: center; gap: var(--space-0-5px); } .cell-location__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cell-location__name--link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cell-location__name--with-pin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cell-location__name--link--with-pin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cell-location__name--link { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--teal-glass-subtle-25); text-underline-offset: var(--size-2px); } .cell-location__name--link:hover { text-decoration-color: currentColor; } .cell-location__map-pin { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--pin-default); text-decoration: none; line-height: 1; } .cell-location__map-pin--no-coords { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--pin-default); text-decoration: none; line-height: 1; } .cell-location__map-pin:hover { color: var(--deep-teal); } .cell-location__map-pin:visited { color: var(--pin-default); } .cell-location__map-pin--no-coords { color: var(--text-muted); opacity: 0.7; } .cell-location__address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--font-size-12); line-height: 1.25; } .cell-location__address--with-pin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--font-size-12); line-height: 1.25; } .cell-location__city-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--font-size-12); line-height: 1.25; } .cell-location__city-state--with-pin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--font-size-12); line-height: 1.25; } .pin--tone-default { color: var(--pin-default); } .pin--tone-active { color: var(--pin-active); } .pin--tone-upcoming { color: var(--pin-upcoming); } .pin--tone-completed { color: var(--pin-completed); } .pin--tone-urgent { color: var(--pin-urgent); } .pin--tone-warning { color: var(--pin-warning); } .pin--tone-client { color: var(--pin-user-client); } .pin--tone-ba { color: var(--pin-user-ba); } /* Calendar type */ /* Email alias (e.g., support@domain.com) */ .data--email-alias { width: auto; min-width: var(--width-28ch); max-width: none; text-align: left; --col-white-space: nowrap; } /* Primary thread column */ .data--thread-control { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--event-status { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--attire { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--kit-provided { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--product-provider { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--mixers { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--supplies-cups { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--supplies-table { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--supplies-tablecloth { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--supplies-bucket { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } .data--ice-provider { --width: var(--width-18ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; } /* frequency selectors */ /* Notification preference enum labels */ /* Calendar attendee notification preference select */ /* Event logistics async-selects (same select sizing, unique semantics) */ /* Support ticket category */ /* Announcement audience */ /* Archive reason */ /* Budget range */ /* Contact method */ /* Correction reason */ /* Document asset type */ /* Asset upload (thumbnail + file upload cell) */ /* EEBA template */ /* Email sender */ /* Invoice grouping period */ /* Notification type */ /* Notification title */ /* Notification action URL */ /* Payment terms */ /* Punch type */ /* Requirement level */ /* Responsible party */ /* Service interest */ /* Severity */ /* Tag ( label) */ /* Target invoice */ /* Timeline */ /* Event Description (textarea) */ /* Additional Information (textarea) */ /* Instructions (textarea) */ /* Ops Critical Info (textarea) */ /* Internal Notes (textarea) */ /* Legacy Notes (textarea, full width) */ /* Hard Stop Details (textarea) */ /* Kit Location (textarea) */ /* Kit Contents (textarea) */ /* Product Purchase Instructions (textarea / truncated read-only) */ /* Contact Notes (textarea) */ /* Bill-To Incentive (single-line text) */ /* Product IDs (multi-select pills) */ /* Service IDs (multi-select pills) */ /* Profile photo upload */ .data--profile-photo { width: auto; } /* Location map picker */ .data--location-map { width: auto; } /* User identity stack (status + ids + user type) */ /* AI sentiment */ /* Client entity */ .data--client-entity { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: normal; --col-text-overflow: clip; } /* Billable party type */ /* User activity summary (created date) */ .data--user-created-last-active { width: auto; min-width: var(--width-26ch); max-width: none; text-align: left; --col-white-space: normal; } /* User activity timeline (last / next events) */ /* Service name with nested role assignments */ /* ============================================================================ DROPDOWN MENU PANEL WIDTHS Applied via className on — controls portal panel width. ============================================================================ */ /* Search history / autocomplete dropdown — stretches to content, min 240px */ .data--search { --width: var(--width-240px); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: none; } .data--emoji-picker { width: auto; min-width: var(--width-240px); max-width: none; } /* Emoji picker panel */ /* picker panel */ .data--date-picker { width: auto; min-width: max-content; max-width: calc(100vw - 16px); } /* AUTO-REGISTERED semantic selector owners for standaloneCanonicalBuilders guardrail closure */ .data--billing-audit-status {} .data--recap-audit-status {} .data--batch-code, .data--event-name, .data--group-event-name, .data--invoice-grouping-name, .data--job-posting-title, .data--message-content, .data--message-template-name, .data--notification-content, .data--recent-content-label, .data--recent-content-message, .data--recent-content-name, .data--reference-label, .data--reference-value, .data--role-name, .data--sla-policy-name, .data--support-contact-name, .data--training-title { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--invoice-line-item-description, .data--receipt-rejection-details { width: auto; min-width: var(--width-20ch); max-width: none; text-align: left; --col-white-space: normal; } .data--ba-reimbursement-notes, .data--quarterly-wage-report-notes { width: auto; min-width: var(--width-40ch); max-width: none; text-align: left; --col-white-space: normal; } .data--message-direction, .data--ops-stats-frequency, .data--recent-content-status { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--recent-content-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--agreement-name, .data--client-budget-range, .data--client-project-timeline, .data--client-service-interest, .data--google-places, .data--invoice-recipients, .data--multi-choice, .data--ranked-primary, .data--smart-fill-field-label { --width: var(--width-20ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--agreement-number, .data--billing-reference, .data--serve-certificate-url { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--event-products, .data--event-service-role-assignments, .data--media-asset-upload, .data--route-path, .data--team-member-detail, .data--unified-template-item { --width: var(--width-24ch); --filter-surface-column-span: 3; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: left; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--investment-billing-audit-status, .data--investment-recap-audit-status, .data--service-validation { --width: var(--width-16ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--preferred-contact-method, .data--ranked-status, .data--task-note-type, .data--template-media-type { --width: var(--width-14ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; --col-text-overflow: ellipsis; } .data--image-thumbnail, .data--signature { --width: var(--width-12ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } .data--zip-code { --width: var(--width-8ch); --filter-surface-column-span: 2; width: var(--width); min-width: var(--width); max-width: var(--width); text-align: center; --col-white-space: nowrap; } /* ========================================================================== MINIMAL CSS RESET ========================================================================== Only the bare essentials - layout/semantic CSS files handle everything else ========================================================================== */ /* ===== BOX-SIZING RESET ===== */ * { box-sizing: border-box; } *::before { box-sizing: border-box; } *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* ===== BASE ===== */ html { overflow-x: hidden; overflow-y: hidden; } html { margin: 0; padding: 0; height: 100dvh; overflow: hidden; box-sizing: border-box; /* Match the login page gradient so see teal immediately, before React finishes loading (~2-3s JS parse). Once the app shell renders it covers this completely. */ background: linear-gradient(var(--angle-vertical), var(--light-teal), var(--medium-teal), var(--strong-teal)); color: var(--text-primary); font-family: var(--font-family-primary); } body { margin: 0; padding: 0; height: 100dvh; overflow: hidden; box-sizing: border-box; /* Match the login page gradient so see teal immediately, before React finishes loading (~2-3s JS parse). Once the app shell renders it covers this completely. */ background: linear-gradient(var(--angle-vertical), var(--light-teal), var(--medium-teal), var(--strong-teal)); color: var(--text-primary); font-family: var(--font-family-primary); } /* React mount: ensure the app root participates in layout so Playwright visibility checks (and fixed/absolute overlays) have a stable containing box. */ #root { width: 100%; height: 100%; } /* Gradient quality tokens */ :root { /* Teal tab gradients */ --teal-glass-soft-gradient: linear-gradient( var(--angle-vertical), var(--teal-glass-bold-45) var(--stop-start), var(--teal-dark-glass-heavy-40) var(--stop-mid), var(--teal-deep-glass-45) var(--stop-end) ); /* Teal tab gradient (active) */ --teal-glass-strong-gradient: linear-gradient( var(--angle-vertical), var(--teal-glass-heavy-60) var(--stop-start), var(--teal-dark-glass-solid-50) var(--stop-mid), var(--teal-deep-glass-45) var(--stop-end) ); /* Overlay shine */ --overlay-shine-subtle: linear-gradient( var(--angle-vertical), var(--white-glass-visible-15) var(--stop-start), var(--white-glass-whisper-08) var(--stop-mid-alt), transparent var(--stop-end) ); /* Tab shine overlay (stronger for effect) */ --overlay-tab-shine: linear-gradient( var(--angle-vertical), var(--white-glass-thick-60) var(--stop-start), var(--white-glass-clear-18) 20%, transparent 40% ); /* Slate glass */ --slate-glass-popup-gradient: linear-gradient( var(--angle-diagonal), var(--slate-glass-soft-12) var(--stop-start), var(--slate-dark-glass-strong-40) var(--stop-mid), var(--slate-dark-glass-medium-70) var(--stop-end) ); /* Overlay + link hover */ --overlay-frosted-bright: var(--white-glass-frosted-90); --surface-hover-subtle: var(--white-glass-faint-10); --link-hover-subtle: var(--teal-glass-faint-10); /* ────────────────────────────────────────────────────────────────────── Real gradient tokens (quality) to be referenced by semantic aliases ────────────────────────────────────────────────────────────────────── */ /* Teal diagonal gradient: soft → medium → deep (deep at bottom-right) */ --gradient-teal-diagonal-soft-to-deep: linear-gradient( var(--angle-diagonal), var(--surface-gradient-soft-start) var(--stop-start), var(--surface-gradient-soft-mid) var(--stop-mid), var(--surface-gradient-soft-end) var(--stop-end) ); /* Sidebar base uses diagonal for richer bottom-right depth */ --gradient-sidebar-base-teal: var(--gradient-teal-diagonal-soft-to-deep); /* Unified ACTIVE diagonal: vibrant → strong → medium (tokenized stops) */ --gradient-teal-diagonal-active-strong: linear-gradient( var(--angle-diagonal), var(--vibrant-teal) var(--stop-start), var(--strong-teal) var(--stop-mid), var(--strong-teal) var(--stop-far), var(--medium-teal) var(--stop-end) ); /* ACTIVE diagonal with darker corner: vibrant → strong → darker strong */ --gradient-teal-diagonal-active-strong-dark: linear-gradient( var(--angle-diagonal), var(--vibrant-teal) var(--stop-start), var(--strong-teal) var(--stop-mid), var(--strong-teal) var(--stop-far), var(--deep-teal) var(--stop-end) ); /* Unified SECONDARY diagonal: medium → vibrant → strong Slightly lighter than ACTIVE's lightest teal (keeps header left from washing out) */ --gradient-teal-diagonal-secondary-light: linear-gradient( var(--angle-diagonal), var(--surface-gradient-secondary-start) var(--stop-start), var(--surface-gradient-secondary-mid) var(--stop-mid), var(--surface-gradient-secondary-end) var(--stop-end) ); --gradient-teal-diagonal-tiertiary-light: linear-gradient( var(--angle-diagonal), var(--surface-gradient-tertiary-start) var(--stop-start), var(--surface-gradient-tertiary-mid) var(--stop-mid), var(--surface-gradient-tertiary-end) var(--stop-end) ); /* Unified HOVER diagonal: glassy light → medium translucency */ --gradient-teal-diagonal-hover-glass-soft: linear-gradient( var(--angle-diagonal), var(--teal-light-glass-light-24) var(--stop-start), var(--teal-dark-glass-light-20) var(--stop-mid), var(--teal-dark-glass-visible-16) var(--stop-end) ); /* Dark button (slate) diagonal: slate-light → slate-strong → slate-deep */ --gradient-slate-diagonal-active-strong: linear-gradient( var(--angle-diagonal), var(--light-slate) var(--stop-start), var(--medium-slate) var(--stop-mid), var(--deep-slate) var(--stop-end) ); /* Dark button hover (slate glass) diagonal */ --gradient-slate-diagonal-hover-glass-soft: linear-gradient( var(--angle-diagonal), var(--slate-glass-light-20) var(--stop-start), var(--slate-glass-visible-15) var(--stop-mid), var(--slate-glass-soft-12) var(--stop-end) ); /* Teal vertical stripe: vibrant → strong */ --gradient-teal-vertical-vibrant-to-strong: linear-gradient( var(--angle-vertical), var(--vibrant-teal), var(--strong-teal) ); --gradient-teal-vertical-strong-to-deep: linear-gradient( var(--angle-vertical), var(--strong-teal), var(--deep-teal) ); --gradient-teal-vertical-vibrant-deep: linear-gradient( var(--angle-vertical), var(--vibrant-teal), var(--deep-teal) ); --gradient-sidebar-active-stripe: var(--gradient-teal-vertical-vibrant-to-strong); /* Divider horizontal: transparent → white-glass → transparent (tokenized geometry) */ --gradient-divider-horizontal-soft: linear-gradient( var(--angle-vertical), transparent var(--stop-start), var(--white-glass-medium-30) calc(var(--stop-near) + 3%), var(--white-glass-medium-30) calc(var(--stop-far) - 3%), transparent var(--stop-end) ); --gradient-sidebar-divider: var(--gradient-divider-horizontal-soft); /* Divider horizontal STRONG: higher contrast center band for visibility */ --gradient-divider-horizontal-strong: linear-gradient( var(--angle-vertical), transparent var(--stop-start), var(--white-glass-elevated-45) var(--stop-near), var(--white-glass-elevated-45) var(--stop-far), transparent var(--stop-end) ); /* Divider horizontal LIGHT: for dark backgrounds, even more visible */ --gradient-divider-horizontal-light: linear-gradient( var(--angle-vertical), transparent var(--stop-start), var(--white-glass-medium-25) calc(var(--stop-near) + 2%), var(--white-glass-medium-25) calc(var(--stop-far) - 2%), transparent var(--stop-end) ); /* Section header divider: horizontal soft-slate band (tokenized geometry) */ --gradient-divider-horizontal-slate: linear-gradient( var(--angle-vertical), transparent var(--stop-start), var(--soft-slate) var(--stop-near), var(--soft-slate) var(--stop-far), transparent var(--stop-end) ); --gradient-teal-pill-diagonal-soft-light-medium: linear-gradient( var(--angle-diagonal), var(--surface-gradient-pill-start) var(--stop-start), var(--surface-gradient-pill-mid) var(--stop-mid), var(--surface-gradient-pill-end) var(--stop-end) ); /* Teal pill hover: diagonal glass light → darker → visible */ --gradient-teal-pill-diagonal-glass-hover: linear-gradient( var(--angle-diagonal), var(--teal-light-glass-light-24) var(--stop-start), var(--teal-dark-glass-light-20) var(--stop-mid), var(--teal-dark-glass-visible-16) var(--stop-end) ); /* Backward-compatible aliases */ --gradient-pill-default: var(--gradient-teal-pill-diagonal-soft-light-medium); --gradient-pill-hover: var(--gradient-teal-pill-diagonal-glass-hover); /* Login card sheen */ --card-sheen-login: radial-gradient( ellipse 88% 64% at 50% 32%, var(--white-glass-medium-30), var(--white-glass-light-20) var(--stop-mid), transparent var(--stop-far) ), radial-gradient( ellipse 120% 80% at 50% 100%, var(--white-glass-soft-12), transparent var(--stop-far) ), linear-gradient( var(--white-glass-soft-12), transparent var(--stop-mid-alt) ); /* Login card bullseye: darker hover glass with subtle logo-area lift */ --card-bullseye-login: radial-gradient( ellipse 92% 36% at 50% 16%, var(--white-glass-thick-60) var(--stop-start), var(--white-glass-strong-40) var(--stop-near), var(--white-glass-light-20) var(--stop-mid-alt), transparent var(--stop-end) ), linear-gradient( var(--teal-dark-glass-clear-18), var(--teal-dark-glass-medium-22) ); } :root { /* Simple single-layer shadows (primitive + color) */ --shadow-none: var(--shadow-depth-off); --shadow-crisp: var(--shadow-depth-crisp) var(--black-glass-faint-10); --shadow-subtle: var(--shadow-depth-subtle) var(--teal-dark-glass-clear-18); --shadow-soft: var(--shadow-depth-soft) var(--teal-dark-glass-medium-22); --shadow-moderate: var(--shadow-depth-strong) var(--black-glass-clear-18); --shadow-panel: var(--shadow-depth-panel-strong) var(--black-glass-faint-10); --shadow-divider: var(--shadow-depth-crisp) var(--black-glass-faint-10); --shadow-divider-flip: var(--inset-0) -1px 2px var(--black-glass-faint-10); /* Directional divider shadows (aliases for clarity) */ --shadow-divider-bottom: var(--shadow-divider); --shadow-divider-top: var(--shadow-divider-flip); --shadow-divider-middle: var(--shadow-soft); /* Embossed teal gradient shadows (quality-focused) */ --shadow-glow-dark-teal-subtle: var(--shadow-emboss-rest-geometry) var(--teal-dark-glass-light-20); --shadow-glow-dark-teal-strong: var(--shadow-emboss-hover-geometry) var(--teal-dark-glass-light-20); /* Glass-tinted depth shadows (explicit glass variants) */ --shadow-glass-subtle: var(--shadow-depth-subtle) var(--teal-dark-glass-clear-18); --shadow-glass-soft: var(--shadow-depth-soft) var(--teal-dark-glass-medium-22); --shadow-glass-moderate: var(--shadow-depth-strong) var(--teal-dark-glass-clear-18); /* Glow shadows (teal-tinted specialty shadows) */ --shadow-glow-crisp: var(--shadow-glow-depth-soft) var(--teal-dark-glass-faint-10); --shadow-glow-subtle: var(--shadow-glow-depth-strong) var(--teal-dark-glass-light-20); --shadow-glow-soft: var(--shadow-glow-depth-elevated) var(--teal-dark-glass-clear-18); /* Multi-layer shadow compositions (combine primitives with color) */ /* Ambient layer: soft, diffused outer glow */ --shadow-ambient-sm: var(--shadow-float-sm-ambient) var(--black-glass-light-20); --shadow-ambient-md: var(--shadow-float-md-ambient) var(--black-glass-light-20); --shadow-ambient-lg: var(--shadow-float-lg-ambient) var(--black-glass-solid-60); --shadow-ambient-lg-hover: var(--shadow-float-lg-hover-ambient) var(--black-glass-light-20); /* Contact layer: sharp shadow at touch point */ --shadow-contact-sm: var(--shadow-float-sm-contact) var(--black-glass-whisper-08); --shadow-contact-md: var(--shadow-float-md-contact) var(--black-glass-whisper-08); --shadow-contact-lg: var(--shadow-float-lg-contact) var(--black-glass-light-20); --shadow-contact-lg-hover: var(--shadow-float-lg-hover-contact) var(--black-glass-faint-10); /* Combined float shadows (ambient + contact layers) */ --shadow-float-sm: var(--shadow-ambient-sm), var(--shadow-contact-sm); --shadow-float-md: var(--shadow-ambient-md), var(--shadow-contact-md); --shadow-float-lg: var(--shadow-ambient-lg), var(--shadow-contact-lg); --shadow-float-lg-hover: var(--shadow-ambient-lg-hover), var(--shadow-contact-lg-hover); /* Popup-specific float shadow */ --shadow-popup-float: var(--shadow-float-lg); /* Dark glass diagonal gradient - 3-color with increasing opacity * ( → ) */ --gradient-dark-glass-diagonal: linear-gradient( var(--angle-diagonal), var(--slate-dark-glass-strong-40) var(--stop-start), var(--slate-dark-glass-medium-70) var(--stop-mid), var(--black-glass-deep-80) var(--stop-end) ); /* Shimmer gradient - horizontal subtle (teal accent on slate) */ --gradient-shimmer-horizontal-subtle: linear-gradient( 90deg, var(--teal-dark-glass-soft-12) var(--stop-start), var(--teal-dark-glass-light-20) var(--stop-mid), var(--teal-dark-glass-soft-12) var(--stop-end) ); /* Shimmer gradient - horizontal strong (teal accent on slate) */ --gradient-shimmer-horizontal-strong: linear-gradient( 90deg, var(--teal-dark-glass-strong-30) var(--stop-start), var(--teal-dark-glass-solid-50) var(--stop-mid), var(--teal-dark-glass-strong-30) var(--stop-end) ); /* Shimmer static color - teal-tinted slate */ --color-shimmer-static: var(--teal-dark-glass-soft-12); /* Subtle teal noise texture for large surfaces (e.g., sidebar) */ --sidebar-noise-overlay: radial-gradient(circle closest-side at 0 0, var(--teal-dark-glass-soft-12) 0, transparent 55%), radial-gradient(circle closest-side at 100% 0, var(--teal-dark-glass-soft-12) 0, transparent 55%), radial-gradient(circle closest-side at 0 100%, var(--teal-dark-glass-soft-12) 0, transparent 55%), radial-gradient(circle closest-side at 100% 100%, var(--teal-dark-glass-soft-12) 0, transparent 55%); /* Skeleton shimmer motion combos */ --skeleton-background-size: var(--size-200pct) var(--size-100pct); --skeleton-shimmer-animation: skeletonShimmer var(--animation-duration-skeleton) var(--animation-easing-shimmer) infinite; --skeleton-shimmer-pos-start: var(--size-200pct) 0; --skeleton-shimmer-pos-end: calc(-1 * var(--size-200pct)) 0; /* Brand / bird loaders – reusable soft glow shadow */ --shadow-bird-soft: drop-shadow(var(--shadow-glow-soft)); /* More Shadows*/ --shadow-tab-outline-subtle-geometry: var(--shadow-outline-subtle-geometry); --shadow-float-low: var(--shadow-float-sm); --shadow-float-medium: var(--shadow-float-md); --shadow-float-high: var(--shadow-float-lg); --shadow-float-high-hover: var(--shadow-float-lg-hover); /* Tab outline (subtle) combo */ --shadow-tab-outline-subtle-combo: var(--shadow-outline-subtle-geometry) var(--teal-dark-glass-clear-18); /* Modal inner highlight combo */ --shadow-modal-inner-highlight-combo: inset 0 1px 0 0 var(--white-glass-strong-20); /* Unified ACTIVE surface */ --shadow-surface-active-combo: var(--shadow-glass-moderate); /* Unified SECONDARY surface */ --shadow-surface-secondary-combo: var(--shadow-glass-subtle); /* Unified HOVER surface : softer lift, subtle outline */ --shadow-surface-hover-combo: var(--shadow-glass-soft); /* Section tab highlight: inner highlight + outer subtle ring */ --shadow-section-tab-highlight-combo: inset 0 1px 0 var(--white-glass-light-20), var(--shadow-glass-subtle); /* Dark button (slate) active */ --shadow-surface-active-dark-combo: var(--shadow-glass-moderate); } /* ============================================================================ BILLING AUDIT EDIT MODAL Modal for editing billing audit entries with notes and validation. ========================================================================== */ .billing-audit-edit-modal__notes-wrap { position: relative; } .billing-audit-edit-modal__notes-hint { margin-top: var(--space-4px); } /* ============================================================================ CHAT APP SHELL Main layout container for the chat application. ========================================================================== */ .chat-app-shell { display: flex; flex-direction: column; height: 100dvh; } .chat-app-shell__content { flex: 1; min-height: 0; } /* ============================================================================ MESSAGE COMPOSE MODAL Form layout for composing and sending messages/communications. ========================================================================== */ .msg-compose { display: flex; flex-direction: column; gap: var(--space-12px); } .msg-compose__form { display: flex; flex-direction: column; gap: var(--space-12px); } /* Status line: error / success / progress displayed above the form */ .msg-compose__status { display: flex; flex-direction: column; gap: var(--space-9px); } /* The form body itself — channel pills + field rows */ /* Phone input row: field + Add button side by side */ .msg-compose__phone-row { display: flex; align-items: flex-end; gap: var(--space-9px); } .msg-compose__phone-input { flex: 1; } .payments-workspace { display: flex; flex-direction: column; gap: var(--space-9px); width: var(--size-100pct); min-width: 0; min-height: 0; container-type: inline-size; } /* "Adjust your profile photo" editor: crop/zoom/rotate stage. * Rendered by PhotoEditorStage.tsx inside Panel's static-variant modal body. */ .photo-editor { display: flex; flex-direction: column; gap: var(--space-18px); width: var(--size-100pct); } .photo-editor__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-standard); background: var(--charcoal-900); touch-action: none; cursor: grab; } .photo-editor__stage:active { cursor: grabbing; } .photo-editor__stage-image { flex: 0 0 auto; max-width: none; transform-origin: center center; will-change: transform; user-select: none; pointer-events: none; } .photo-editor__stage-frame { position: absolute; inset: 0; pointer-events: none; } .photo-editor__grid-line { position: absolute; background: var(--white-glass-light-20); } .photo-editor__grid-line--v1 { top: 0; bottom: 0; left: 33.333%; width: 1px; } .photo-editor__grid-line--v2 { top: 0; bottom: 0; left: 66.666%; width: 1px; } .photo-editor__grid-line--h1 { left: 0; right: 0; top: 33.333%; height: 1px; } .photo-editor__grid-line--h2 { left: 0; right: 0; top: 66.666%; height: 1px; } .photo-editor__corner { position: absolute; width: var(--space-18px); height: var(--space-18px); border-color: var(--white-glass-full-95, #fff); border-style: solid; border-width: 0; } .photo-editor__corner--tl { top: var(--space-9px); left: var(--space-9px); border-top-width: 2px; border-left-width: 2px; } .photo-editor__corner--tr { top: var(--space-9px); right: var(--space-9px); border-top-width: 2px; border-right-width: 2px; } .photo-editor__corner--bl { bottom: var(--space-9px); left: var(--space-9px); border-bottom-width: 2px; border-left-width: 2px; } .photo-editor__corner--br { bottom: var(--space-9px); right: var(--space-9px); border-bottom-width: 2px; border-right-width: 2px; } .photo-editor__stage-reset { position: absolute; top: var(--space-9px); right: var(--space-9px); } .photo-editor__zoom-row, .photo-editor__rotate-row { display: flex; align-items: center; justify-content: center; gap: var(--space-9px); } .photo-editor__zoom-slider { flex: 1 1 auto; max-width: 240px; } .torch-holder { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 0; max-width: var(--size-100pct); } .torch-holder-role { position: relative; display: inline-flex; align-items: center; justify-content: center; border: var(--size-1px) solid var(--white-glass-thick-60); border-radius: var(--radius-standard); padding-top: var(--space-3px); padding-bottom: var(--space-1px); padding-inline: var(--space-1-5px); flex: 0 0 auto; } .torch-holder-role__label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; background: transparent; padding: 0; pointer-events: none; font-size: var(--font-size-10); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-family-primary); } .torch-holder-role__actions { position: relative; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .torch-holder { display: none; } }