/* Color tokens */ /* Using HSL/HSLA format only */ :root { /* lint-allow: no-long-comments — hue wheel reference Hue wheel: red(0) → orange(30) → yellow(45) → lime(90) → green(140) → teal(172) → cyan(195) → blue(215) → indigo(235) → purple(275) → magenta(325) → red(360=0) */ --lime-base: 90, 72%; --teal-base: 172, 70%; --cyan-base: 195, 85%; --purple-base: 275, 70%; --magenta-base: 325, 75%; /* User-restored legacy task status colors. Keep exact visual match. */ --task-status-legacy-yellow: hsl(44.25 96% 50.9804%); --task-status-legacy-blue: hsl(199.8621 94.7712% 70%); --task-status-legacy-green: hsl(120 90.1961% 40%); /* Red — hue 0 */ --red-base: 15, 75%; --red-05: hsl(var(--red-base), 5%); --red-10: hsl(var(--red-base), 10%); --red-15: hsl(var(--red-base), 15%); --red-20: hsl(var(--red-base), 20%); --red-25: hsl(var(--red-base), 25%); --red-30: hsl(var(--red-base), 30%); --red-35: hsl(var(--red-base), 35%); --red-40: hsl(var(--red-base), 40%); --red-45: hsl(var(--red-base), 45%); --red-50: hsl(var(--red-base), 50%); --red-55: hsl(var(--red-base), 55%); --red-60: hsl(var(--red-base), 60%); --red-65: hsl(var(--red-base), 65%); --red-70: hsl(var(--red-base), 70%); --red-75: hsl(var(--red-base), 75%); --red-80: hsl(var(--red-base), 80%); --red-85: hsl(var(--red-base), 85%); --red-90: hsl(var(--red-base), 90%); --red-95: hsl(var(--red-base), 95%); --red-100: hsl(var(--red-base), 98%); --red-transp-05: hsl(var(--red-base), 50%, 0.05); --red-transp-10: hsl(var(--red-base), 50%, 0.1); --red-transp-15: hsl(var(--red-base), 50%, 0.15); --red-transp-20: hsl(var(--red-base), 50%, 0.2); --red-transp-25: hsl(var(--red-base), 50%, 0.25); --red-transp-30: hsl(var(--red-base), 50%, 0.3); --red-transp-35: hsl(var(--red-base), 50%, 0.35); --red-transp-40: hsl(var(--red-base), 50%, 0.4); --red-transp-45: hsl(var(--red-base), 50%, 0.45); --red-transp-50: hsl(var(--red-base), 50%, 0.5); --red-transp-55: hsl(var(--red-base), 50%, 0.55); --red-transp-60: hsl(var(--red-base), 50%, 0.6); --red-transp-65: hsl(var(--red-base), 50%, 0.65); --red-transp-70: hsl(var(--red-base), 50%, 0.7); --red-transp-75: hsl(var(--red-base), 50%, 0.75); --red-transp-80: hsl(var(--red-base), 50%, 0.8); --red-transp-85: hsl(var(--red-base), 50%, 0.85); --red-transp-90: hsl(var(--red-base), 50%, 0.9); --red-transp-95: hsl(var(--red-base), 50%, 0.95); --red-transp-100: hsl(var(--red-base), 50%, 0.98); /* Orange — hue 40 */ --orange-base: 40, 100%; --orange-05: hsl(var(--orange-base), 5%); --orange-10: hsl(var(--orange-base), 10%); --orange-15: hsl(var(--orange-base), 15%); --orange-20: hsl(var(--orange-base), 20%); --orange-25: hsl(var(--orange-base), 25%); --orange-30: hsl(var(--orange-base), 30%); --orange-35: hsl(var(--orange-base), 35%); --orange-40: hsl(var(--orange-base), 40%); --orange-45: hsl(var(--orange-base), 45%); --orange-50: hsl(var(--orange-base), 50%); --orange-55: hsl(var(--orange-base), 55%); --orange-60: hsl(var(--orange-base), 60%); --orange-65: hsl(var(--orange-base), 65%); --orange-70: hsl(var(--orange-base), 70%); --orange-75: hsl(var(--orange-base), 75%); --orange-80: hsl(var(--orange-base), 80%); --orange-85: hsl(var(--orange-base), 85%); --orange-90: hsl(var(--orange-base), 90%); --orange-95: hsl(var(--orange-base), 95%); --orange-100: hsl(var(--orange-base), 98%); --orange-transp-05: hsl(var(--orange-base), 50%, 0.05); --orange-transp-10: hsl(var(--orange-base), 50%, 0.1); --orange-transp-15: hsl(var(--orange-base), 50%, 0.15); --orange-transp-20: hsl(var(--orange-base), 50%, 0.2); --orange-transp-25: hsl(var(--orange-base), 50%, 0.25); --orange-transp-30: hsl(var(--orange-base), 50%, 0.3); --orange-transp-35: hsl(var(--orange-base), 50%, 0.35); --orange-transp-40: hsl(var(--orange-base), 50%, 0.4); --orange-transp-45: hsl(var(--orange-base), 50%, 0.45); --orange-transp-50: hsl(var(--orange-base), 50%, 0.5); --orange-transp-55: hsl(var(--orange-base), 50%, 0.55); --orange-transp-60: hsl(var(--orange-base), 50%, 0.6); --orange-transp-65: hsl(var(--orange-base), 50%, 0.65); --orange-transp-70: hsl(var(--orange-base), 50%, 0.7); --orange-transp-75: hsl(var(--orange-base), 50%, 0.75); --orange-transp-80: hsl(var(--orange-base), 50%, 0.8); --orange-transp-85: hsl(var(--orange-base), 50%, 0.85); --orange-transp-90: hsl(var(--orange-base), 50%, 0.9); --orange-transp-95: hsl(var(--orange-base), 50%, 0.95); --orange-transp-100: hsl(var(--orange-base), 50%, 0.98); /* Yellow — hue 50 */ --yellow-base: 50, 100%; --yellow-05: hsl(var(--yellow-base), 5%); --yellow-10: hsl(var(--yellow-base), 10%); --yellow-15: hsl(var(--yellow-base), 15%); --yellow-20: hsl(var(--yellow-base), 20%); --yellow-25: hsl(var(--yellow-base), 25%); --yellow-30: hsl(var(--yellow-base), 30%); --yellow-35: hsl(var(--yellow-base), 35%); --yellow-40: hsl(var(--yellow-base), 40%); --yellow-45: hsl(var(--yellow-base), 45%); --yellow-50: hsl(var(--yellow-base), 50%); --yellow-55: hsl(var(--yellow-base), 55%); --yellow-60: hsl(var(--yellow-base), 60%); --yellow-65: hsl(var(--yellow-base), 65%); --yellow-70: hsl(var(--yellow-base), 70%); --yellow-75: hsl(var(--yellow-base), 75%); --yellow-80: hsl(var(--yellow-base), 80%); --yellow-85: hsl(var(--yellow-base), 85%); --yellow-90: hsl(var(--yellow-base), 90%); --yellow-95: hsl(var(--yellow-base), 95%); --yellow-100: hsl(var(--yellow-base), 98%); --yellow-transp-05: hsl(var(--yellow-base), 50%, 0.05); --yellow-transp-10: hsl(var(--yellow-base), 50%, 0.1); --yellow-transp-15: hsl(var(--yellow-base), 50%, 0.15); --yellow-transp-20: hsl(var(--yellow-base), 50%, 0.2); --yellow-transp-25: hsl(var(--yellow-base), 50%, 0.25); --yellow-transp-30: hsl(var(--yellow-base), 50%, 0.3); --yellow-transp-35: hsl(var(--yellow-base), 50%, 0.35); --yellow-transp-40: hsl(var(--yellow-base), 50%, 0.4); --yellow-transp-45: hsl(var(--yellow-base), 50%, 0.45); --yellow-transp-50: hsl(var(--yellow-base), 50%, 0.5); --yellow-transp-55: hsl(var(--yellow-base), 50%, 0.55); --yellow-transp-60: hsl(var(--yellow-base), 50%, 0.6); --yellow-transp-65: hsl(var(--yellow-base), 50%, 0.65); --yellow-transp-70: hsl(var(--yellow-base), 50%, 0.7); --yellow-transp-75: hsl(var(--yellow-base), 50%, 0.75); --yellow-transp-80: hsl(var(--yellow-base), 50%, 0.8); --yellow-transp-85: hsl(var(--yellow-base), 50%, 0.85); --yellow-transp-90: hsl(var(--yellow-base), 50%, 0.9); --yellow-transp-95: hsl(var(--yellow-base), 50%, 0.95); --yellow-transp-100: hsl(var(--yellow-base), 50%, 0.98); /* Lime — hue 90 */ --lime-05: hsl(var(--lime-base), 5%); --lime-10: hsl(var(--lime-base), 10%); --lime-15: hsl(var(--lime-base), 15%); --lime-20: hsl(var(--lime-base), 20%); --lime-25: hsl(var(--lime-base), 25%); --lime-30: hsl(var(--lime-base), 30%); --lime-35: hsl(var(--lime-base), 35%); --lime-40: hsl(var(--lime-base), 40%); --lime-45: hsl(var(--lime-base), 45%); --lime-50: hsl(var(--lime-base), 50%); --lime-55: hsl(var(--lime-base), 55%); --lime-60: hsl(var(--lime-base), 60%); --lime-65: hsl(var(--lime-base), 65%); --lime-70: hsl(var(--lime-base), 70%); --lime-75: hsl(var(--lime-base), 75%); --lime-80: hsl(var(--lime-base), 80%); --lime-85: hsl(var(--lime-base), 85%); --lime-90: hsl(var(--lime-base), 90%); --lime-95: hsl(var(--lime-base), 95%); --lime-100: hsl(var(--lime-base), 98%); --lime-transp-05: hsl(var(--lime-base), 50%, 0.05); --lime-transp-10: hsl(var(--lime-base), 50%, 0.1); --lime-transp-15: hsl(var(--lime-base), 50%, 0.15); --lime-transp-20: hsl(var(--lime-base), 50%, 0.2); --lime-transp-25: hsl(var(--lime-base), 50%, 0.25); --lime-transp-30: hsl(var(--lime-base), 50%, 0.3); --lime-transp-35: hsl(var(--lime-base), 50%, 0.35); --lime-transp-40: hsl(var(--lime-base), 50%, 0.4); --lime-transp-45: hsl(var(--lime-base), 50%, 0.45); --lime-transp-50: hsl(var(--lime-base), 50%, 0.5); --lime-transp-55: hsl(var(--lime-base), 50%, 0.55); --lime-transp-60: hsl(var(--lime-base), 50%, 0.6); --lime-transp-65: hsl(var(--lime-base), 50%, 0.65); --lime-transp-70: hsl(var(--lime-base), 50%, 0.7); --lime-transp-75: hsl(var(--lime-base), 50%, 0.75); --lime-transp-80: hsl(var(--lime-base), 50%, 0.8); --lime-transp-85: hsl(var(--lime-base), 50%, 0.85); --lime-transp-90: hsl(var(--lime-base), 50%, 0.9); --lime-transp-95: hsl(var(--lime-base), 50%, 0.95); --lime-transp-100: hsl(var(--lime-base), 50%, 0.98); /* Green — hue 140 */ --green-base: 140, 70%; --green-base-pale: 140, 50%; --green-05: hsl(var(--green-base), 5%); --green-10: hsl(var(--green-base), 10%); --green-15: hsl(var(--green-base), 15%); --green-20: hsl(var(--green-base), 20%); --green-25: hsl(var(--green-base), 25%); --green-30: hsl(var(--green-base), 30%); --green-35: hsl(var(--green-base), 35%); --green-40: hsl(var(--green-base), 40%); --green-45: hsl(var(--green-base), 45%); --green-50: hsl(var(--green-base-pale), 50%); --green-55: hsl(var(--green-base-pale), 55%); --green-60: hsl(var(--green-base-pale), 60%); --green-65: hsl(var(--green-base-pale), 65%); --green-70: hsl(var(--green-base-pale), 70%); --green-75: hsl(var(--green-base-pale), 75%); --green-80: hsl(var(--green-base-pale), 80%); --green-85: hsl(var(--green-base-pale), 85%); --green-90: hsl(var(--green-base-pale), 90%); --green-95: hsl(var(--green-base-pale), 95%); --green-100: hsl(var(--green-base-pale), 98%); --green-transp-05: hsl(var(--green-base), 50%, 0.05); --green-transp-10: hsl(var(--green-base), 50%, 0.1); --green-transp-15: hsl(var(--green-base), 50%, 0.15); --green-transp-20: hsl(var(--green-base), 50%, 0.2); --green-transp-25: hsl(var(--green-base), 50%, 0.25); --green-transp-30: hsl(var(--green-base), 50%, 0.3); --green-transp-35: hsl(var(--green-base), 50%, 0.35); --green-transp-40: hsl(var(--green-base), 50%, 0.4); --green-transp-45: hsl(var(--green-base), 50%, 0.45); --green-transp-50: hsl(var(--green-base), 50%, 0.5); --green-transp-55: hsl(var(--green-base), 50%, 0.55); --green-transp-60: hsl(var(--green-base), 50%, 0.6); --green-transp-65: hsl(var(--green-base), 50%, 0.65); --green-transp-70: hsl(var(--green-base), 50%, 0.7); --green-transp-75: hsl(var(--green-base), 50%, 0.75); --green-transp-80: hsl(var(--green-base), 50%, 0.8); --green-transp-85: hsl(var(--green-base), 50%, 0.85); --green-transp-90: hsl(var(--green-base), 50%, 0.9); --green-transp-95: hsl(var(--green-base), 50%, 0.95); --green-transp-100: hsl(var(--green-base), 50%, 0.98); /* Teal — hue 172 */ --teal-05: hsl(var(--teal-base), 5%); --teal-10: hsl(var(--teal-base), 10%); --teal-15: hsl(var(--teal-base), 15%); --teal-20: hsl(var(--teal-base), 20%); --teal-25: hsl(var(--teal-base), 25%); --teal-30: hsl(var(--teal-base), 30%); --teal-35: hsl(var(--teal-base), 35%); --teal-40: hsl(var(--teal-base), 40%); --teal-45: hsl(var(--teal-base), 45%); --teal-50: hsl(var(--teal-base), 50%); --teal-55: hsl(var(--teal-base), 55%); --teal-60: hsl(var(--teal-base), 60%); --teal-65: hsl(var(--teal-base), 65%); --teal-70: hsl(var(--teal-base), 70%); --teal-75: hsl(var(--teal-base), 75%); --teal-80: hsl(var(--teal-base), 80%); --teal-85: hsl(var(--teal-base), 85%); --teal-90: hsl(var(--teal-base), 90%); --teal-95: hsl(var(--teal-base), 95%); --teal-100: hsl(var(--teal-base), 98%); --teal-transp-05: hsl(var(--teal-base), 50%, 0.05); --teal-transp-10: hsl(var(--teal-base), 50%, 0.1); --teal-transp-15: hsl(var(--teal-base), 50%, 0.15); --teal-transp-20: hsl(var(--teal-base), 50%, 0.2); --teal-transp-25: hsl(var(--teal-base), 50%, 0.25); --teal-transp-30: hsl(var(--teal-base), 50%, 0.3); --teal-transp-35: hsl(var(--teal-base), 50%, 0.35); --teal-transp-40: hsl(var(--teal-base), 50%, 0.4); --teal-transp-45: hsl(var(--teal-base), 50%, 0.45); --teal-transp-50: hsl(var(--teal-base), 50%, 0.5); --teal-transp-55: hsl(var(--teal-base), 50%, 0.55); --teal-transp-60: hsl(var(--teal-base), 50%, 0.6); --teal-transp-65: hsl(var(--teal-base), 50%, 0.65); --teal-transp-70: hsl(var(--teal-base), 50%, 0.7); --teal-transp-75: hsl(var(--teal-base), 50%, 0.75); --teal-transp-80: hsl(var(--teal-base), 50%, 0.8); --teal-transp-85: hsl(var(--teal-base), 50%, 0.85); --teal-transp-90: hsl(var(--teal-base), 50%, 0.9); --teal-transp-95: hsl(var(--teal-base), 50%, 0.95); --teal-transp-100: hsl(var(--teal-base), 50%, 0.98); /* Cyan — hue 195 */ --cyan-05: hsl(var(--cyan-base), 5%); --cyan-10: hsl(var(--cyan-base), 10%); --cyan-15: hsl(var(--cyan-base), 15%); --cyan-20: hsl(var(--cyan-base), 20%); --cyan-25: hsl(var(--cyan-base), 25%); --cyan-30: hsl(var(--cyan-base), 30%); --cyan-35: hsl(var(--cyan-base), 35%); --cyan-40: hsl(var(--cyan-base), 40%); --cyan-45: hsl(var(--cyan-base), 45%); --cyan-50: hsl(var(--cyan-base), 50%); --cyan-55: hsl(var(--cyan-base), 55%); --cyan-60: hsl(var(--cyan-base), 60%); --cyan-65: hsl(var(--cyan-base), 65%); --cyan-70: hsl(var(--cyan-base), 70%); --cyan-75: hsl(var(--cyan-base), 75%); --cyan-80: hsl(var(--cyan-base), 80%); --cyan-85: hsl(var(--cyan-base), 85%); --cyan-90: hsl(var(--cyan-base), 90%); --cyan-95: hsl(var(--cyan-base), 95%); --cyan-100: hsl(var(--cyan-base), 98%); --cyan-transp-05: hsl(var(--cyan-base), 50%, 0.05); --cyan-transp-10: hsl(var(--cyan-base), 50%, 0.1); --cyan-transp-15: hsl(var(--cyan-base), 50%, 0.15); --cyan-transp-20: hsl(var(--cyan-base), 50%, 0.2); --cyan-transp-25: hsl(var(--cyan-base), 50%, 0.25); --cyan-transp-30: hsl(var(--cyan-base), 50%, 0.3); --cyan-transp-35: hsl(var(--cyan-base), 50%, 0.35); --cyan-transp-40: hsl(var(--cyan-base), 50%, 0.4); --cyan-transp-45: hsl(var(--cyan-base), 50%, 0.45); --cyan-transp-50: hsl(var(--cyan-base), 50%, 0.5); --cyan-transp-55: hsl(var(--cyan-base), 50%, 0.55); --cyan-transp-60: hsl(var(--cyan-base), 50%, 0.6); --cyan-transp-65: hsl(var(--cyan-base), 50%, 0.65); --cyan-transp-70: hsl(var(--cyan-base), 50%, 0.7); --cyan-transp-75: hsl(var(--cyan-base), 50%, 0.75); --cyan-transp-80: hsl(var(--cyan-base), 50%, 0.8); --cyan-transp-85: hsl(var(--cyan-base), 50%, 0.85); --cyan-transp-90: hsl(var(--cyan-base), 50%, 0.9); --cyan-transp-95: hsl(var(--cyan-base), 50%, 0.95); --cyan-transp-100: hsl(var(--cyan-base), 50%, 0.98); /* Blue — hue 215 */ --blue-base: 215, 100%; --blue-deep-base: 235, 85%; --blue-05: hsl(var(--blue-base), 5%); --blue-10: hsl(var(--blue-base), 10%); --blue-15: hsl(var(--blue-base), 15%); --blue-20: hsl(var(--blue-base), 20%); --blue-25: hsl(var(--blue-base), 25%); --blue-30: hsl(var(--blue-base), 30%); --blue-35: hsl(var(--blue-base), 35%); --blue-40: hsl(var(--blue-base), 40%); --blue-45: hsl(var(--blue-base), 45%); --blue-50: hsl(var(--blue-base), 50%); --blue-55: hsl(var(--blue-base), 55%); --blue-60: hsl(var(--blue-base), 60%); --blue-65: hsl(var(--blue-base), 65%); --blue-70: hsl(var(--blue-base), 70%); --blue-75: hsl(var(--blue-base), 75%); --blue-80: hsl(var(--blue-base), 80%); --blue-85: hsl(var(--blue-base), 85%); --blue-90: hsl(var(--blue-base), 90%); --blue-95: hsl(var(--blue-base), 95%); --blue-100: hsl(var(--blue-base), 98%); --blue-transp-05: hsl(var(--blue-base), 50%, 0.05); --blue-transp-10: hsl(var(--blue-base), 50%, 0.1); --blue-transp-15: hsl(var(--blue-base), 50%, 0.15); --blue-transp-20: hsl(var(--blue-base), 50%, 0.2); --blue-transp-25: hsl(var(--blue-base), 50%, 0.25); --blue-transp-30: hsl(var(--blue-base), 50%, 0.3); --blue-transp-35: hsl(var(--blue-base), 50%, 0.35); --blue-transp-40: hsl(var(--blue-base), 50%, 0.4); --blue-transp-45: hsl(var(--blue-base), 50%, 0.45); --blue-transp-50: hsl(var(--blue-base), 50%, 0.5); --blue-transp-55: hsl(var(--blue-base), 50%, 0.55); --blue-transp-60: hsl(var(--blue-base), 50%, 0.6); --blue-transp-65: hsl(var(--blue-base), 50%, 0.65); --blue-transp-70: hsl(var(--blue-base), 50%, 0.7); --blue-transp-75: hsl(var(--blue-base), 50%, 0.75); --blue-transp-80: hsl(var(--blue-base), 50%, 0.8); --blue-transp-85: hsl(var(--blue-base), 50%, 0.85); --blue-transp-90: hsl(var(--blue-base), 50%, 0.9); --blue-transp-95: hsl(var(--blue-base), 50%, 0.95); --blue-transp-100: hsl(var(--blue-base), 50%, 0.98); /* Blue Deep (Indigo) — hue 235 */ --blue-deep-05: hsl(var(--blue-deep-base), 5%); --blue-deep-10: hsl(var(--blue-deep-base), 10%); --blue-deep-15: hsl(var(--blue-deep-base), 15%); --blue-deep-20: hsl(var(--blue-deep-base), 20%); --blue-deep-25: hsl(var(--blue-deep-base), 25%); --blue-deep-30: hsl(var(--blue-deep-base), 30%); --blue-deep-35: hsl(var(--blue-deep-base), 35%); --blue-deep-40: hsl(var(--blue-deep-base), 40%); --blue-deep-45: hsl(var(--blue-deep-base), 45%); --blue-deep-50: hsl(var(--blue-deep-base), 50%); --blue-deep-55: hsl(var(--blue-deep-base), 55%); --blue-deep-60: hsl(var(--blue-deep-base), 60%); --blue-deep-65: hsl(var(--blue-deep-base), 65%); --blue-deep-70: hsl(var(--blue-deep-base), 70%); --blue-deep-75: hsl(var(--blue-deep-base), 75%); --blue-deep-80: hsl(var(--blue-deep-base), 80%); --blue-deep-85: hsl(var(--blue-deep-base), 85%); --blue-deep-90: hsl(var(--blue-deep-base), 90%); --blue-deep-95: hsl(var(--blue-deep-base), 95%); --blue-deep-100: hsl(var(--blue-deep-base), 98%); --blue-deep-transp-05: hsl(var(--blue-deep-base), 50%, 0.05); --blue-deep-transp-10: hsl(var(--blue-deep-base), 50%, 0.1); --blue-deep-transp-15: hsl(var(--blue-deep-base), 50%, 0.15); --blue-deep-transp-20: hsl(var(--blue-deep-base), 50%, 0.2); --blue-deep-transp-25: hsl(var(--blue-deep-base), 50%, 0.25); --blue-deep-transp-30: hsl(var(--blue-deep-base), 50%, 0.3); --blue-deep-transp-35: hsl(var(--blue-deep-base), 50%, 0.35); --blue-deep-transp-40: hsl(var(--blue-deep-base), 50%, 0.4); --blue-deep-transp-45: hsl(var(--blue-deep-base), 50%, 0.45); --blue-deep-transp-50: hsl(var(--blue-deep-base), 50%, 0.5); --blue-deep-transp-55: hsl(var(--blue-deep-base), 50%, 0.55); --blue-deep-transp-60: hsl(var(--blue-deep-base), 50%, 0.6); --blue-deep-transp-65: hsl(var(--blue-deep-base), 50%, 0.65); --blue-deep-transp-70: hsl(var(--blue-deep-base), 50%, 0.7); --blue-deep-transp-75: hsl(var(--blue-deep-base), 50%, 0.75); --blue-deep-transp-80: hsl(var(--blue-deep-base), 50%, 0.8); --blue-deep-transp-85: hsl(var(--blue-deep-base), 50%, 0.85); --blue-deep-transp-90: hsl(var(--blue-deep-base), 50%, 0.9); --blue-deep-transp-95: hsl(var(--blue-deep-base), 50%, 0.95); --blue-deep-transp-100: hsl(var(--blue-deep-base), 50%, 0.98); /* Purple — hue 275 */ --purple-05: hsl(var(--purple-base), 5%); --purple-10: hsl(var(--purple-base), 10%); --purple-15: hsl(var(--purple-base), 15%); --purple-20: hsl(var(--purple-base), 20%); --purple-25: hsl(var(--purple-base), 25%); --purple-30: hsl(var(--purple-base), 30%); --purple-35: hsl(var(--purple-base), 35%); --purple-40: hsl(var(--purple-base), 40%); --purple-45: hsl(var(--purple-base), 45%); --purple-50: hsl(var(--purple-base), 50%); --purple-55: hsl(var(--purple-base), 55%); --purple-60: hsl(var(--purple-base), 60%); --purple-65: hsl(var(--purple-base), 65%); --purple-70: hsl(var(--purple-base), 70%); --purple-75: hsl(var(--purple-base), 75%); --purple-80: hsl(var(--purple-base), 80%); --purple-85: hsl(var(--purple-base), 85%); --purple-90: hsl(var(--purple-base), 90%); --purple-95: hsl(var(--purple-base), 95%); --purple-100: hsl(var(--purple-base), 98%); --purple-transp-05: hsl(var(--purple-base), 50%, 0.05); --purple-transp-10: hsl(var(--purple-base), 50%, 0.1); --purple-transp-15: hsl(var(--purple-base), 50%, 0.15); --purple-transp-20: hsl(var(--purple-base), 50%, 0.2); --purple-transp-25: hsl(var(--purple-base), 50%, 0.25); --purple-transp-30: hsl(var(--purple-base), 50%, 0.3); --purple-transp-35: hsl(var(--purple-base), 50%, 0.35); --purple-transp-40: hsl(var(--purple-base), 50%, 0.4); --purple-transp-45: hsl(var(--purple-base), 50%, 0.45); --purple-transp-50: hsl(var(--purple-base), 50%, 0.5); --purple-transp-55: hsl(var(--purple-base), 50%, 0.55); --purple-transp-60: hsl(var(--purple-base), 50%, 0.6); --purple-transp-65: hsl(var(--purple-base), 50%, 0.65); --purple-transp-70: hsl(var(--purple-base), 50%, 0.7); --purple-transp-75: hsl(var(--purple-base), 50%, 0.75); --purple-transp-80: hsl(var(--purple-base), 50%, 0.8); --purple-transp-85: hsl(var(--purple-base), 50%, 0.85); --purple-transp-90: hsl(var(--purple-base), 50%, 0.9); --purple-transp-95: hsl(var(--purple-base), 50%, 0.95); --purple-transp-100: hsl(var(--purple-base), 50%, 0.98); /* Magenta — hue 325 */ --magenta-05: hsl(var(--magenta-base), 5%); --magenta-10: hsl(var(--magenta-base), 10%); --magenta-15: hsl(var(--magenta-base), 15%); --magenta-20: hsl(var(--magenta-base), 20%); --magenta-25: hsl(var(--magenta-base), 25%); --magenta-30: hsl(var(--magenta-base), 30%); --magenta-35: hsl(var(--magenta-base), 35%); --magenta-40: hsl(var(--magenta-base), 40%); --magenta-45: hsl(var(--magenta-base), 45%); --magenta-50: hsl(var(--magenta-base), 50%); --magenta-55: hsl(var(--magenta-base), 55%); --magenta-60: hsl(var(--magenta-base), 60%); --magenta-65: hsl(var(--magenta-base), 65%); --magenta-70: hsl(var(--magenta-base), 70%); --magenta-75: hsl(var(--magenta-base), 75%); --magenta-80: hsl(var(--magenta-base), 80%); --magenta-85: hsl(var(--magenta-base), 85%); --magenta-90: hsl(var(--magenta-base), 90%); --magenta-95: hsl(var(--magenta-base), 95%); --magenta-100: hsl(var(--magenta-base), 98%); --magenta-transp-05: hsl(var(--magenta-base), 50%, 0.05); --magenta-transp-10: hsl(var(--magenta-base), 50%, 0.1); --magenta-transp-15: hsl(var(--magenta-base), 50%, 0.15); --magenta-transp-20: hsl(var(--magenta-base), 50%, 0.2); --magenta-transp-25: hsl(var(--magenta-base), 50%, 0.25); --magenta-transp-30: hsl(var(--magenta-base), 50%, 0.3); --magenta-transp-35: hsl(var(--magenta-base), 50%, 0.35); --magenta-transp-40: hsl(var(--magenta-base), 50%, 0.4); --magenta-transp-45: hsl(var(--magenta-base), 50%, 0.45); --magenta-transp-50: hsl(var(--magenta-base), 50%, 0.5); --magenta-transp-55: hsl(var(--magenta-base), 50%, 0.55); --magenta-transp-60: hsl(var(--magenta-base), 50%, 0.6); --magenta-transp-65: hsl(var(--magenta-base), 50%, 0.65); --magenta-transp-70: hsl(var(--magenta-base), 50%, 0.7); --magenta-transp-75: hsl(var(--magenta-base), 50%, 0.75); --magenta-transp-80: hsl(var(--magenta-base), 50%, 0.8); --magenta-transp-85: hsl(var(--magenta-base), 50%, 0.85); --magenta-transp-90: hsl(var(--magenta-base), 50%, 0.9); --magenta-transp-95: hsl(var(--magenta-base), 50%, 0.95); --magenta-transp-100: hsl(var(--magenta-base), 50%, 0.98); } /* Gray transparent scale */ :root { /* Black */ --black: hsl(0, 0%, 0%); --black-transp-03: hsl(0, 0%, 0%, 0.03); --black-transp-05: hsl(0, 0%, 0%, 0.05); --black-transp-06: hsl(0, 0%, 0%, 0.06); --black-transp-08: hsl(0, 0%, 0%, 0.08); --black-transp-10: hsl(0, 0%, 0%, 0.1); --black-transp-20: hsl(0, 0%, 0%, 0.2); --black-transp-30: hsl(0, 0%, 0%, 0.3); --black-transp-40: hsl(0, 0%, 0%, 0.4); --black-transp-50: hsl(0, 0%, 0%, 0.5); --black-transp-60: hsl(0, 0%, 0%, 0.6); --black-transp-70: hsl(0, 0%, 0%, 0.7); --black-transp-80: hsl(0, 0%, 0%, 0.8); --black-transp-90: hsl(0, 0%, 0%, 0.9); /* White */ --white: hsl(0, 0%, 100%); --white-transp-10: hsl(0, 0%, 100%, 0.1); --white-transp-20: hsl(0, 0%, 100%, 0.2); --white-transp-30: hsl(0, 0%, 100%, 0.3); --white-transp-40: hsl(0, 0%, 100%, 0.4); --white-transp-50: hsl(0, 0%, 100%, 0.5); --white-transp-60: hsl(0, 0%, 100%, 0.6); --white-transp-70: hsl(0, 0%, 100%, 0.7); --white-transp-80: hsl(0, 0%, 100%, 0.8); --white-transp-90: hsl(0, 0%, 100%, 0.9); --grayBase: 215, 5%; /* Gray solid */ --gray-02: hsl(var(--grayBase), 2%); --gray-04: hsl(var(--grayBase), 4%); --gray-06: hsl(var(--grayBase), 6%); --gray-08: hsl(var(--grayBase), 8%); --gray-10: hsl(var(--grayBase), 10%); --gray-12: hsl(var(--grayBase), 12%); --gray-14: hsl(var(--grayBase), 14%); --gray-15: hsl(var(--grayBase), 15%); --gray-16: hsl(var(--grayBase), 16%); --gray-18: hsl(var(--grayBase), 18%); --gray-20: hsl(var(--grayBase), 20%); --gray-22: hsl(var(--grayBase), 22%); --gray-24: hsl(var(--grayBase), 24%); --gray-25: hsl(var(--grayBase), 25%); --gray-26: hsl(var(--grayBase), 26%); --gray-28: hsl(var(--grayBase), 28%); --gray-30: hsl(var(--grayBase), 30%); --gray-35: hsl(var(--grayBase), 35%); --gray-40: hsl(var(--grayBase), 40%); --gray-45: hsl(var(--grayBase), 45%); --gray-50: hsl(var(--grayBase), 50%); --gray-55: hsl(var(--grayBase), 55%); --gray-60: hsl(var(--grayBase), 60%); --gray-65: hsl(var(--grayBase), 65%); --gray-70: hsl(var(--grayBase), 70%); --gray-72: hsl(var(--grayBase), 72%); --gray-74: hsl(var(--grayBase), 74%); --gray-75: hsl(var(--grayBase), 75%); --gray-76: hsl(var(--grayBase), 76%); --gray-78: hsl(var(--grayBase), 78%); --gray-80: hsl(var(--grayBase), 80%); --gray-82: hsl(var(--grayBase), 82%); --gray-84: hsl(var(--grayBase), 84%); --gray-85: hsl(var(--grayBase), 85%); --gray-86: hsl(var(--grayBase), 86%); --gray-88: hsl(var(--grayBase), 88%); --gray-90: hsl(var(--grayBase), 90%); --gray-92: hsl(var(--grayBase), 92%); --gray-94: hsl(var(--grayBase), 94%); --gray-96: hsl(var(--grayBase), 96%); --gray-98: hsl(var(--grayBase), 98%); --gray-100: hsl(var(--grayBase), 100%); /* Gray Transparent */ --gray-transp-02: hsl(var(--grayBase), 50%, 0.02); --gray-transp-04: hsl(var(--grayBase), 50%, 0.04); --gray-transp-06: hsl(var(--grayBase), 50%, 0.06); --gray-transp-08: hsl(var(--grayBase), 50%, 0.08); --gray-transp-10: hsl(var(--grayBase), 50%, 0.1); --gray-transp-12: hsl(var(--grayBase), 50%, 0.12); --gray-transp-14: hsl(var(--grayBase), 50%, 0.14); --gray-transp-15: hsl(var(--grayBase), 50%, 0.15); --gray-transp-16: hsl(var(--grayBase), 50%, 0.16); --gray-transp-18: hsl(var(--grayBase), 50%, 0.18); --gray-transp-20: hsl(var(--grayBase), 50%, 0.2); --gray-transp-22: hsl(var(--grayBase), 50%, 0.22); --gray-transp-24: hsl(var(--grayBase), 50%, 0.24); --gray-transp-26: hsl(var(--grayBase), 50%, 0.26); --gray-transp-28: hsl(var(--grayBase), 50%, 0.28); --gray-transp-30: hsl(var(--grayBase), 50%, 0.3); --gray-transp-35: hsl(var(--grayBase), 50%, 0.35); --gray-transp-36: hsl(var(--grayBase), 50%, 0.36); --gray-transp-40: hsl(var(--grayBase), 50%, 0.4); --gray-transp-45: hsl(var(--grayBase), 50%, 0.45); --gray-transp-50: hsl(var(--grayBase), 50%, 0.5); --gray-transp-55: hsl(var(--grayBase), 50%, 0.55); --gray-transp-60: hsl(var(--grayBase), 50%, 0.6); --gray-transp-65: hsl(var(--grayBase), 50%, 0.65); --gray-transp-70: hsl(var(--grayBase), 50%, 0.7); --gray-transp-72: hsl(var(--grayBase), 50%, 0.72); --gray-transp-74: hsl(var(--grayBase), 50%, 0.74); --gray-transp-76: hsl(var(--grayBase), 50%, 0.76); --gray-transp-78: hsl(var(--grayBase), 50%, 0.78); --gray-transp-80: hsl(var(--grayBase), 50%, 0.8); --gray-transp-82: hsl(var(--grayBase), 50%, 0.82); --gray-transp-84: hsl(var(--grayBase), 50%, 0.84); --gray-transp-86: hsl(var(--grayBase), 50%, 0.86); --gray-transp-88: hsl(var(--grayBase), 50%, 0.88); --gray-transp-90: hsl(var(--grayBase), 50%, 0.9); --gray-transp-92: hsl(var(--grayBase), 50%, 0.92); --gray-transp-94: hsl(var(--grayBase), 50%, 0.94); --gray-transp-96: hsl(var(--grayBase), 50%, 0.96); --gray-transp-98: hsl(var(--grayBase), 50%, 0.98); --gray-transp-100: hsl(var(--grayBase), 50%, 1); } :root { --px-1: 0.0625rem; --px-2: 0.125rem; --px-3: 0.1875rem; --px-4: 0.25rem; --px-5: 0.3125rem; --px-6: 0.375rem; --px-7: 0.4375rem; --px-8: 0.5rem; --px-9: 0.5625rem; --px-10: 0.625rem; --px-11: 0.6875rem; --px-12: 0.75rem; --px-13: 0.8125rem; --px-14: 0.875rem; --px-15: 0.9375rem; --px-16: 1rem; --px-17: 1.0625rem; --px-18: 1.125rem; --px-19: 1.1875rem; --px-20: 1.25rem; --px-21: 1.3125rem; --px-22: 1.375rem; --px-24: 1.5rem; --px-26: 1.625rem; --px-28: 1.75rem; --px-30: 1.875rem; --px-32: 2rem; --px-34: 2.125rem; --px-36: 2.25rem; --px-38: 2.375rem; --px-40: 2.5rem; --px-42: 2.625rem; --px-44: 2.75rem; --px-46: 2.875rem; --px-48: 3rem; --px-50: 3.125rem; --px-52: 3.25rem; --px-54: 3.375rem; --px-56: 3.5rem; --px-58: 3.625rem; --px-60: 3.75rem; --px-62: 3.875rem; --px-64: 4rem; --px-66: 4.125rem; --px-68: 4.25rem; --px-70: 4.375rem; --px-72: 4.5rem; --px-74: 4.625rem; --px-76: 4.75rem; --px-78: 4.875rem; --px-80: 5rem; --px-82: 5.125rem; --px-84: 5.25rem; --px-86: 5.375rem; --px-88: 5.5rem; --px-90: 5.625rem; --px-92: 5.75rem; --px-94: 5.875rem; --px-96: 6rem; --px-98: 6.125rem; --px-100: 6.25rem; --px-120: 7.5rem; --px-140: 8.75rem; --px-160: 10rem; --px-180: 11.25rem; --px-200: 12.5rem; --px-220: 13.75rem; --px-240: 15rem; --px-260: 16.25rem; --px-280: 17.5rem; --px-300: 18.75rem; --px-320: 20rem; --px-350: 21.875rem; --px-400: 25rem; --px-450: 28.125rem; --px-500: 31.25rem; --px-550: 34.375rem; --px-600: 37.5rem; --px-640: 40rem; --px-650: 40.625rem; --px-700: 43.75rem; --px-750: 46.875rem; --px-800: 50rem; --px-850: 53.125rem; --px-900: 56.25rem; --px-n1: -0.0625rem; --px-n2: -0.125rem; --px-n3: -0.1875rem; --px-n4: -0.25rem; --px-n6: -0.375rem; --px-n8: -0.5rem; --px-n12: -0.75rem; --px-n16: -1rem; } :root { /* COLOR INTENTS */ /* PAGE */ --page-bg--hsl: 15 5% 97%; --page-bg--color: hsl(var(--page-bg--hsl)); --bg-frost--alpha: 0.72; --bg-frost--color: hsl(var(--page-bg--hsl) / var(--bg-frost--alpha)); /* PRIMARY */ --bg-primary--color: var(--blue-50); --bg-primary--color-hover: var(--blue-55); --bg-primary--color-active: var(--blue-60); --font-primary--color: var(--blue-50); --font-primary--color-hover: var(--blue-55); --font-primary--on: var(--white); --bg-primary-soft--color: var(--blue-transp-10); --bg-primary-soft--color-hover: var(--blue-transp-15); --bg-primary-soft--color-active: var(--blue-transp-20); /* SUCCESS */ --bg-success--color: var(--green-40); --bg-success--color-hover: var(--green-45); --bg-success--color-active: var(--green-55); --font-success--color: var(--green-35); --font-success--color-hover: var(--green-45); --font-success-soft--color-hover: var(--green-30); --font-success-soft--color-active: var(--green-25); --font-success--on: var(--white); --bg-success-soft--color: var(--green-transp-15); --bg-success-soft--color-hover: var(--green-transp-20); --bg-success-soft--color-active: var(--green-transp-25); /* DANGER */ --bg-danger--color: var(--red-50); --bg-danger--color-hover: var(--red-55); --bg-danger--color-active: var(--red-60); --font-danger--color: var(--red-50); --font-danger--color-hover: var(--red-55); --font-danger--on: var(--white); --font-on-danger--color: var(--white); --font-on-danger-invert--color: var(--black); --font-on-danger-muted--color: var(--white-transp-80); --font-on-danger-subtle--color: var(--white-transp-60); --bg-on-danger--color: var(--white); --bg-on-danger--color-hover: var(--white-transp-90); --bg-on-danger--color-active: var(--white-transp-80); --border-on-danger--color: var(--white-transp-50); --border-on-danger--color-hover: var(--white-transp-70); --border-on-danger--color-active: var(--white-transp-90); --border-on-danger-disabled--color: var(--white-transp-30); --bg-on-danger-soft--color-hover: var(--white-transp-10); --bg-on-danger-soft--color-active: var(--white-transp-20); --bg-danger-soft--color: var(--red-transp-10); --bg-danger-soft--color-hover: var(--red-transp-15); --bg-danger-soft--color-active: var(--red-transp-20); /* WARNING */ --bg-warning--color: var(--orange-45); --bg-warning--color-hover: var(--orange-55); --bg-warning--color-active: var(--orange-60); --font-warning--color: var(--orange-45); --font-warning--color-hover: var(--orange-60); --font-warning-soft--color-hover: var(--orange-35); --font-warning-soft--color-active: var(--orange-30); --font-warning--on: var(--white); --bg-warning-soft--color: var(--orange-transp-15); --bg-warning-soft--color-hover: var(--orange-transp-20); --bg-warning-soft--color-active: var(--orange-transp-25); /* INVERT */ --bg-invert--color: var(--gray-04); --bg-invert--color-hover: var(--gray-12); --bg-invert--color-active: var(--gray-18); --border-invert--color: var(--gray-10); --font-invert--color: var(--white); /* FIXED DARK */ --bg-fixed-dark--color: var(--gray-04); --font-fixed-dark--color: var(--white); --font-fixed-dark-muted--color: var(--gray-70); /* TRANSPARENT */ --bg-transp--color: transparent; --bg-transp--color-hover: var(--gray-transp-06); --bg-transp--color-active: var(--gray-transp-10); --bg-item-hover--color: var(--bg-transp--color-hover); /* IDENTITY */ --identity-title--color: var(--font-uno--color); --identity-subtitle--color: var(--font-siete--color); /* ENTITY PALETTE */ --entity-palette-0--bg-color: hsl(15 100% 55%); --entity-palette-0--text-color: var(--black); --entity-palette-1--bg-color: hsl(30 100% 55%); --entity-palette-1--text-color: var(--black); --entity-palette-2--bg-color: hsl(50 98% 50%); --entity-palette-2--text-color: hsl(20 50% 35%); --entity-palette-3--bg-color: hsl(70 90% 50%); --entity-palette-3--text-color: hsl(100 90% 20%); --entity-palette-4--bg-color: hsl(110 90% 63%); --entity-palette-4--text-color: hsl(120 100% 18%); --entity-palette-5--bg-color: hsl(160 90% 63%); --entity-palette-5--text-color: hsl(180 100% 18%); --entity-palette-6--bg-color: hsl(190 90% 63%); --entity-palette-6--text-color: hsl(200 100% 25%); --entity-palette-7--bg-color: hsl(215 95% 50%); --entity-palette-7--text-color: hsl(0 0% 100%); --entity-palette-8--bg-color: hsl(240 95% 60%); --entity-palette-8--text-color: hsl(0 0% 100%); --entity-palette-9--bg-color: hsl(260 95% 60%); --entity-palette-9--text-color: hsl(0 0% 100%); --entity-palette-10--bg-color: hsl(285 95% 60%); --entity-palette-10--text-color: var(--black); --entity-palette-11--bg-color: hsl(320 95% 60%); --entity-palette-11--text-color: var(--black); --entity-palette-12--bg-color: hsl(340 100% 60%); --entity-palette-12--text-color: var(--black); --entity-palette-13--bg-color: hsl(60 5% 5%); --entity-palette-13--text-color: hsl(0 0% 100%); --entity-palette-14--bg-color: hsl(30 3% 25%); --entity-palette-14--text-color: hsl(0 0% 100%); --entity-palette-15--bg-color: hsl(35 3% 45%); --entity-palette-15--text-color: hsl(0 0% 100%); --entity-palette-16--bg-color: hsl(30 5% 80%); --entity-palette-16--text-color: hsl(35 5% 25%); --entity-palette-17--bg-color: hsl(0 0% 100%); --entity-palette-17--text-color: hsl(35 5% 25%); /* ENTITY COLOR */ --entity-color-white--edge-color: var(--black-transp-05); --entity-color-avatar-on-surface--edge-color: rgb(255 255 255 / 0.45); --entity-color-swatch-indicator--bg-color: rgb(255 255 255 / 0.62); --entity-color-swatch-indicator--ring-color: var(--black-transp-20); --entity-color-swatch-indicator-selected--bg-color: var(--white); /* TASK STATUS */ --task-status-neutral--color: var(--gray-60); --task-status-in-progress--color: var(--task-status-legacy-yellow); --task-status-in-review--color: var(--task-status-legacy-blue); --task-status-done--color: var(--task-status-legacy-green); --task-status-done--mark-color: var(--white); /* UNO */ --bg-uno--color: var(--gray-100); --bg-uno--color-hover: var(--gray-96); --bg-uno--color-active: var(--gray-94); --border-uno--color: var(--gray-transp-20); --border-uno--color-hover: var(--gray-transp-30); --border-uno--color-active: var(--gray-transp-36); /* exception: user capped neutral field chrome, including focus, at 2:1 */ --border-field--color: var(--gray-transp-40); --border-field--color-hover: var(--gray-transp-45); /* WINDOW */ --border-window--color: var(--gray-transp-10); --font-uno--color: var(--gray-10); --font-uno--color-hover: var(--gray-40); --font-uno--color-active: var(--gray-20); /* DOS */ --bg-dos--color: var(--gray-96); --bg-dos--color-hover: var(--gray-94); --bg-dos--color-active: var(--gray-92); --bg-dos-soft--color: var(--gray-transp-10); --bg-dos-soft--color-hover: var(--gray-transp-15); --bg-dos-soft--color-active: var(--gray-transp-20); --border-dos--color: var(--gray-80); --border-dos--color-hover: var(--gray-78); --border-dos--color-active: var(--gray-76); --font-dos--color: var(--gray-20); --font-dos--color-hover: var(--gray-25); --font-dos--color-active: var(--gray-30); /* TRES */ --bg-tres--color: var(--gray-92); --bg-tres--color-hover: var(--gray-90); --bg-tres--color-active: var(--gray-88); --border-tres--color: var(--gray-70); --border-tres--color-hover: var(--gray-65); --border-tres--color-active: var(--gray-60); --font-tres--color: var(--gray-30); --font-tres--color-hover: var(--gray-35); --font-tres--color-active: var(--gray-40); /* CUATRO */ --font-cuatro--color: var(--gray-35); --font-cuatro--color-hover: var(--gray-30); --font-cuatro--color-active: var(--gray-25); /* CINCO */ --font-cinco--color: var(--gray-40); --font-cinco--color-hover: var(--gray-35); --font-cinco--color-active: var(--gray-30); /* SIETE */ --font-siete--color: var(--gray-45); --font-siete--color-hover: var(--gray-40); --font-siete--color-active: var(--gray-35); /* OUTLINE */ --outline-uno--color: var(--blue-50); /* LINK */ --link-uno--color: var(--blue-50); --link-uno--color-hover: var(--blue-50); --link-uno--color-active: var(--blue-40); --link-uno--underline-color: var(--blue-transp-40); --link-neutral--color: var(--font-uno--color); --link-neutral--color-hover: var(--font-uno--color-hover); --link-neutral--underline-color: var(--black-transp-10); --link-neutral--underline-color-hover: var(--black-transp-30); /* MUTED CONTENT */ --font-muted--color: var(--font-siete--color); --font-muted--color-hover: var(--font-uno--color); --font-muted--color-active: var(--font-uno--color); /* MARK — search-hit highlight, applied to bare */ --bg-mark--color: hsla(50, 100%, 50%, 0.5); --debug-outline--color: var(--red-transp-15); } :root[data-theme="dark"] { color-scheme: dark; /* COLOR INTENTS */ /* PAGE */ --page-bg--hsl: 0 0% 6%; --page-bg--color: hsl(var(--page-bg--hsl)); --bg-frost--alpha: 0.72; --bg-frost--color: hsl(var(--page-bg--hsl) / var(--bg-frost--alpha)); /* PRIMARY */ --bg-primary--color: var(--blue-50); --bg-primary--color-hover: var(--blue-55); --bg-primary--color-active: var(--blue-60); --font-primary--color: var(--blue-70); --font-primary--color-hover: var(--blue-80); --font-primary--on: var(--white); --bg-primary-soft--color: var(--blue-transp-20); --bg-primary-soft--color-hover: var(--blue-transp-25); --bg-primary-soft--color-active: var(--blue-transp-30); /* SUCCESS */ --bg-success--color: var(--green-30); --bg-success--color-hover: var(--green-35); --bg-success--color-active: var(--green-40); --font-success--color: var(--green-60); --font-success--color-hover: var(--green-70); --font-success-soft--color-hover: var(--green-55); --font-success-soft--color-active: var(--green-50); --font-success--on: var(--white); --bg-success-soft--color: var(--green-transp-10); --bg-success-soft--color-hover: var(--green-transp-15); --bg-success-soft--color-active: var(--green-transp-20); /* DANGER */ --bg-danger--color: var(--red-40); --bg-danger--color-hover: var(--red-50); --bg-danger--color-active: var(--red-30); --font-danger--color: var(--red-60); --font-danger--color-hover: var(--red-50); --font-danger--on: var(--white); --bg-danger-soft--color: var(--red-transp-10); --bg-danger-soft--color-hover: var(--red-transp-15); --bg-danger-soft--color-active: var(--red-transp-20); /* WARNING */ --bg-warning--color: var(--yellow-60); --bg-warning--color-hover: var(--yellow-70); --bg-warning--color-active: var(--yellow-50); --font-warning--color: var(--yellow-60); --font-warning--color-hover: var(--yellow-70); --font-warning-soft--color-hover: var(--yellow-55); --font-warning-soft--color-active: var(--yellow-50); --font-warning--on: var(--black); --bg-warning-soft--color: var(--yellow-transp-10); --bg-warning-soft--color-hover: var(--yellow-transp-15); --bg-warning-soft--color-active: var(--yellow-transp-20); /* INVERT */ --bg-invert--color: var(--gray-98); --bg-invert--color-hover: var(--gray-92); --bg-invert--color-active: var(--gray-86); --border-invert--color: var(--gray-90); --font-invert--color: var(--black); /* FIXED DARK */ --bg-fixed-dark--color: var(--gray-04); --font-fixed-dark--color: var(--white); --font-fixed-dark-muted--color: var(--gray-70); /* TRANSPARENT */ --bg-transp--color: transparent; --bg-transp--color-hover: var(--gray-transp-10); --bg-transp--color-active: var(--gray-transp-14); --bg-item-hover--color: var(--bg-tres--color-hover); /* IDENTITY */ --identity-title--color: var(--font-uno--color); --identity-subtitle--color: var(--font-cuatro--color); /* UNO */ --bg-uno--color: var(--gray-10); --bg-uno--color-hover: var(--gray-14); --bg-uno--color-active: var(--gray-16); --border-uno--color: var(--gray-transp-20); --border-uno--color-hover: var(--gray-transp-30); --border-uno--color-active: var(--gray-transp-36); /* WINDOW */ --border-window--color: var(--gray-transp-10); --font-uno--color: var(--gray-90); --font-uno--color-hover: var(--gray-75); --font-uno--color-active: var(--gray-80); /* DOS */ --bg-dos--color: var(--gray-14); --bg-dos--color-hover: var(--gray-18); --bg-dos--color-active: var(--gray-20); --bg-dos-soft--color: var(--gray-transp-10); --bg-dos-soft--color-hover: var(--gray-transp-15); --bg-dos-soft--color-active: var(--gray-transp-20); --border-dos--color: var(--gray-22); --border-dos--color-hover: var(--gray-30); --border-dos--color-active: var(--gray-35); --font-dos--color: var(--gray-80); --font-dos--color-hover: var(--gray-75); --font-dos--color-active: var(--gray-70); /* TRES */ --bg-tres--color: var(--gray-18); --bg-tres--color-hover: var(--gray-22); --bg-tres--color-active: var(--gray-24); --border-tres--color: var(--gray-30); --border-tres--color-hover: var(--gray-40); --border-tres--color-active: var(--gray-45); --font-tres--color: var(--gray-70); --font-tres--color-hover: var(--gray-65); --font-tres--color-active: var(--gray-60); /* CUATRO */ --font-cuatro--color: var(--gray-65); --font-cuatro--color-hover: var(--gray-70); --font-cuatro--color-active: var(--gray-75); /* CINCO */ --font-cinco--color: var(--gray-60); --font-cinco--color-hover: var(--gray-65); --font-cinco--color-active: var(--gray-70); /* SIETE */ --font-siete--color: var(--gray-55); --font-siete--color-hover: var(--gray-60); --font-siete--color-active: var(--gray-65); /* OUTLINE */ --outline-uno--color: var(--blue-60); /* LINK */ --link-uno--color: var(--blue-60); --link-uno--color-hover: var(--blue-70); --link-uno--color-active: var(--blue-75); --link-uno--underline-color: var(--blue-transp-35); --link-neutral--color: var(--font-uno--color); --link-neutral--color-hover: var(--gray-100); --link-neutral--underline-color: var(--white-transp-10); --link-neutral--underline-color-hover: var(--white-transp-30); /* MUTED CONTENT */ --font-muted--color: var(--font-siete--color); --font-muted--color-hover: var(--font-uno--color); --font-muted--color-active: var(--font-uno--color); /* MARK — search-hit highlight, applied to bare */ --bg-mark--color: hsla(50, 100%, 50%, 0.8); --debug-outline--color: var(--red-transp-15); } :root { /* Checkbox */ --control-checkbox--size: var(--px-16); /* Radio */ --control-radio--size: var(--px-16); --control-radio--dot-size: var(--px-6); /* Switch */ --control-switch--height: var(--px-16); --control-switch--width: calc(var(--control-switch--height) * 1.6); --control-switch--padding: var(--px-3); --control-switch--thumb-size: calc(var(--control-switch--height) - var(--control-switch--padding) * 2); --control-switch--track-bg: var(--bg-tres--color); --control-switch--track-bg-hover: var(--bg-tres--color-hover); /* Shared geometry */ --control--border-width: var(--px-1); --control--border-color: var(--border-dos--color); --control--border-color-hover: var(--border-dos--color-hover); /* Relative gap keeps control-label spacing proportional across size variants. */ --control--label-gap: .4em; /* Shared visuals */ --control--mark-color: var(--white); --control--checked-mark-color: var(--control--mark-color); --control--contrast-mark-color: var(--font-invert--color); /* Focus */ --control--focus-outline-width: var(--outline-width); --control--focus-outline-style: var(--outline-style); --control--focus-outline-color: var(--outline-color); --control--rest-outline-offset: var(--px-n2); --control--focus-outline-offset: var(--px-n1); --control--focus-outline-offset-checked: var(--outline-offset); /* Disabled */ --control--disabled-bg: var(--bg-disabled--color); --control--disabled-mark-color: var(--font-disabled--color); /* Error */ --control--error-color: var(--font-danger--color); --control--error-color-hover: var(--font-danger--color-hover); --control--error-bg: var(--bg-danger--color); --control--error-bg-hover: var(--bg-danger--color-hover); /* Hit area */ --control--hit-padding: var(--px-4); --control--hit-area-min: var(--px-24); /* WCAG 2.2 target size minimum */ /* Variants */ --control--primary-bg: var(--bg-primary--color); --control--primary-bg-hover: var(--bg-primary--color-hover); --control--success-bg: var(--bg-success--color); --control--success-bg-hover: var(--bg-success--color-hover); --control--warning-bg: var(--bg-warning--color); --control--warning-bg-hover: var(--bg-warning--color-hover); --control--danger-bg: var(--bg-danger--color); --control--danger-bg-hover: var(--bg-danger--color-hover); --control--contrast-bg: var(--bg-invert--color); --control--contrast-bg-hover: var(--bg-invert--color-hover); /* Checked = default active variant */ --control--checked-bg: var(--control--primary-bg); --control--checked-bg-hover: var(--control--primary-bg-hover); } :root { --bg-disabled--color: var(--gray-transp-20); --font-disabled--color: var(--gray-60); --disabled--opacity: 0.45; } :root[data-theme="dark"] { --bg-disabled--color: var(--gray-transp-14); --font-disabled--color: var(--gray-50); } :root { --element--bg-color: var(--bg-tres--color); --element--bg-color-hover: var(--bg-tres--color-hover); --element--bg-color-active: var(--bg-tres--color-active); --element--bg-transp--color: var(--bg-transp--color); --element--bg-transp--color-hover: var(--bg-transp--color-hover); --element--bg-transp--color-active: var(--bg-transp--color-active); --element-neutral-soft--bg-color: var(--bg-dos--color); --element-neutral-soft--bg-color-hover: var(--bg-dos--color-hover); --element-neutral-soft--bg-color-active: var(--bg-dos--color-active); --element-neutral-soft--color: var(--font-cinco--color); --element-neutral-soft--color-hover: var(--font-cuatro--color); --element-neutral-soft--color-active: var(--font-tres--color); --element-neutral-soft--focus-color: var(--element--focus-outline-color); --element--border-color: var(--border-dos--color); --element--border-color-hover: var(--border-dos--color-hover); --element--border-color-active: var(--border-dos--color-active); --element--border-width: var(--px-1); --element--border-radius: var(--px-3); --element-field--border-color: var(--border-field--color); --element-field--border-color-hover: var(--border-field--color-hover); --element-field--focus-outline-color: var(--element-field--border-color-hover); --element-field--rest-outline-offset: calc(var(--element--border-width) * -1); --element-field--focus-outline-offset: var(--px-n1); --element--gap: var(--px-4); --element--focus-outline-width: var(--outline-width); --element--focus-outline-offset: var(--outline-offset); --element--focus-outline-style: var(--outline-style); --element--focus-outline-color: var(--outline-color); --element--placeholder-color: var(--font-siete--color); --element--multiline-size-factor: 3; --element--icon-stroke-width: var(--px-2); /* Small */ --element-s--height: var(--px-24); --element-s--font-size: var(--font-size-s); --element-s--line-height: var(--px-16); --element-s--icon-size: var(--px-16); --element-s--padding-inline: var(--px-8); /* Medium */ --element-m--height: var(--px-32); --element-m--font-size: var(--font-size-m); --element-m--line-height: var(--px-24); --element-m--icon-size: var(--px-20); --element-m--padding-inline: var(--px-10); /* Large */ --element-l--height: var(--px-40); --element-l--font-size: var(--font-size-m); --element-l--line-height: var(--px-24); --element-l--icon-size: var(--px-24); --element-l--padding-inline: var(--px-14); } :root { --font-size-xxs: var(--px-10); --font-size-xs: var(--px-12); --font-size-s: var(--px-14); --font-size-m: var(--px-16); --font-size-l: var(--px-18); --font-size-xl: var(--px-24); --font-size-xxl: var(--px-32); /* Line heights */ --line-height-xxs: var(--px-8); --line-height-xs: var(--px-12); --line-height-s: var(--px-16); --line-height-m: var(--px-24); --line-height-l: var(--px-32); --line-height-xl: var(--px-40); /* Text sizes */ --text-s--font-size: var(--font-size-s); --text-s--line-height: var(--line-height-s); --text-m--font-size: var(--font-size-m); --text-m--line-height: var(--line-height-m); --text-l--font-size: var(--font-size-l); --text-l--line-height: var(--line-height-l); /* Letter spacing */ --letters-tighter: -0.05em; --letters-tight: -0.025em; --letters-normal: 0; --letters-loose: 0.025em; --letters-looser: 0.05em; --letters-loosest: 0.1em; /* Font families */ --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-display: var(--font-family-sans); --font-family-title: 'Geologica', var(--font-family-sans); --font-family-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-drag-selection: 900; --z-drag-indicator: 910; --z-dropdown: 1000; --z-overlay: 1100; --z-modal: 1200; --z-popover: 1300; --z-toast: 1400; --z-tooltip: 1500; } :root { /* Container */ --container-gutter-m: clamp(var(--px-16), 5vw, var(--px-80)); --container-gutter-s: var(--px-16); --container-gutter-l: var(--px-24); /* Page max-width */ --page-max-narrow: 27.5rem; /* 440px */ --page-max-m: 45rem; /* 720px */ --page-max-wide: 87.5rem; /* 1400px */ /* Page */ --page-gap-s: var(--px-32); --page-gap-m: var(--px-48); --page-gap-l: var(--px-56); /* Section */ --section-gap-xs: var(--px-16); --section-gap-s: var(--px-24); --section-gap-m: var(--px-32); --section-gap-l: var(--px-40); --section-gap-xl: var(--px-56); /* Block/group spacing */ --block-gap-xs: var(--px-4); --block-gap-s: var(--px-8); --block-gap-m: var(--px-20); --block-gap-l: var(--px-26); --block-gap-xl: var(--px-32); --block-padding-s: var(--px-8); --block-padding-m: var(--px-20); --block-padding-l: var(--px-32); --block-padding-xl: var(--px-40); --block-border-radius-s: var(--px-3); --block-border-radius-m: var(--px-5); --block-border-radius-l: var(--px-7); --block-border-radius-xl: var(--px-12); /* Group */ --group-gap-xs: var(--px-2); --group-gap-s: var(--px-4); --group-gap-m: var(--px-8); --group-gap-l: var(--px-20); --group-border-radius-s: var(--px-2); --group-border-radius-m: var(--px-4); --group-border-radius-l: var(--px-8); --group-padding-s: var(--px-4); --group-padding-m: var(--px-12); --group-padding-l: var(--px-16); /* App header */ --app-header-height: var(--px-56); /* Auth */ --auth-micrographics-scale: 0.6; /* Shadows */ --shadow-xl: 0 40px 120px 0px var(--black-transp-10), 0 20px 80px 0px var(--black-transp-06); --shadow-l: 0 0px 80px 0px var(--black-transp-06), 0 0 40px 0px var(--black-transp-03); --shadow-m: 0 8px 24px 0px var(--black-transp-08), 0 0 10px 0px var(--black-transp-08); --shadow-s: 0 4px 12px 0px var(--black-transp-08), 0 0 5px 0px var(--black-transp-08); --shadow-xs: 0 1px 2px 0px var(--black-transp-08); } :root[data-theme="dark"] { --shadow-l: 0 16px 80px 0px var(--black-transp-10), 0 8px 40px 0px var(--black-transp-05); --shadow-m: 0 8px 24px 0px var(--black-transp-10), 0 0 10px 0px var(--black-transp-10); --shadow-s: 0 4px 12px 0px var(--black-transp-10), 0 0 5px 0px var(--black-transp-10); } :root { --duration-fast: 75ms; --duration-normal: 150ms; --duration-slow: 300ms; --motion-transition-outline-fast: outline-color var(--duration-fast) linear; --motion-transition-interactive-fast: background-color var(--duration-fast) linear, transform var(--duration-fast) linear; --motion-transition-switch: var(--duration-normal) ease-out; } :root { --outline-width: var(--px-2); --outline-style: solid; --outline-color: var(--outline-uno--color); --outline-offset: var(--px-2); } :root { --radius-xs: var(--px-5); --radius-s: var(--px-7); --radius-m: var(--px-12); --radius-l: var(--px-16); --radius-full: 9999px; } :root { --breakpoint-xs: 30rem; /* 480px */ --breakpoint-sm: 48rem; /* 768px */ --breakpoint-md: 64rem; /* 1024px */ --breakpoint-lg: 80rem; /* 1280px */ --breakpoint-xl: 96rem; /* 1536px */ --container-xs: 30rem; /* 480px */ --container-sm: 48rem; /* 768px */ --container-md: 64rem; /* 1024px */ --container-lg: 80rem; /* 1280px */ --container-xl: 96rem; /* 1536px */ --container-max: var(--container-xl); --container-gutter: var(--container-gutter-m); --container-inline-size: min(calc(100% - var(--container-gutter) * 2), var(--container-max)); }:root { /* Large surfaces (light theme), step 10 */ --bg-surface-base: var(--gray-96); --bg-surface-1: var(--gray-100); --bg-surface-1-elevated: var(--gray-100); --bg-surface-2: var(--gray-90); --bg-surface-3: var(--gray-80); } :root[data-theme="dark"] { /* Large surfaces (dark theme), step 10 */ --bg-surface-base: var(--gray-06); --bg-surface-1: var(--gray-10); --bg-surface-1-elevated: var(--gray-12); --bg-surface-2: var(--gray-20); --bg-surface-3: var(--gray-30); } /* Modern CSS reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -moz-tab-size: 4; tab-size: 4; font-family: sans-serif; scrollbar-gutter: stable; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul, ol { list-style: none; } a { color: inherit; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } img { vertical-align: middle; } svg { vertical-align: middle; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; background: transparent; border: none; padding: 0; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } table { border-collapse: collapse; border-spacing: 0; } :root { --scrollbar-thumb--color: color-mix(in srgb, var(--font-muted--color) 20%, transparent); --scrollbar-track--color: transparent; } html { scrollbar-color: var(--scrollbar-thumb--color) var(--scrollbar-track--color); } *::-webkit-scrollbar-thumb { border-radius: var(--radius-full); background-color: var(--scrollbar-thumb--color); } /* Semantic typography styles */ body { font-family: var(--font-family-sans); font-size: var(--font-size-m); line-height: var(--line-height-m); color: var(--font-uno--color); background-color: var(--page-bg--color); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; text-rendering: optimizeLegibility; font-feature-settings: "liga" 1, "calt" 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-display); font-weight: 700; margin: 0; padding: 0; } h1 { font-size: var(--px-48); line-height: var(--px-56); } h2 { font-size: var(--px-32); line-height: var(--px-40); } h3 { font-size: var(--px-24); line-height: var(--px-32); } h4 { font-size: var(--px-16); line-height: var(--px-24); } h5 { font-size: var(--px-14); line-height: var(--px-16); } h6 { font-size: var(--px-12); line-height: var(--px-16); } a { color: var(--link-uno--color); text-decoration: none; &:hover { color: var(--link-uno--color-hover); } } mark { background-color: var(--bg-mark--color); } .text-muted-s { color: var(--font-cinco--color); font-size: var(--font-size-s); } .tabular-nums { font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } /* Shared field label, hint, and error styles */ /* Field group (fieldset with legend label) */ fieldset:has(> legend.field-label) { display: flex; flex-direction: column; gap: var(--element--gap); } /* Label text */ .field-label { display: flex; align-items: center; font-weight: 500; font-size: var(--element-s--font-size); } /* Legend reset — remove browser defaults */ legend.field-label { padding: 0; } /* Required indicator */ .field-label-required { color: var(--font-danger--color); margin-inline-start: var(--px-4); } /* Disabled label */ .field-label--disabled { color: var(--font-disabled--color); cursor: not-allowed; } /* Error label */ .field-label--error { color: var(--font-danger--color); } /* Hint and error text */ :is(.field-hint, .field-error) { font-size: var(--font-size-xs); line-height: var(--element-s--line-height); font-weight: 400; } .field-hint { color: var(--font-cinco--color); } .field-error { color: var(--font-danger--color); } :root[data-theme="light"] :is(input, select, textarea) { color-scheme: light; } :root[data-theme="dark"] :is(input, select, textarea) { color-scheme: dark; } :root[data-theme="dark"] input::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input::-webkit-contacts-auto-fill-button, :root[data-theme="dark"] input::-webkit-credentials-auto-fill-button { filter: invert(1); } .autofill-username { position: absolute; inline-size: 1px; block-size: 1px; inset-inline-start: -10000px; opacity: 0; pointer-events: none; } /* Shared control rules (checkbox, radio, switch) */ /* Labels */ :is(.checkbox-label, .radio-label, .switch-label) { color: inherit; user-select: text; } /* Disabled labels */ .checkbox:has(.checkbox-input:disabled) .checkbox-label, .radio:has(.radio-input:disabled) .radio-label, .switch:has(.switch-input:disabled) .switch-label { color: var(--font-disabled--color); } /* Error labels */ .checkbox--error .checkbox-label, .radio--error .radio-label, .switch--error .switch-label { color: var(--control--error-color); } /* Error text */ :is(.checkbox-error, .radio-error, .switch-error) { color: var(--control--error-color); font-size: var(--font-size-xs); line-height: var(--element-s--line-height); font-weight: 400; } /* ── Field labels (input, select, textarea) ── */ :is(.input, .select, .textarea) { border-radius: var(--element--border-radius); background-color: transparent; color: var(--font-uno--color); outline: solid var(--element--border-width) var(--element-field--border-color); outline-offset: var(--element-field--rest-outline-offset); transition: outline-color var(--duration-fast); &:hover:not(:disabled) { outline-color: var(--element-field--border-color-hover); } &:focus-visible:not(:disabled) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } &:disabled { background-color: var(--bg-disabled--color); color: var(--font-disabled--color); cursor: not-allowed; } } @supports not selector(:focus-visible) { :is(.input, .select, .textarea):focus:not(:disabled) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } } :is(.input-label, .select-label, .textarea-label) { display: flex; align-items: center; margin-bottom: var(--element--gap); font-size: var(--px-14); line-height: var(--px-18); font-weight: 500; color: var(--font-cuatro--color); } /* Disabled field labels */ .input-wrapper:has(.input:disabled) .input-label, .select-wrapper:has(.select:disabled) .select-label, .textarea-wrapper:has(.textarea:disabled) .textarea-label { color: var(--font-disabled--color); cursor: not-allowed; } /* Field descriptions */ :is(.input-description, .select-description, .textarea-description) { color: var(--font-cinco--color); font-weight: 400; margin-top: var(--element--gap); } /* Field error text */ :is(.input-error, .select-error, .textarea-error) { color: var(--font-danger--color); font-weight: 400; margin-top: var(--element--gap); } /* ── Disabled icons (input, select) ── */ .input-wrapper:has(.input:disabled) .input-icon, .select-wrapper:has(.select:disabled) .select-icon, .select-wrapper:has(.select:disabled) .select-chevron { color: var(--font-disabled--color); } /* ── Error states (input, select, textarea) ── */ :is(.input-wrapper--error, .select-wrapper--error, .textarea-wrapper--error) { :is(.input, .select, .textarea) { outline: solid var(--element--border-width) var(--font-danger--color); &:hover:not(:disabled) { outline: solid var(--element--border-width) var(--font-danger--color); } &:focus-visible:not(:disabled) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--font-danger--color); outline-offset: var(--element-field--focus-outline-offset); } } } .input-wrapper--error .input-label, .select-wrapper--error .select-label, .textarea-wrapper--error .textarea-label { color: var(--font-danger--color); } .input-wrapper--error .input-icon, .select-wrapper--error .select-icon, .select-wrapper--error .select-chevron { color: var(--font-danger--color); } /* Link component: base contract + variants */ /* Base: shared geometry + keyboard focus ring for all link variants */ .link, .link--primary, .link--neutral { font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); text-decoration: none; &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--outline-color); } } /* Size modifiers (default size is m via base block above) */ .link-s { font-size: var(--element-s--font-size); line-height: var(--element-s--line-height); } .link-l { font-size: var(--element-l--font-size); line-height: var(--element-l--line-height); } /* Shared underline geometry for text-like link variants */ .link--primary, .link--neutral { text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: color var(--duration-fast) linear, text-decoration-color var(--duration-fast) linear; } /* Primary variant: brand text + underline appears only on hover/active */ .link--primary { color: var(--link-uno--color); &:hover, &:active { color: var(--link-uno--color-hover); text-decoration-color: var(--link-uno--underline-color); } } /* Disabled state: no interaction and no hover/active visual changes */ .link.is-disabled { color: var(--font-disabled--color); text-decoration-color: transparent; pointer-events: none; &:hover, &:active { color: var(--font-disabled--color); text-decoration-color: transparent; } } /* Neutral variant: text-color link with neutral underline on hover/active */ .link--neutral { color: var(--link-neutral--color); &:hover, &:active { color: var(--link-neutral--color-hover); text-decoration-color: var(--link-neutral--underline-color); } } /* Page */ .ui-page { display: flex; flex-direction: column; gap: var(--block-gap-xl); max-width: var(--page-max-m); margin-inline: auto; padding: var(--block-padding-l) var(--block-padding-m); } .ui-page-narrow { max-width: var(--page-max-narrow); } .ui-page-wide { max-width: var(--page-max-wide); } /* Section */ .ui-section { display: flex; flex-direction: column; gap: var(--block-gap-m); } .ui-section-xs { gap: var(--block-gap-s); } .ui-section-s { gap: var(--block-gap-m); } .ui-section-l { gap: var(--block-gap-l); } .ui-section-xl { gap: var(--block-gap-xl); } .ui-section-start { align-items: flex-start; } /* Block */ .ui-block { display: flex; flex-direction: column; gap: var(--block-gap-m); } .ui-block-xs { gap: var(--block-gap-xs); } .ui-block-s { gap: var(--block-gap-s); } .ui-block-l { gap: var(--block-gap-l); } .ui-block-start { align-items: flex-start; } /* Group — tight related cluster */ .ui-group { display: flex; align-items: center; gap: var(--group-gap-m); } .ui-group-xs { gap: var(--group-gap-xs); } .ui-group-s { gap: var(--group-gap-s); } .ui-group-l { gap: var(--group-gap-l); } /* Row — horizontal stripe with distribution logic */ .ui-row { display: flex; align-items: center; gap: var(--group-gap-m); } .ui-row-split { justify-content: space-between; } .ui-row-end { justify-content: flex-end; } .ui-row-center { justify-content: center; } .ui-row-start { align-items: flex-start; } .ui-row-baseline, .ui-group-baseline { align-items: baseline; } /* List */ .ui-list-m, .ui-list-s, .ui-list-xs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ui-list-m { gap: var(--block-gap-m); } .ui-list-s { gap: var(--block-gap-s); } .ui-list-xs { gap: var(--block-gap-xs); } /* Wrap utility — applies to group/row */ .ui-wrap, .ui-group-wrap { flex-wrap: wrap; } /* Surface — card treatment applied to exactly one level per the counting rule. */ .ui-surface { background-color: var(--bg-surface-1); padding: var(--block-padding-m); border-radius: var(--block-border-radius-m); } /* Structural headings — section headers one step larger than block headers. */ .ui-section > header > :is(h1, h2, h3, h4, h5, h6) { font-size: var(--font-size-xl); line-height: var(--line-height-l); font-weight: 600; } .ui-block > header > :is(h1, h2, h3, h4, h5, h6) { font-size: var(--font-size-l); line-height: var(--line-height-m); font-weight: 600; } /* Attention flash */ .is-attention-flash { animation: attention-flash 700ms ease-out; } .is-attention-shake { animation: attention-shake var(--duration-normal) ease-out; } @keyframes attention-flash { 0% { background-color: color-mix(in srgb, var(--bg-warning--color) 52%, transparent); } 100% { background-color: transparent; } } @keyframes attention-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(calc(-1 * var(--px-2))); } 50% { transform: translateX(var(--px-2)); } 75% { transform: translateX(calc(-1 * var(--px-1))); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } } /* Tests: disable motion for deterministic screenshots */ [data-test] *, [data-test] *::before, [data-test] *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } [data-test] input, [data-test] textarea, [data-test] [contenteditable] { caret-color: transparent !important; } .app-header { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--app-header-height); padding-inline: var(--container-gutter-s); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--block-gap-m); pointer-events: none; font-size: var(--font-size-s); line-height: var(--px-20); } .app-header-left, .app-header-center, .app-header-right { pointer-events: auto; } .app-header-left { justify-self: start; min-width: 0; } .app-header-center { justify-self: center; min-width: 0; } .app-header-center-cluster { display: flex; align-items: center; justify-content: center; gap: var(--group-gap-s); max-width: 100%; min-width: 0; } .app-header-center .btn.btn-ghost[aria-current="page"] { background-color: var(--bg-invert--color); color: var(--font-invert--color); } .app-header-center .btn.btn-ghost[aria-current="page"]:hover:not(:disabled):not(.is-disabled) { background-color: color-mix(in srgb, var(--bg-invert--color) 94%, var(--bg-surface-base) 6%); color: var(--font-invert--color); } .app-header-center .btn.btn-ghost[aria-current="page"]:active:not(:disabled):not(.is-disabled) { background-color: color-mix(in srgb, var(--bg-invert--color) 90%, var(--bg-surface-base) 10%); color: var(--font-invert--color); } .app-header-right { justify-self: end; min-width: 0; } .app-header-actions { display: flex; align-items: center; gap: var(--group-gap-s); min-width: 0; } .app-header-tools { display: flex; align-items: center; gap: var(--group-gap-s); } .app-header-capsule { display: flex; align-items: center; min-width: 0; height: var(--px-44); padding-inline: var(--px-12); border-radius: var(--radius-full); background-color: var(--bg-frost--color); } .app-header-left .app-header-capsule { max-width: 100%; overflow: hidden; } .app-header-breadcrumb-current { display: inline-block; flex: 0 1 auto; min-width: 0; max-width: clamp(8rem, 24vw, 18rem); overflow: hidden; color: var(--font-muted--color); font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); text-overflow: ellipsis; white-space: nowrap; text-align: start; vertical-align: middle; } .app-header-left .app-header-breadcrumb-link { display: inline-block; flex: 0 1 auto; min-width: 0; max-width: clamp(8rem, 24vw, 18rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; vertical-align: middle; } .app-header-breadcrumb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-header-breadcrumb-label[hidden], .app-header-breadcrumb-avatar[hidden] { display: none; } .app-header-breadcrumb-avatar { display: inline-flex; align-items: center; vertical-align: middle; } .app-header-breadcrumb-avatar-image { vertical-align: middle; } .app-header-left .app-header-capsule > .app-header-breadcrumb-link:first-child, .app-header-left .app-header-capsule > .app-header-breadcrumb-current:first-child { max-width: clamp(5rem, 16vw, 10rem); } .app-header-separator { flex: 0 0 auto; padding-inline: var(--px-8); color: var(--font-muted--color); } @supports (backdrop-filter: blur(1px)) { .app-header-capsule { backdrop-filter: blur(10px); } } @media (max-width: 720px) { :root:has(.app-header--with-center) { --app-header-height: calc( var(--px-44) + var(--element-l--height) + var(--block-gap-s) + (var(--group-gap-s) * 2) ); } .app-header { height: auto; min-height: var(--app-header-height); padding-block: var(--group-gap-s); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "left right"; column-gap: var(--group-gap-m); row-gap: 0; } .app-header--with-center { grid-template-areas: "left right" "center center"; row-gap: var(--block-gap-s); } .app-header-left { grid-area: left; width: 100%; overflow: hidden; } .app-header-center { grid-area: center; width: 100%; justify-self: stretch; display: none; } .app-header--with-center .app-header-center { display: block; } .app-header-right { grid-area: right; } .app-header-center-cluster { width: 100%; gap: var(--group-gap-xs); } .app-header-tools, .app-header-dev-tool { display: none; } } .attached-section { display: flex; flex-direction: column; gap: var(--block-gap-s); } .attached-section > .attached-section-header > :is(h1, h2, h3, h4, h5, h6) { font-size: var(--font-size-m); line-height: var(--element-m--line-height); font-weight: 500; } .attached-section-empty { padding-inline: var(--px-8); } /* Avatar */ .avatar { --avatar--height: var(--px-36); --avatar--size: var(--avatar--height); --avatar--line-height: var(--avatar--height); --avatar-frame--size: var(--avatar--size); --avatar--bg-color: var(--bg-tres--color); --avatar--color: var(--font-dos--color); --avatar-initials--inset: 4cqb; --avatar-initials--color: var(--avatar--color); --avatar-initials--font-size: 50cqb; --avatar-initials--font-weight: 500; --avatar-initials--letter-spacing: -.04em; display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-frame--size); height: var(--avatar--line-height); flex-shrink: 0; vertical-align: middle; } .avatar-frame { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-frame--size); height: var(--avatar-frame--size); border-radius: var(--radius-full); background: var(--avatar--bg-color); color: var(--avatar--color); overflow: hidden; container-type: size; } .avatar-xs { --avatar--height: var(--px-18); } .avatar-header { --avatar--height: var(--px-22); } .avatar-s { --avatar--height: var(--px-24); } .avatar-l { --avatar--height: var(--px-40); } .avatar-xl { --avatar--height: var(--px-90); } .avatar-fit-line { --avatar--line-height: 1lh; --avatar-frame--size: min(var(--avatar--size), var(--avatar--line-height)); } .avatar-profile { --avatar--height: calc(var(--px-180) * 1.25); } /* Image */ .avatar-img { width: 100%; height: 100%; object-fit: contain; display: block; } .avatar-img[hidden] { display: none; } /* Initials */ .avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; color: var(--avatar-initials--color); font-family: var(--font-family-sans); font-size: var(--avatar-initials--font-size); font-weight: var(--avatar-initials--font-weight); line-height: 0.75; text-align: center; text-transform: uppercase; letter-spacing: var(--avatar-initials--letter-spacing); white-space: nowrap; user-select: none; } .avatar-initials[hidden] { display: none; } /* Placeholder */ .avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 60%; height: 60%; color: currentColor; } .avatar-placeholder[hidden] { display: none; } /* Color palette */ .avatar[data-color] { --avatar--bg-color: var(--entity-color--bg-color); --avatar--color: var(--entity-color--text-color); --avatar-initials--color: var(--entity-color--text-color); } .avatar-has-image:not(.is-fallback) { --avatar--bg-color: transparent; } /* Avatar group */ .avatar-group { display: flex; align-items: center; } .avatar-group > * { outline: var(--px-2) solid var(--avatar-group--ring, var(--bg-surface-base)); } .avatar-group-s > * + * { margin-inline-start: calc((var(--px-6) + var(--px-4)) * -1); } .avatar-group-xs > * + * { margin-inline-start: calc((var(--px-4) + var(--px-2)) * -1); } .avatar-group-m > * + * { margin-inline-start: calc((var(--px-8) + var(--px-4)) * -1); } .avatar-group-l > * + * { margin-inline-start: calc((var(--px-10) + var(--px-4)) * -1); } /* Group ring context */ .avatar-group-on-dos { --avatar-group--ring: var(--bg-dos--color); } .avatar-group-on-tres { --avatar-group--ring: var(--bg-tres--color); } .avatar-group-on-danger { --avatar-group--ring: var(--bg-danger--color); } .badge { --badge--icon-size: var(--element-s--icon-size); --badge--padding-inline: var(--element-s--padding-inline); display: inline-flex; align-items: center; justify-content: center; gap: var(--element--gap); height: var(--element-s--height); padding-inline: var(--badge--padding-inline); font-size: var(--element-s--font-size); font-weight: 500; line-height: var(--element-s--line-height); border-radius: var(--radius-full); white-space: nowrap; vertical-align: middle; background: var(--bg-dos--color); color: var(--element-neutral-soft--color); svg { width: var(--badge--icon-size); height: var(--badge--icon-size); flex-shrink: 0; display: block; stroke: currentColor; fill: none; stroke-width: var(--element--icon-stroke-width); } } .badge--primary { background: var(--bg-primary-soft--color); color: var(--font-primary--color); } .badge--success { background: var(--bg-success-soft--color); color: var(--font-success--color); } .badge--warning { background: var(--bg-warning-soft--color); color: var(--font-warning--color); } .badge--danger { background: var(--bg-danger-soft--color); color: var(--font-danger--color); } .btn { --btn--height: var(--element-m--height); --btn--icon-size: var(--element-m--icon-size); --btn--padding-inline: var(--element-m--padding-inline); --btn--font-size: var(--element-m--font-size); --btn--line-height: var(--element-m--line-height); --btn--optical-compensation: 0.125em; --btn--icon-color: currentColor; --btn--color: inherit; --btn--pressed-bg-color: var(--bg-primary-soft--color); --btn--pressed-bg-color-hover: var(--bg-primary-soft--color-hover); --btn--pressed-bg-color-active: var(--bg-primary-soft--color-active); --btn--pressed-color: var(--font-primary--color); --btn--pressed-color-hover: var(--font-primary--color-hover); --btn--pressed-color-active: var(--font-primary--color-hover); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--element--gap); flex-shrink: 0; -webkit-user-select: none; user-select: none; padding-inline: var(--btn--padding-inline); height: var(--btn--height); font-size: var(--btn--font-size); line-height: var(--btn--line-height); font-weight: 400; color: var(--btn--color); text-decoration: none; background-color: var(--element--bg-color); border-radius: var(--element--border-radius); transition: background-color var(--duration-fast), box-shadow var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-color-active); } &:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--element--focus-outline-color); } &:disabled, &.is-disabled { background-color: var(--bg-disabled--color); --btn--icon-color: var(--font-disabled--color); color: var(--font-disabled--color); cursor: not-allowed; } } .btn-loading { pointer-events: none; } .btn svg { width: 100%; height: 100%; display: block; } .btn .icon--stroke { fill: none; stroke: currentColor; } .btn .icon--fill, .btn .icon--filled { fill: currentColor; stroke: none; } .btn .icon--mixed { fill: currentColor; stroke: currentColor; } .btn-icon-left > svg, .btn-icon-right > svg { color: var(--btn--icon-color); } .btn-icon-left, .btn-icon-right { display: inline-flex; align-items: center; justify-content: center; width: var(--btn--icon-size); height: var(--btn--icon-size); flex-shrink: 0; } .btn-icon-left { position: relative; order: -1; } .btn-leading-avatar { display: inline-flex; align-items: center; order: -2; } .btn-spinner { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: opacity var(--duration-fast), transform var(--duration-fast); } .btn-spinner svg { animation: btn-spin 1s linear infinite; } .btn-loading .btn-spinner { opacity: 1; transform: scale(1); } .btn-loading .btn-icon-left > svg { opacity: 0; transition: opacity var(--duration-fast); } .btn-no-left-icon .btn-icon-left { width: 0; opacity: 0; transform: scale(0); margin-inline-end: calc(var(--element--gap) * -1); transition: width var(--duration-fast), opacity var(--duration-fast), transform var(--duration-fast), margin var(--duration-fast); } .btn-no-left-icon.btn-loading .btn-icon-left { width: var(--btn--icon-size); opacity: 1; transform: scale(1); margin-inline-end: 0; } @keyframes btn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn-icon-only { width: var(--btn--height); min-width: var(--btn--height); padding: 0; justify-content: center; gap: 0; } .btn-has-left-icon:not(.btn-icon-only) { padding-inline-end: calc(var(--btn--padding-inline) + var(--btn--optical-compensation)); } .btn-has-right-icon:not(.btn-icon-only) { padding-inline-start: calc(var(--btn--padding-inline) + var(--btn--optical-compensation)); } .btn-s { --btn--height: var(--element-s--height); --btn--icon-size: var(--element-s--icon-size); --btn--font-size: var(--element-s--font-size); --btn--line-height: var(--element-s--line-height); } .btn-s.btn-icon-only { width: var(--element-s--height); min-width: var(--element-s--height); } .btn-l { --btn--height: var(--element-l--height); --btn--padding-inline: var(--element-l--padding-inline); --btn--icon-size: var(--element-l--icon-size); --btn--font-size: var(--element-l--font-size); --btn--line-height: var(--element-l--line-height); } .btn-l.btn-icon-only { width: var(--element-l--height); min-width: var(--element-l--height); } .btn-icon-s { --btn--icon-size: var(--element-s--icon-size); } .btn-icon-l { --btn--icon-size: var(--element-l--icon-size); } .btn-tap-small, .btn-tap-medium, .btn-tap-large, .btn-tap-xl { position: relative; } .btn-tap-small::after, .btn-tap-medium::after, .btn-tap-large::after, .btn-tap-xl::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: inherit; } .btn-tap-small::after { width: var(--element-s--height); height: var(--element-s--height); } .btn-tap-medium::after { width: var(--element-m--height); height: var(--element-m--height); } .btn-tap-large::after { width: var(--element-l--height); height: var(--element-l--height); } .btn-tap-xl::after { width: var(--px-56); height: var(--px-56); } .btn-primary { --btn--color: var(--font-primary--on); --btn--pressed-bg-color: var(--bg-primary--color-active); --btn--pressed-bg-color-hover: var(--bg-primary--color-active); --btn--pressed-bg-color-active: var(--bg-primary--color-active); --btn--pressed-color: var(--font-primary--on); --btn--pressed-color-hover: var(--font-primary--on); --btn--pressed-color-active: var(--font-primary--on); background-color: var(--bg-primary--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-primary--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-primary--color-active); } } .btn-primary-soft { --btn--color: var(--font-primary--color); background-color: var(--bg-primary-soft--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-primary-soft--color-hover); color: var(--font-primary--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-primary-soft--color-active); color: var(--font-primary--color-hover); } } .btn-contrast { --btn--color: var(--font-invert--color); --btn--pressed-bg-color: var(--bg-invert--color-active); --btn--pressed-bg-color-hover: var(--bg-invert--color-active); --btn--pressed-bg-color-active: var(--bg-invert--color-active); --btn--pressed-color: var(--font-invert--color); --btn--pressed-color-hover: var(--font-invert--color); --btn--pressed-color-active: var(--font-invert--color); background-color: var(--bg-invert--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-invert--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-invert--color-active); } } .btn-outline { --btn--color: var(--font-uno--color); --btn--icon-color: var(--btn--color); background-color: transparent; box-shadow: inset 0 0 0 var(--px-1) var(--element--border-color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-transp--color-hover); box-shadow: inset 0 0 0 var(--px-1) var(--element--border-color-hover); color: var(--font-uno--color); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-transp--color-active); box-shadow: inset 0 0 0 var(--px-1) var(--element--border-color-active); color: var(--font-uno--color); } &:disabled, &.is-disabled { background-color: transparent; box-shadow: inset 0 0 0 var(--px-1) var(--element--border-color); color: var(--font-disabled--color); } } .btn-success { --btn--color: var(--font-success--on); background-color: var(--bg-success--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-success--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-success--color-active); } } .btn-success-soft { --btn--color: var(--font-success--color); --btn--pressed-bg-color: var(--bg-success-soft--color); --btn--pressed-bg-color-hover: var(--bg-success-soft--color-hover); --btn--pressed-bg-color-active: var(--bg-success-soft--color-active); --btn--pressed-color: var(--font-success--color); --btn--pressed-color-hover: var(--font-success-soft--color-hover); --btn--pressed-color-active: var(--font-success-soft--color-active); background-color: var(--bg-success-soft--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-success-soft--color-hover); color: var(--font-success-soft--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-success-soft--color-active); color: var(--font-success-soft--color-active); } } .btn-warning-soft { --btn--color: var(--font-warning--color); --btn--pressed-bg-color: var(--bg-warning-soft--color); --btn--pressed-bg-color-hover: var(--bg-warning-soft--color-hover); --btn--pressed-bg-color-active: var(--bg-warning-soft--color-active); --btn--pressed-color: var(--font-warning--color); --btn--pressed-color-hover: var(--font-warning-soft--color-hover); --btn--pressed-color-active: var(--font-warning-soft--color-active); background-color: var(--bg-warning-soft--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-warning-soft--color-hover); color: var(--font-warning-soft--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-warning-soft--color-active); color: var(--font-warning-soft--color-active); } } .btn-neutral-soft { --btn--color: var(--element-neutral-soft--color); --btn--pressed-bg-color: var(--element-neutral-soft--bg-color); --btn--pressed-bg-color-hover: var(--element-neutral-soft--bg-color-hover); --btn--pressed-bg-color-active: var(--element-neutral-soft--bg-color-active); --btn--pressed-color: var(--element-neutral-soft--color); --btn--pressed-color-hover: var(--element-neutral-soft--color-hover); --btn--pressed-color-active: var(--element-neutral-soft--color-active); background-color: var(--element-neutral-soft--bg-color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--element-neutral-soft--bg-color-hover); color: var(--element-neutral-soft--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--element-neutral-soft--bg-color-active); color: var(--element-neutral-soft--color-active); } } .btn-ghost { --btn--color: var(--font-uno--color); background-color: transparent; color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-transp--color-hover); color: var(--font-uno--color); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-transp--color-active); color: var(--font-uno--color); } } .btn-ghost-muted { --btn--color: var(--font-siete--color); --btn--icon-color: var(--font-siete--color); background-color: transparent; color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { --btn--icon-color: var(--font-cuatro--color); background-color: var(--element--bg-transp--color-hover); color: var(--font-cuatro--color); } &:active:not(:disabled):not(.is-disabled) { --btn--icon-color: var(--font-tres--color); background-color: var(--element--bg-transp--color-active); color: var(--font-tres--color); } } .btn-ghost-icon { --btn--color: var(--font-siete--color); --btn--icon-color: var(--font-siete--color); background-color: transparent; color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { --btn--icon-color: var(--font-cuatro--color); background-color: transparent; color: var(--font-cuatro--color); } &:active:not(:disabled):not(.is-disabled) { --btn--icon-color: var(--font-tres--color); background-color: transparent; color: var(--font-tres--color); } } .btn-ghost.btn-intent-danger { --btn--color: var(--font-danger--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger--color); color: var(--font-danger--on); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger--color-active); color: var(--font-danger--on); } } .btn-ghost.btn-intent-danger-soft { --btn--color: var(--font-danger--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger-soft--color); color: var(--font-danger--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger-soft--color-active); color: var(--font-danger--color-hover); } } .btn-ghost.btn-intent-danger-muted { --btn--color: var(--font-cinco--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger-soft--color); color: var(--font-danger--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger-soft--color-active); color: var(--font-danger--color-hover); } } .btn-ghost.btn-intent-on-danger { --btn--color: var(--font-on-danger-muted--color); --btn--icon-color: var(--font-on-danger-muted--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { --btn--icon-color: var(--font-on-danger--color); background-color: var(--bg-on-danger-soft--color-hover); color: var(--font-on-danger--color); } &:active:not(:disabled):not(.is-disabled) { --btn--icon-color: var(--font-on-danger--color); background-color: var(--bg-on-danger-soft--color-active); color: var(--font-on-danger--color); } &:focus-visible { outline-color: var(--border-on-danger--color-active); } } .btn-primary.btn-intent-on-danger { --btn--color: var(--font-on-danger-invert--color); background-color: var(--bg-on-danger--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-on-danger--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-on-danger--color-active); } &:focus-visible { outline-color: var(--border-on-danger--color-active); } } .btn-outline.btn-intent-on-danger { --btn--color: var(--font-on-danger--color); --btn--icon-color: var(--btn--color); background-color: transparent; box-shadow: inset 0 0 0 var(--px-1) var(--border-on-danger--color-active); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-on-danger-soft--color-hover); box-shadow: inset 0 0 0 var(--px-1) var(--font-on-danger--color); color: var(--font-on-danger--color); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-on-danger-soft--color-active); box-shadow: inset 0 0 0 var(--px-1) var(--font-on-danger--color); color: var(--font-on-danger--color); } &:disabled, &.is-disabled { background-color: transparent; box-shadow: inset 0 0 0 var(--px-1) var(--border-on-danger-disabled--color); --btn--icon-color: var(--border-on-danger-disabled--color); color: var(--border-on-danger-disabled--color); opacity: 1; } &:focus-visible { outline-color: var(--border-on-danger--color-active); } } .btn-ghost.btn-intent-success { --btn--color: var(--font-success--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-success--color); color: var(--font-success--on); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-success--color-active); color: var(--font-success--on); } } .btn-ghost.btn-intent-success-soft { --btn--color: var(--font-success--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-success-soft--color); color: var(--font-success--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-success-soft--color-active); color: var(--font-success--color-hover); } } .btn-danger { --btn--color: var(--font-danger--on); --btn--pressed-bg-color: var(--bg-danger--color-active); --btn--pressed-bg-color-hover: var(--bg-danger--color-active); --btn--pressed-bg-color-active: var(--bg-danger--color-active); --btn--pressed-color: var(--font-danger--on); --btn--pressed-color-hover: var(--font-danger--on); --btn--pressed-color-active: var(--font-danger--on); background-color: var(--bg-danger--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger--color-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger--color-active); } } .btn-danger-soft { --btn--color: var(--font-danger--color); --btn--pressed-bg-color: var(--bg-danger-soft--color); --btn--pressed-bg-color-hover: var(--bg-danger-soft--color-hover); --btn--pressed-bg-color-active: var(--bg-danger-soft--color-active); --btn--pressed-color: var(--font-danger--color); --btn--pressed-color-hover: var(--font-danger--color); --btn--pressed-color-active: var(--font-danger--color); background-color: var(--bg-danger-soft--color); color: var(--btn--color); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger-soft--color-hover); color: var(--font-danger--color); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-danger-soft--color-active); color: var(--font-danger--color); } } /* Neutralise global link color overrides for link-mode buttons. Custom properties are not restricted by :visited privacy rules, so var(--btn--color) resolves to the variant's intended value. */ a.btn:visited, a.btn:hover { color: var(--btn--color); } .btn-rounded { border-radius: var(--radius-full); } .btn-full-width { width: 100%; } .btn-mono { font-family: var(--font-family-mono); } .btn-icon-tone-muted { --btn--icon-color: var(--font-cinco--color); } @supports not selector(:focus-visible) { .btn:focus:not(:disabled):not(.is-disabled) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--element--focus-outline-color); } .btn-primary.btn-intent-on-danger:focus:not(:disabled):not(.is-disabled), .btn-ghost.btn-intent-on-danger:focus:not(:disabled):not(.is-disabled), .btn-outline.btn-intent-on-danger:focus:not(:disabled):not(.is-disabled) { outline-color: var(--border-on-danger--color-active); } } /* Muted: non-interactive label with button geometry. Use for current-page breadcrumb, static tags, etc. */ .btn-muted { color: var(--font-muted--color); background-color: transparent; pointer-events: none; cursor: default; } .btn[aria-pressed="true"]:not(:disabled):not(.is-disabled) { background-color: var(--btn--pressed-bg-color); color: var(--btn--pressed-color); } .btn[aria-pressed="true"]:hover:not(:disabled):not(.is-disabled) { background-color: var(--btn--pressed-bg-color-hover); color: var(--btn--pressed-color-hover); } .btn[aria-pressed="true"]:active:not(:disabled):not(.is-disabled) { background-color: var(--btn--pressed-bg-color-active); color: var(--btn--pressed-color-active); } /* Calendar */ .calendar { --calendar-cell-size: var(--px-32); --calendar-gap: var(--px-2); display: flex; flex-direction: column; gap: var(--group-gap-m); width: calc(var(--calendar-cell-size) * 7 + var(--calendar-gap) * 6); } /* Size to the calendar grid — no empty right gutter. */ .task-deadline-popover { --popover-surface-min-width: auto; --popover-surface-max-width: auto; width: auto; } .task-deadline-popover-footer { justify-content: flex-start; } .calendar-header { display: flex; align-items: center; justify-content: space-between; gap: var(--group-gap-s); min-height: var(--element-s--height); } .calendar-label { flex: 1; text-align: center; font-size: var(--font-size-m); line-height: var(--element-m--line-height); color: var(--font-uno--color); } .calendar-nav { display: inline-flex; align-items: center; justify-content: center; width: var(--element-s--height); height: var(--element-s--height); border: none; background-color: transparent; color: var(--font-uno--color); border-radius: var(--radius-xs); font-size: var(--font-size-m); line-height: var(--element-s--line-height); cursor: pointer; & .icon { width: var(--element-s--icon-size); height: var(--element-s--icon-size); } &:hover { background-color: var(--bg-dos--color-hover); } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } } .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, var(--calendar-cell-size)); gap: var(--calendar-gap); } .calendar-weekday { display: inline-flex; align-items: center; justify-content: center; height: var(--element-s--height); font-size: var(--font-size-s); line-height: var(--element-s--line-height); color: var(--font-cinco--color); } .calendar-day { display: inline-flex; align-items: center; justify-content: center; width: var(--calendar-cell-size); height: var(--calendar-cell-size); padding: 0; border: none; background-color: transparent; color: var(--font-uno--color); font-size: var(--font-size-s); line-height: var(--element-s--line-height); border-radius: var(--radius-xs); cursor: pointer; transition: background-color var(--duration-fast); &.is-outside { color: var(--font-siete--color); } &.is-today { font-weight: 500; box-shadow: inset 0 0 0 var(--px-1) var(--border-dos--color); } &.is-selected { background-color: var(--bg-invert--color); color: var(--font-invert--color); box-shadow: none; &:hover { background-color: var(--bg-invert--color-hover); } } &:not(.is-selected):hover { background-color: var(--bg-dos--color-hover); } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } } @supports not selector(:focus-visible) { .calendar-nav:focus, .calendar-day:focus { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } } .checkbox-wrapper { display: flex; flex-direction: column; gap: var(--px-4); width: fit-content; max-width: 100%; } .checkbox-wrapper-inline { display: inline-flex; width: auto; } .checkbox { --checkbox--size: var(--control-checkbox--size); --checkbox--icon-size: var(--checkbox--size); display: flex; align-items: center; gap: var(--control--label-gap); min-height: var(--control--hit-area-min); min-width: var(--control--hit-area-min); padding: var(--control--hit-padding); width: fit-content; max-width: 100%; cursor: pointer; user-select: text; font-size: var(--element-m--font-size); color: var(--font-uno--color); &:has(.checkbox-input:disabled) { cursor: not-allowed; color: var(--font-disabled--color); } } .checkbox-s { --checkbox--size: var(--px-14); font-size: var(--element-s--font-size); } .checkbox-l { --checkbox--size: var(--px-20); font-size: var(--element-l--font-size); } .checkbox-contrast { --control--checked-bg: var(--control--contrast-bg); --control--checked-bg-hover: var(--control--contrast-bg-hover); --control--checked-mark-color: var(--control--contrast-mark-color); } .checkbox-input { position: absolute; opacity: 0; inline-size: var(--px-1); block-size: var(--px-1); margin: 0; padding: 0; } .checkbox-control { position: relative; display: flex; align-items: center; justify-content: center; inline-size: var(--checkbox--size); block-size: var(--checkbox--size); flex-shrink: 0; border-radius: var(--element--border-radius); outline: solid var(--control--border-width) var(--control--border-color); outline-offset: var(--control--rest-outline-offset); background-color: transparent; color: var(--control--mark-color); transition: var(--motion-transition-interactive-fast), var(--motion-transition-outline-fast); } .checkbox-control svg { opacity: 0; inline-size: var(--checkbox--icon-size); block-size: var(--checkbox--icon-size); fill: currentColor; stroke: none; transition: opacity var(--duration-fast); } .checkbox:hover .checkbox-input:not(:disabled):not(:checked) + .checkbox-control { outline-color: var(--control--border-color-hover); } .checkbox-input:checked + .checkbox-control { background-color: var(--control--checked-bg); outline-color: transparent; color: var(--control--checked-mark-color); } .checkbox:hover .checkbox-input:not(:disabled):checked + .checkbox-control { background-color: var(--control--checked-bg-hover); color: var(--control--checked-mark-color); } .checkbox-input:checked + .checkbox-control svg { opacity: 1; } .checkbox-input:focus-visible + .checkbox-control { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } .checkbox-input:checked:focus-visible + .checkbox-control { outline-offset: var(--control--focus-outline-offset-checked); } .checkbox-input:disabled + .checkbox-control { outline-color: var(--control--disabled-bg); color: var(--control--disabled-mark-color); } .checkbox-input:disabled:checked + .checkbox-control { background-color: var(--control--disabled-bg); outline-color: transparent; } .checkbox-label { display: inline-flex; align-items: center; flex-wrap: wrap; color: inherit; line-height: var(--checkbox--size); } .checkbox--error .checkbox-control { outline-color: var(--control--error-color); } .checkbox--error:hover .checkbox-input:not(:disabled):not(:checked) + .checkbox-control { outline-color: var(--control--error-color-hover); } .checkbox--error .checkbox-input:checked + .checkbox-control { background-color: var(--control--error-bg); } .checkbox--error:hover .checkbox-input:not(:disabled):checked + .checkbox-control { background-color: var(--control--error-bg-hover); } @supports not selector(:focus-visible) { .checkbox-input:focus + .checkbox-control { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } .checkbox-input:checked:focus + .checkbox-control { outline-offset: var(--control--focus-outline-offset-checked); } } .chip { --chip--height: var(--element-m--height); --chip--font-size: var(--element-m--font-size); --chip--line-height: var(--element-m--line-height); --chip--padding-inline-start: var(--element-m--padding-inline); --chip--padding-inline-end: var(--group-padding-s); --chip--remove-height: var(--element-m--line-height); --chip--remove-icon-size: var(--font-size-xs); display: inline-flex; align-items: center; gap: var(--group-gap-xs); width: fit-content; max-width: 100%; min-width: 0; min-height: var(--chip--height); padding-inline: var(--chip--padding-inline-start) var(--chip--padding-inline-end); border-radius: var(--radius-full); background-color: var(--bg-dos-soft--color); color: var(--font-uno--color); font-size: var(--chip--font-size); line-height: var(--chip--line-height); transition: background-color var(--duration-fast); -webkit-user-select: none; user-select: none; &:hover { background-color: var(--bg-dos-soft--color-hover); } &, & * { -webkit-user-select: none; user-select: none; } } .chip-s { --chip--height: var(--element-s--height); --chip--font-size: var(--element-s--font-size); --chip--line-height: var(--element-s--line-height); --chip--padding-inline-start: var(--element-s--padding-inline); --chip--remove-height: var(--element-s--line-height); } .chip-label { min-width: 0; max-inline-size: var(--px-240); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-interactive { cursor: pointer; } .chip-label-button { display: inline-flex; align-items: center; min-width: 0; padding: 0; border: 0; appearance: none; background: transparent; color: inherit; font: inherit; line-height: inherit; cursor: pointer; &:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--element--focus-outline-color); } } @supports not selector(:focus-visible) { .chip-label-button:focus { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--element--focus-outline-color); } } .chip-remove { --btn--height: var(--chip--remove-height); --btn--icon-size: var(--chip--remove-icon-size); flex-shrink: 0; } .chip-remove.btn-icon-only { width: var(--chip--remove-height); min-width: var(--chip--remove-height); } .clipboard-copy-buffer { position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--px-1); block-size: var(--px-1); opacity: 0; pointer-events: none; } /* Collapsible section */ .collapsible-section { --collapsible-section-title--font-size: var(--font-size-xl); --collapsible-section-title--line-height: var(--line-height-l); --collapsible-section-title--gap: var(--group-gap-m); --collapsible-section-icon--size: calc(var(--collapsible-section-title--font-size) * 0.82); --collapsible-section-title--offset: calc(var(--collapsible-section-icon--size) + var(--collapsible-section-title--gap)); width: 100%; } .collapsible-section-header { width: 100%; } .collapsible-section-heading { margin: 0; } .collapsible-section-toggle { appearance: none; max-width: 100%; display: inline-grid; grid-template-columns: var(--collapsible-section-icon--size) minmax(0, 1fr); align-items: center; column-gap: var(--collapsible-section-title--gap); padding: 0; border: 0; background: transparent; color: var(--font-uno--color); font: inherit; text-align: start; cursor: pointer; } .collapsible-section-toggle:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } @supports not selector(:focus-visible) { .collapsible-section-toggle:focus { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } } .collapsible-section-title { min-width: 0; max-width: 100%; font-size: var(--collapsible-section-title--font-size); line-height: var(--collapsible-section-title--line-height); font-weight: 600; overflow-wrap: anywhere; transition: color var(--duration-normal) ease-out; } .collapsible-section-s { --collapsible-section-title--font-size: var(--font-size-l); --collapsible-section-title--line-height: var(--line-height-m); } .collapsible-section-l { --collapsible-section-title--font-size: var(--font-size-xxl); --collapsible-section-title--line-height: var(--line-height-xl); } .collapsible-section-icon { display: inline-flex; width: var(--collapsible-section-icon--size); height: var(--collapsible-section-icon--size); color: var(--font-siete--color); transform: translateY(0.08em); transition: transform var(--duration-normal) ease-out, color var(--duration-normal) ease-out; } .collapsible-section-toggle:hover .collapsible-section-icon, .collapsible-section-toggle:focus-visible .collapsible-section-icon { color: var(--font-uno--color); } .collapsible-section-toggle[aria-expanded="true"] .collapsible-section-icon { color: var(--font-success--color); } .collapsible-section-toggle[aria-expanded="true"] .collapsible-section-title { color: var(--font-success--color); } .collapsible-section-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: var(--element--icon-stroke-width); } .collapsible-section-toggle[aria-expanded="false"] .collapsible-section-icon { transform: translateY(0.08em) rotate(-90deg); } .collapsible-section-body { width: 100%; display: flex; flex-direction: column; gap: var(--block-gap-m); padding-inline-start: var(--collapsible-section-title--offset); } .collapsible-section-body[hidden] { display: none; } /* Shell */ .detail-card { position: relative; width: min(100%, 90rem); flex: 1 1 auto; min-height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header" "main" "footer"; gap: 0; padding: 0; background-color: var(--bg-surface-1); border-radius: var(--px-3) var(--px-16) var(--px-3) var(--px-3); overflow: hidden; /* exception: DESIGN_PRINCIPLES §4 — shadow preserved from prior implementation */ box-shadow: var(--shadow-l); } /* Aside layout */ .detail-card:has(> .detail-card-aside:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); grid-template-areas: "header header" "main aside" "footer footer"; } /* Main */ .detail-card-main { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "title" "body"; row-gap: clamp(var(--px-24), 4cqi, var(--px-52)); margin-block-start: clamp(var(--px-24), 4cqi, var(--px-60)); padding-block: var(--px-8) max(var(--px-32), 6svh); padding-inline: clamp(var(--px-24), 2.8cqi, var(--px-40)) clamp(var(--px-20), 1.7cqi, var(--px-24)); min-width: 0; min-height: 0; } .detail-card-main:has(> .detail-card-after-title) { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "title" "after-title" "body"; row-gap: var(--block-gap-m); } .detail-card-main:has(> .detail-card-after-title) > .detail-card-body { margin-block-start: clamp(var(--px-16), 3cqi, var(--px-40)); } /* Title */ .detail-card-title-stack { grid-area: title; display: flex; flex-direction: column; align-items: flex-start; gap: var(--group-gap-m); min-width: 0; } .detail-card-before-title { max-width: var(--px-800); } .detail-card-context-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--group-gap-s); min-width: 0; } .detail-card-context-controls > * { min-width: 0; } .detail-card-after-title { grid-area: after-title; max-width: 100%; min-width: 0; } .detail-title { grid-area: title; max-width: 100%; padding: var(--px-4) var(--px-8); margin: calc(var(--px-4) * -1) calc(var(--px-8) * -1); margin-right: var(--px-4); border-radius: var(--radius-s); font-size: clamp(var(--px-32), 5cqi, var(--px-56)); line-height: 1.1; font-weight: 800; word-break: break-word; letter-spacing: -0.015em; &[contenteditable]:empty::before { content: attr(data-placeholder); color: var(--element--placeholder-color); } } /* Aside */ .detail-card-aside { grid-area: aside; position: sticky; top: var(--block-gap-m); align-self: start; max-height: calc(100svh - var(--app-header-height) - var(--px-96)); } /* Aside hidden */ .detail-card-aside[hidden] { display: none; } /* Footer */ .detail-actions { grid-area: footer; padding-top: var(--block-gap-m); } /* Panel layout */ .aside-panel-body .detail-card:has(> .detail-card-aside:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "header" "aside" "main" "footer"; } /* Panel aside */ .aside-panel-body .detail-card-aside { position: static; max-height: min(22rem, calc(100svh - var(--app-header-height) - var(--px-48))); } /* Mobile */ @container detail-surface (max-width: 54rem) { .detail-card:has(> .detail-card-aside:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "header" "aside" "main" "footer"; } .detail-card-aside { position: static; } } /* Body */ .detail-card-body { grid-area: body; flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* Header */ .detail-card-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; height: var(--px-40); padding-inline: var(--px-12); font-size: var(--text-m--font-size); line-height: var(--text-m--line-height); /* Metadata */ .detail-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--group-gap-m); flex: 1 1 auto; min-width: 0; overflow: hidden; } .detail-card-back { color: inherit; } .detail-meta-items { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--group-gap-l); flex: 1 1 auto; min-width: 0; overflow: hidden; } .detail-card-key, .task-detail-key { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Created meta */ .detail-card-created, .task-detail-created { display: inline-flex; align-items: center; min-width: 0; gap: var(--group-gap-m); } .task-detail-created { align-items: center; gap: var(--px-6); } .detail-card-created .identity, .task-detail-created .identity { flex: 0 1 auto; } .detail-card-created .identity-title, .task-detail-created .identity-title { font-size: inherit; line-height: inherit; } .task-detail-created-date { font-size: inherit; line-height: inherit; } .detail-card-created .identity-title, .task-detail-created .identity-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-date-compact { display: none; } /* Actions */ .detail-card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--group-gap-m); } .detail-card-open-full { --btn--color: var(--font-primary--color); --btn--icon-color: var(--font-primary--color); } .detail-card-open-full:is(:hover, :active, :focus-visible) { --btn--color: var(--font-primary--color-hover); --btn--icon-color: var(--font-primary--color-hover); } .detail-card-open-full[data-controller~="aside-return"] { display: none; } .detail-card-open-full[data-controller~="aside-return"].is-available { display: inline-flex; } } @container detail-surface (max-width: 32rem) { .detail-card-header { .doc-detail-created-label, .file-detail-created-label { display: none; } } } @container detail-surface (max-width: 28rem) { .detail-card-header { .detail-date-full { display: none; } .detail-date-compact { display: inline; } } } /* Params slot */ .detail-card-main:has(> .detail-card-params) { grid-template-columns: minmax(0, 1fr) minmax( var(--px-200), clamp(var(--px-200), 26cqi, var(--px-400)) ); grid-template-areas: "title title" "body params"; column-gap: var(--px-40); } /* Params */ .detail-card-params { grid-area: params; align-self: start; justify-self: end; width: min(100%, var(--px-400)); } /* Strip */ .detail-param-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--group-gap-s); min-width: 0; margin-block-end: var(--px-12); } /* Param */ .detail-param { flex-shrink: 0; } @container detail-surface (max-width: 64rem) { .detail-card-main:has(> .detail-card-params) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "title" "params" "body"; } .detail-card-params { justify-self: stretch; width: 100%; } } .editable-title[contenteditable] { --editable-title-selection-bg: var(--bg-primary-soft--color); --editable-title-selection-color: var(--font-primary--color); outline: none; &::selection { background-color: var(--editable-title-selection-bg); color: var(--editable-title-selection-color); } &::-moz-selection { background-color: var(--editable-title-selection-bg); color: var(--editable-title-selection-color); } } :root[data-theme="dark"] .editable-title[contenteditable] { --editable-title-selection-color: var(--font-uno--color); } /* Entity color */ :root { --entity-white-inset-shadow: inset 0 0 0 var(--px-1) var(--entity-color-white--edge-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color] { --entity-color--bg-color: var(--entity-palette-0--bg-color); --entity-color--text-color: var(--entity-palette-0--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="0"] { --entity-color--bg-color: var(--entity-palette-0--bg-color); --entity-color--text-color: var(--entity-palette-0--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="1"] { --entity-color--bg-color: var(--entity-palette-1--bg-color); --entity-color--text-color: var(--entity-palette-1--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="2"] { --entity-color--bg-color: var(--entity-palette-2--bg-color); --entity-color--text-color: var(--entity-palette-2--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="3"] { --entity-color--bg-color: var(--entity-palette-3--bg-color); --entity-color--text-color: var(--entity-palette-3--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="4"] { --entity-color--bg-color: var(--entity-palette-4--bg-color); --entity-color--text-color: var(--entity-palette-4--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="5"] { --entity-color--bg-color: var(--entity-palette-5--bg-color); --entity-color--text-color: var(--entity-palette-5--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="6"] { --entity-color--bg-color: var(--entity-palette-6--bg-color); --entity-color--text-color: var(--entity-palette-6--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="7"] { --entity-color--bg-color: var(--entity-palette-7--bg-color); --entity-color--text-color: var(--entity-palette-7--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="8"] { --entity-color--bg-color: var(--entity-palette-8--bg-color); --entity-color--text-color: var(--entity-palette-8--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="9"] { --entity-color--bg-color: var(--entity-palette-9--bg-color); --entity-color--text-color: var(--entity-palette-9--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="10"] { --entity-color--bg-color: var(--entity-palette-10--bg-color); --entity-color--text-color: var(--entity-palette-10--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="11"] { --entity-color--bg-color: var(--entity-palette-11--bg-color); --entity-color--text-color: var(--entity-palette-11--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="12"] { --entity-color--bg-color: var(--entity-palette-12--bg-color); --entity-color--text-color: var(--entity-palette-12--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="13"] { --entity-color--bg-color: var(--entity-palette-13--bg-color); --entity-color--text-color: var(--entity-palette-13--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="14"] { --entity-color--bg-color: var(--entity-palette-14--bg-color); --entity-color--text-color: var(--entity-palette-14--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="15"] { --entity-color--bg-color: var(--entity-palette-15--bg-color); --entity-color--text-color: var(--entity-palette-15--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="16"] { --entity-color--bg-color: var(--entity-palette-16--bg-color); --entity-color--text-color: var(--entity-palette-16--text-color); } :where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="17"] { --entity-color--bg-color: var(--entity-palette-17--bg-color); --entity-color--text-color: var(--entity-palette-17--text-color); } .entity-color-surface[data-color] { background-color: var(--entity-color--bg-color); color: var(--entity-color--text-color); } /* exception: DP/no-visible-lines, DP/no-shadows — white entity surfaces need an inset edge by request. */ .entity-color-surface[data-color="17"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--entity-white-inset-shadow); pointer-events: none; z-index: 2; } .entity-hero-icon-nav { display: flex; align-items: center; gap: var(--group-gap-l); padding-block-start: var(--px-24); } .entity-hero-icon-nav-link { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--px-40); block-size: var(--px-40); color: var(--font-siete--color); text-decoration: none; transition: color var(--duration-fast) ease-out; & svg { transition: color var(--duration-fast) ease-out; } & .icon--stroke, & .icon--fill, & .icon--mixed { transition: color var(--duration-fast) ease-out; } &:hover { color: var(--font-dos--color); } &:active { color: var(--font-tres--color); } &.is-active { color: var(--font-uno--color); } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--outline-color); } } @supports not selector(:focus-visible) { .entity-hero-icon-nav-link:focus { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--outline-color); } } .detail-list { --detail-list-label-width: 8rem; display: grid; grid-template-columns: minmax(0, var(--detail-list-label-width)) minmax(0, 1fr); row-gap: 0; column-gap: var(--block-gap-xs); min-width: 0; min-height: 0; margin: 0; } .detail-list-label-equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .detail-list-row { display: contents; } .detail-list-label, .detail-list-value { display: flex; align-items: center; min-width: 0; min-height: var(--element-m--height); margin: 0; font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-list-label { color: var(--font-cuatro--color); } .detail-list-value { color: var(--font-uno--color); } .detail-list-value:has(.popover-shell) { overflow: visible; } .detail-list-value > * { min-width: 0; max-width: 100%; } .detail-list-value:has(.popover-shell) > * { overflow: visible; } .detail-list-value:not(:has(.popover-shell)) > :not(.popover) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-list-value .task-param-control { --task-param-control--height: var(--element-m--height); --task-param-control--font-size: var(--element-m--font-size); --task-param-control--line-height: var(--element-m--line-height); max-width: 100%; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .detail-list-divided { /* exception: DP/no-visible-lines — requested row separators for Project access detail table. */ background-image: linear-gradient( to bottom, var(--border-uno--color) 0 var(--px-1), transparent var(--px-1) ), repeating-linear-gradient( to bottom, transparent 0 calc(var(--element-m--height) - var(--px-1)), var(--border-uno--color) calc(var(--element-m--height) - var(--px-1)) var(--element-m--height) ); } @media (max-width: 520px) { .detail-list { grid-template-columns: 1fr; gap: var(--group-gap-xs); } } /* Entity page */ .entity-page { max-width: var(--page-max-wide); padding-bottom: var(--page-gap-l); } .entity-section { width: 100%; } .entity-action-section { gap: var(--block-gap-s); } .entity-action-section > p, .entity-action-section > .collapsible-section-body > p { margin: 0; } .entity-action-section > footer, .entity-action-section > .collapsible-section-body > footer { margin-top: var(--block-gap-s); } .entity-content-nav { --entity-content-nav--rule-color: var(--border-dos--color); width: 100%; padding-bottom: var(--block-gap-s); /* exception: DP/no-visible-lines — user requested a full-width divider below entity tabs. */ border-bottom: var(--element--border-width) solid var(--entity-content-nav--rule-color); } .entity-content-nav[data-color] { display: flex; align-items: center; min-block-size: var(--element-m--height); padding: var(--group-padding-s) var(--block-padding-m); border-bottom: 0; border-radius: 999em; background-color: var(--entity-color--bg-color); color: var(--entity-color--text-color); } .entity-page:has(> .entity-content-nav[data-color]) > .entity-hero .entity-hero-header { margin-bottom: 0; } .entity-page:has(> .entity-content-nav[data-color]) > .entity-content-nav[data-color] { margin-block-start: calc(-1 * var(--block-gap-s)); } .entity-content-nav[data-color] .tabs-tab, .entity-content-nav[data-color] .tabs-tab:hover:not(:disabled):not(.is-disabled), .entity-content-nav[data-color] .tabs-tab:active:not(:disabled):not(.is-disabled), .entity-content-nav[data-color] .tabs-tab.is-active { color: var(--entity-color--text-color); } .entity-content-nav[data-color] .tabs-tab:disabled, .entity-content-nav[data-color] .tabs-tab.is-disabled, .entity-content-nav[data-color] .tabs-tab[aria-disabled="true"] { color: color-mix(in srgb, var(--entity-color--text-color) 45%, transparent); } .entity-content-nav[data-color] .tabs-tab:focus-visible { outline-color: currentColor; } .entity-content { width: 100%; display: flex; flex-direction: column; gap: var(--section-gap-xl); } /* Entity hero */ .entity-hero { display: flex; flex-direction: column; gap: var(--block-gap-m); text-align: start; } .entity-hero-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--block-gap-l); } .entity-hero-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--block-gap-l); width: 100%; } .entity-hero-title-row--with-meta { align-items: center; } .entity-hero-title-wrap { display: flex; flex-direction: column; gap: var(--group-gap-xs); min-width: 0; align-items: flex-start; } .entity-hero-title-main { display: flex; align-items: center; gap: var(--block-gap-m); min-width: 0; } .entity-hero-title-block { display: flex; flex-direction: column; gap: var(--group-gap-xs); min-width: 0; } .entity-hero-header-trailing { flex: 0 0 auto; } .entity-hero-title-row .entity-title { min-width: 0; } .entity-hero-title-wrap .entity-title { margin: 0; } .entity-hero-meta { margin-top: 0; } .entity-title { --entity-title--font-size: clamp(var(--px-48), 12vw, var(--px-64)); --entity-title--line-ratio: 1.1875; --entity-title--line-size: calc(var(--entity-title--font-size) * var(--entity-title--line-ratio)); --entity-hero-avatar--size: var(--px-64); max-width: 100%; font-family: var(--font-family-title); font-size: var(--entity-title--font-size); line-height: var(--entity-title--line-ratio); font-weight: 600; overflow-wrap: anywhere; letter-spacing: 0; } .entity-title-text { letter-spacing: -0.02em; font-size: var(--entity-title--font-size); } .entity-hero-avatar-frame { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--entity-hero-avatar--size); block-size: var(--entity-title--line-size); margin-inline-end: 0.3em; vertical-align: top; } .entity-title .avatar.entity-hero-avatar { --avatar--height: var(--entity-hero-avatar--size); transform: translateY(var(--px-2)); } .entity-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--block-gap-xs); color: var(--font-dos--color); font-size: var(--font-size-m); line-height: var(--line-height-m); } .entity-meta-item { display: inline-block; min-width: 0; overflow-wrap: anywhere; } .entity-home-page.entity-page { height: auto; min-height: calc(100svh - var(--app-header-height)); max-width: min(100%, 1600px); padding: var(--block-padding-l) var(--block-padding-m); overflow-y: visible; } .entity-home-title { --entity-title--font-size: clamp(var(--px-36), 6vw, var(--px-56)); --entity-title--line-ratio: 1.15; --entity-hero-avatar--size: var(--px-64); } .entity-home-hero .entity-hero-title-row--with-meta { align-items: center; } .entity-home-hero .entity-hero-title-wrap { min-height: max(var(--entity-title--line-size), var(--entity-hero-avatar--size)); justify-content: center; } .entity-home-hero .entity-hero-meta { color: var(--font-cuatro--color); font-size: var(--font-size-l); line-height: var(--line-height-s); gap: 0; } .entity-home-hero .entity-hero-avatar-frame { margin-inline-end: 0; } .entity-home-hero .entity-meta-item { color: var(--font-cuatro--color); font-size: var(--font-size-m); } @media (max-width: 760px) { .entity-hero-title-row { flex-wrap: wrap; } } .filter-presets-kit-surface { display: flex; flex-direction: column; gap: var(--block-gap-m); width: min(100%, 46rem); padding: var(--block-padding-m); border-radius: var(--block-border-radius-m); background: var(--bg-uno--color); } .filter-presets-kit-toolbar { align-items: flex-start; h4 { margin: 0; font-size: var(--font-size-l); line-height: var(--line-height-l); color: var(--font-uno--color); } } .filter-presets-kit-actions { flex-wrap: wrap; justify-content: flex-end; } .task-filter-summary { display: flex; align-items: flex-start; justify-content: center; inline-size: 100%; block-size: var(--px-44); min-width: 0; overflow: hidden; } .task-filter-summary.is-sizing { transition: block-size var(--duration-slow) ease-out; } .task-filter-summary.is-empty { display: none; } .task-filter-summary.is-collapsed { block-size: 0; } .task-filter-summary.is-leaving { pointer-events: none; } .is-task-filter-summary-continuing .task-filter-summary, .task-filter-summary.is-continuing { block-size: var(--px-44); transition: none; } .task-filter-summary-selection { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; } .task-filter-summary-badges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--group-gap-xs); min-width: 0; } .task-filter-summary.is-entering .task-filter-summary-badges .chip { opacity: 0; transform: translateY(calc(-1 * var(--px-2))) scale(0.98); } .task-filter-summary.is-entering.is-badges-visible .task-filter-summary-badges .chip { opacity: 1; transform: translateY(0) scale(1); } .task-filter-summary.is-leaving .task-filter-summary-badges .chip { opacity: 0; transform: translateY(calc(-1 * var(--px-2))) scale(0.98); } .is-task-filter-summary-continuing .task-filter-summary-badges .chip, .task-filter-summary.is-continuing .task-filter-summary-badges .chip { opacity: 1; transform: none; transition: none; } .task-filter-summary-badges .chip { transform-origin: center; transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease; } .filter-empty-state { inline-size: 100%; text-align: center; } .filter-popover { --popover-surface-min-width: min(32rem, calc(100vw - (var(--container-gutter-s) * 2))); --popover-surface-max-width: min(32rem, calc(100vw - (var(--container-gutter-s) * 2))); --popover-surface-padding: 0; width: var(--popover-surface-max-width); } .filter-popover-standalone { width: min(100%, var(--popover-surface-max-width)); border-radius: var(--block-border-radius-m); background: var(--bg-surface-1-elevated); box-shadow: var(--shadow-l); } .filter-popover-form { display: flex; flex-direction: column; } .filter-popover-body { display: flex; flex-direction: column; gap: var(--block-gap-s); min-block-size: 0; padding: var(--block-padding-m); } .filter-popover-section { --filter-popover-section-gap: var(--px-12); --filter-popover-section-icon-size: var(--element-l--icon-size); display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; gap: var(--filter-popover-section-gap); } .filter-popover-section[open] { margin-block-end: var(--block-gap-m); } .filter-popover-section[open]:last-child { margin-block-end: unset; } .filter-popover-section-summary { display: inline-flex; align-items: center; gap: var(--group-gap-xs); width: fit-content; max-width: 100%; color: var(--font-uno--color); cursor: pointer; -webkit-user-select: none; user-select: none; } .filter-popover-section-summary::marker { content: ""; } .filter-popover-section-summary::-webkit-details-marker { display: none; } .filter-popover-section-summary:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: var(--outline-offset); } .filter-popover-section-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inset-block-start: 0.08em; width: var(--filter-popover-section-icon-size); height: var(--filter-popover-section-icon-size); color: var(--font-siete--color); transform: rotate(-90deg); transition: color var(--duration-fast); svg { display: block; width: var(--filter-popover-section-icon-size); height: var(--filter-popover-section-icon-size); color: currentColor; } } .filter-popover-section[open] .filter-popover-section-icon { inset-block-start: 0.1em; transform: rotate(0deg); } .filter-popover-section-summary:hover .filter-popover-section-icon, .filter-popover-section-summary:focus-visible .filter-popover-section-icon { color: var(--font-cinco--color); } .filter-popover-section-content { min-width: 0; } .filter-popover-section-title { color: var(--font-uno--color); font-size: var(--font-size-xl); font-weight: 600; line-height: var(--line-height-m); } .filter-popover-option-list { display: flex; flex-direction: column; gap: var(--block-gap-s); min-width: 0; } .filter-popover-option-list-inline { flex-direction: row; flex-wrap: wrap; } .filter-popover-scroll-list { gap: var(--px-1); max-block-size: 185px; overflow-y: auto; padding-block: var(--px-4); padding-inline-end: var(--px-4); scrollbar-gutter: stable; } .filter-popover-option-row { width: 100%; } .filter-popover-option-row .radio, .filter-popover-option-checkbox { width: 100%; min-width: 0; justify-content: space-between; padding: calc(var(--control--hit-padding) + var(--px-2)); border-radius: var(--block-border-radius-m); transition: background-color var(--duration-fast); -webkit-user-select: none; user-select: none; } .filter-popover-option-row .radio:hover, .filter-popover-option-row .radio:focus-within, .filter-popover-option-checkbox:hover, .filter-popover-option-checkbox:focus-within { background-color: var(--element--bg-transp--color-hover); } .filter-popover-option-row .radio:has(.radio-input:checked), .filter-popover-option-checkbox:has(.checkbox-input:checked) { background-color: color-mix(in srgb, var(--outline-uno--color) 8%, transparent); } .filter-popover-option-checkbox .checkbox-control { order: 2; } .filter-popover-option-checkbox .checkbox-label { order: 1; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } .filter-popover-option-checkbox .checkbox-label > span { display: block; min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-status-badge-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--block-gap-xs); min-width: 0; } .filter-status-badge { display: inline-flex; align-items: center; gap: var(--px-4); min-height: var(--element-m--height); padding-inline: var(--px-10) var(--px-12); padding-bottom: 0.05em; /* оптическая компенсация */ border-radius: var(--radius-full); background: transparent; color: var(--font-tres--color); font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); outline: var(--px-1) solid var(--border-uno--color); outline-offset: var(--px-n1); cursor: pointer; -webkit-user-select: none; user-select: none; &, & * { -webkit-user-select: none; user-select: none; } &:has(.filter-status-badge-input:checked) { outline: var(--px-2) solid var(--outline-uno--color); outline-offset: var(--px-n2); } &:hover { outline-color: color-mix(in srgb, var(--outline-uno--color) 50%, transparent); } &:has(.filter-status-badge-input:focus-visible) { outline-width: var(--px-2); outline-style: solid; outline-color: var(--outline-color); outline-offset: var(--px-n2); } } .filter-status-badge-input { position: absolute; opacity: 0; inline-size: var(--px-1); block-size: var(--px-1); margin: 0; padding: 0; } .filter-status-badge-icon { display: flex; align-items: center; justify-content: center; width: var(--element-s--icon-size); height: var(--element-s--icon-size); flex-shrink: 0; svg { display: block; width: var(--element-s--icon-size); height: var(--element-s--icon-size); color: currentColor; } } .filter-status-badge-label { min-width: 0; } .filter-radio-badge-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--block-gap-xs); min-width: 0; } .filter-radio-badge { display: inline-flex; align-items: center; min-height: var(--element-m--height); padding-inline: var(--px-12); padding-bottom: 0.05em; /* оптическая компенсация */ border-radius: var(--radius-full); background: transparent; color: var(--font-tres--color); font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); outline: var(--px-1) solid var(--border-uno--color); outline-offset: var(--px-n1); cursor: pointer; -webkit-user-select: none; user-select: none; &, & * { -webkit-user-select: none; user-select: none; } &:has(.filter-radio-badge-input:checked) { outline: var(--px-2) solid var(--outline-uno--color); outline-offset: var(--px-n2); } &:hover { outline-color: color-mix(in srgb, var(--outline-uno--color) 50%, transparent); } &:has(.filter-radio-badge-input:focus-visible) { outline-width: var(--px-2); outline-style: solid; outline-color: var(--outline-color); outline-offset: var(--px-n2); } } .filter-radio-badge-input { position: absolute; opacity: 0; inline-size: var(--px-1); block-size: var(--px-1); margin: 0; padding: 0; } .filter-radio-badge-label { min-width: 0; } .filter-popover-person-picker { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; outline: solid var(--element--border-width) var(--element-field--border-color); outline-offset: var(--element-field--rest-outline-offset); border-radius: var(--block-border-radius-m); transition: outline-color var(--duration-fast); &:hover { outline-color: var(--element-field--border-color-hover); } } .filter-popover-person-picker:has(.filter-popover-person-search-input:focus-visible) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } .filter-popover-person-search.input-wrapper { --input--height: 20px; padding: var(--block-gap-s); padding-block: var(--px-10); /* lint-allow: no-border — user-requested separator between search and person list */ border-bottom: var(--px-1) solid var(--border-uno--color); } .filter-popover-person-search .input { /* lint-allow: field-chrome-none — the enclosing person picker owns the field boundary */ outline: none; padding-inline: var(--px-4); } .filter-popover-person-search .input-icon { left: var(--px-4); color: var(--font-siete--color); } .filter-popover-person-search .input-with-icon { padding-inline-start: calc(var(--px-4) + var(--input--icon-size) + var(--element--gap)); } .filter-popover-person-search .input:hover:not(:disabled), .filter-popover-person-search .input:focus-visible:not(:disabled) { /* lint-allow: field-chrome-none — focus is rendered on the enclosing person picker */ outline: none; } .filter-popover-person-list { gap: var(--px-1); max-block-size: 185px; overflow-y: auto; padding-block: var(--px-8); padding-inline: var(--block-gap-s) var(--px-4); scrollbar-gutter: stable; } .filter-popover-person-option { width: 100%; } .filter-popover-person-checkbox { width: 100%; min-width: 0; justify-content: space-between; padding: calc(var(--control--hit-padding) + var(--px-2)); border-radius: var(--block-border-radius-m); transition: background-color var(--duration-fast); -webkit-user-select: none; user-select: none; &, & :not(.checkbox-input) { -webkit-user-select: none; user-select: none; } &:hover, &:focus-within { background-color: var(--element--bg-transp--color-hover); } &:has(.checkbox-input:checked) { background-color: color-mix(in srgb, var(--outline-uno--color) 8%, transparent); } } .filter-popover-person-checkbox .checkbox-control { order: 2; } .filter-popover-person-checkbox .checkbox-input:focus + .checkbox-control { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } .filter-popover-person-checkbox .checkbox-input:checked:focus + .checkbox-control { outline-offset: var(--control--focus-outline-offset-checked); } .filter-popover-person-checkbox .checkbox-label { order: 1; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } .filter-popover-person-checkbox .checkbox-label > span { display: block; min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-popover-person-checkbox .identity { width: 100%; max-inline-size: 100%; } .filter-popover-footer { flex-shrink: 0; padding: var(--block-padding-m); padding-top: var(--px-8); border-radius: 0 0 var(--block-border-radius-m) var(--block-border-radius-m); -webkit-user-select: none; user-select: none; } .filter-popover-footer-actions { justify-content: flex-end; } .filter-popover-footer-clear { justify-content: flex-start; } @media (max-width: 40rem) { .filter-presets-kit-toolbar { align-items: stretch; flex-direction: column; } .filter-presets-kit-actions { justify-content: flex-start; } .filter-popover-footer { align-items: stretch; flex-direction: column; } } .icon { width: 100%; height: 100%; display: block; } .icon--fill { stroke: none; fill: currentColor; } .icon--stroke { stroke: currentColor; fill: none; stroke-width: var(--element--icon-stroke-width); } .icon--mixed { stroke: currentColor; fill: currentColor; } .identity { --identity--gap: var(--px-6); --identity--line-height: var(--text-m--line-height); --identity-title--font-size: var(--text-m--font-size); --identity-subtitle--font-size: var(--px-13); --identity-avatar--size: var(--identity--line-height); display: flex; align-items: center; flex-wrap: nowrap; gap: var(--identity--gap); min-width: 0; } .identity-text { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; line-height: var(--identity--line-height); } .identity-title, .identity-subtitle, .identity-meta { min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .identity-meta { color: var(--font-cuatro--color); font-size: var(--identity-subtitle--font-size); font-weight: 400; line-height: var(--identity--line-height); } .identity-title { color: var(--identity-title--color); font-size: var(--identity-title--font-size); font-weight: 400; line-height: var(--identity--line-height); } .identity-subtitle { color: var(--identity-subtitle--color); font-size: var(--identity-subtitle--font-size); font-weight: 400; line-height: var(--identity--line-height); } .identity-xs { --identity--gap: var(--px-5); --identity-title--font-size: var(--px-12); --identity-avatar--size: var(--px-18); } .identity-s { --identity--gap: var(--px-5); --identity--line-height: var(--text-s--line-height); --identity-title--font-size: var(--text-s--font-size); } .identity-m { --identity--gap: var(--px-8); --identity--line-height: var(--text-m--line-height); --identity-title--font-size: var(--text-m--font-size); } .identity-m:has(.identity-subtitle, .identity-meta) { --identity--gap: var(--px-8); --identity-avatar--size: var(--px-36); } .identity-l { --identity--gap: var(--px-8); --identity--line-height: var(--text-l--line-height); --identity-title--font-size: var(--text-l--font-size); } .identity-inline { --identity--gap: var(--px-5); display: inline-flex; vertical-align: top; } .identity-m.identity-inline { --identity--gap: var(--px-7); } .identity .avatar { --avatar--size: var(--identity-avatar--size); --avatar--line-height: var(--identity-avatar--size); } .identity .avatar-fit-line { --avatar--line-height: var(--identity--line-height); } .identity-mono { font-family: var(--font-family-mono); } .input-wrapper { --input--height: var(--element-m--height); --input--icon-size: var(--element-m--icon-size); --input--padding-inline: var(--element-m--padding-inline); --input--font-size: var(--element-m--font-size); --input--line-height: var(--element-m--line-height); display: flex; flex-direction: column; width: 100%; gap: 0; } .input-wrapper-s { --input--height: var(--element-s--height); --input--icon-size: var(--element-s--icon-size); --input--padding-inline: var(--element-s--padding-inline); --input--font-size: var(--element-s--font-size); --input--line-height: var(--element-s--line-height); } .input-wrapper-l { --input--height: var(--element-l--height); --input--icon-size: var(--element-l--icon-size); --input--padding-inline: var(--element-l--padding-inline); --input--font-size: var(--element-l--font-size); --input--line-height: var(--element-l--line-height); } .input-wrapper-inline { width: auto; } .input-wrapper-measure-s { max-width: var(--px-180); } .input-wrapper-measure-m { max-width: var(--px-400); } .input-wrapper-measure-l { max-width: var(--px-640); } .input-wrapper-measure-fill { max-width: none; } .input { display: block; width: 100%; height: var(--input--height); padding-inline: var(--input--padding-inline); font-size: var(--input--font-size); line-height: var(--input--line-height); font-weight: 400; &::placeholder { color: var(--element--placeholder-color); font-weight: 400; } &:disabled::placeholder { color: var(--font-disabled--color); } } .input-container { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: var(--input--padding-inline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--input--icon-size); height: var(--input--icon-size); color: var(--font-tres--color); pointer-events: none; } .input-icon svg, .input-icon .input-icon-svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: var(--element--icon-stroke-width); } .input-with-icon { padding-left: calc(var(--input--padding-inline) + var(--input--icon-size) + var(--element--gap)); } .input-rounded { border-radius: var(--radius-full); } .input-wrapper-on-danger { .input-label, .input-description { color: var(--font-on-danger-muted--color); } .field-label-required { color: var(--font-on-danger--color); } .input { color: var(--font-on-danger--color); caret-color: var(--font-on-danger--color); outline-color: var(--border-on-danger--color); &:hover:not(:disabled) { outline-color: var(--border-on-danger--color-hover); } &:focus-visible:not(:disabled) { outline-color: var(--border-on-danger--color-active); } &::placeholder { color: var(--font-on-danger-subtle--color); } } } @supports not selector(:focus-visible) { .input-wrapper-on-danger .input:focus:not(:disabled) { outline-color: var(--border-on-danger--color-active); } } .modal.invitation-modal-dialog { --modal-max-width: 56rem; --modal-max-height: min(88svh, 44rem); } .modal.invitation-modal-dialog-result { --modal-max-width: 32rem; --modal-max-height: min(80svh, 18rem); } .invitation-check-form, .invitation-review-form { gap: var(--block-gap-l); } .invitation-upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--group-gap-m); } .invitation-upload-label { color: var(--font-muted--color); font-size: var(--font-size-s); line-height: var(--line-height-s); } .invitation-upload-field { width: auto; .input-container { display: block; } .input { width: auto; height: auto; padding: 0; /* lint-allow: field-chrome-none — the file input restores shared focus chrome below */ outline: none; border-radius: 0; background: transparent; font-size: var(--font-size-s); line-height: var(--line-height-s); } .input:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); border-radius: var(--element--border-radius); } } .invitation-body-grid { display: grid; gap: var(--block-gap-l); min-width: 0; } .invitation-body-grid-with-role { grid-template-columns: minmax(0, 1fr) minmax(var(--px-180), var(--px-240)); align-items: start; } .invitation-entry-column { display: grid; gap: var(--block-gap-l); min-width: 0; } .invitation-review-section h4 { margin: 0; } .invitation-role-stack { display: grid; gap: var(--group-gap-xs); width: min(var(--px-240), 100%); min-width: var(--px-180); flex-shrink: 0; } .select-wrapper.invitation-role-select { width: 100%; min-width: 0; } .invitation-role-description { margin: 0; } .invitation-review-section { display: grid; gap: var(--group-gap-m); } .invitation-review-section h4 { font-size: var(--font-size-s); line-height: var(--line-height-s); color: var(--font-muted--color); } .invitation-chip-list { display: flex; flex-wrap: wrap; gap: var(--group-gap-s); } .invitation-review-chip { display: inline-flex; align-items: center; gap: var(--group-gap-xs); max-width: 100%; min-height: var(--element-s--height); padding-inline: var(--element-s--padding-inline); border-radius: var(--element-s--height); background: var(--bg-dos--color); font-size: var(--font-size-s); line-height: var(--line-height-s); } .invitation-chip-email, .invitation-chip-status, .invitation-skip-email, .invitation-skip-reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invitation-chip-email, .invitation-skip-email { color: var(--font-uno--color); } .invitation-chip-status, .invitation-skip-reason, .invitation-fix-reason { color: var(--font-muted--color); font-size: var(--font-size-s); line-height: var(--line-height-s); } .invitation-fix-list, .invitation-pending { display: grid; gap: var(--group-gap-m); } .invitation-pending-header h3 { margin: 0; font-size: var(--font-size-m); line-height: var(--line-height-m); } .invitation-pending-list { display: grid; gap: var(--block-gap-s); margin: 0; padding: 0; list-style: none; } .invitation-pending-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--group-gap-m); } .invitation-pending-main { min-width: 0; & > .badge { flex: none; } } .invitation-pending-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .invitation-pending-detail { min-width: 0; } .invitation-fix-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--group-gap-m); } .invitation-fix-input { min-width: 0; } .invitation-skip-list { display: grid; gap: var(--group-gap-s); margin: 0; padding: 0; list-style: none; } .invitation-skip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--group-gap-m); min-height: var(--element-m--height); padding-inline: var(--element-m--padding-inline); border-radius: var(--block-border-radius-m); background: var(--bg-dos--color); } .invitation-result { display: grid; gap: var(--block-gap-m); } .invitation-result p { margin: 0; } .invitation-pending-copy { display: grid; gap: var(--group-gap-xs); min-width: 0; } .invitation-pending-actions { justify-content: end; } .invitation-pending-action-form { margin: 0; } @media (max-width: 640px) { .invitation-body-grid-with-role, .invitation-fix-row, .invitation-skip-row, .invitation-pending-row { grid-template-columns: 1fr; align-items: start; } .invitation-role-stack { width: 100%; min-width: 0; } .invitation-pending-actions { justify-content: start; } } .lightbox { margin: 0; inline-size: 100svw; max-inline-size: 100svw; block-size: 100svh; max-block-size: 100svh; padding: var(--block-padding-l); background: transparent; overflow: hidden; } .lightbox::backdrop { background-color: rgb(0 0 0 / 0.85); } .lightbox[open] { display: flex; align-items: center; justify-content: center; } .lightbox-surface { position: relative; inline-size: 100%; block-size: 100%; display: flex; align-items: center; justify-content: center; } .lightbox-image { display: block; max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; user-select: none; } .lightbox-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; } /* Shared list picker modal */ .modal[data-controller~="list-picker"] { height: var(--modal-max-height); } .modal[data-controller~="list-picker"] .modal-surface { height: 100%; } .modal[data-controller~="list-picker"] .modal-body { overflow-y: auto; } .list-picker-scroll { flex: 1 1 auto; min-height: 0; overflow-y: visible; padding-inline-end: var(--px-12); -webkit-user-select: none; } .list-picker-empty { font-size: var(--font-size-s); color: var(--font-muted--color); } .list-picker-item { display: flex; align-items: center; justify-content: space-between; gap: var(--group-gap-s); min-width: 0; min-height: var(--element-m--height); padding-inline: var(--px-4); border-radius: var(--block-border-radius-s); transition: background-color var(--duration-fast) linear; &:hover, &:focus-within { background-color: var(--element--bg-transp--color-hover); } } .list-picker-item[hidden] { display: none; } .list-picker-item > .checkbox-wrapper { flex: 1 1 auto; min-width: 0; } .list-picker-item > .checkbox-wrapper .checkbox { min-width: 0; width: 100%; } .list-picker-item > .checkbox-wrapper .checkbox-label, .list-picker-item > .checkbox-wrapper .checkbox-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar + name variant: the label goes through shared/_field_label which wraps its text in an inner . Target that wrapper so avatar and name get a gap between them. */ .list-picker-item-with-avatar .checkbox-label > span { display: inline-flex; align-items: center; gap: var(--group-gap-s); } .list-picker-item-form { flex: 1 1 auto; min-width: 0; } .list-picker-item-button { display: flex; align-items: center; justify-content: space-between; gap: var(--group-gap-s); width: 100%; min-width: 0; padding: var(--control--hit-padding); border: 0; background: transparent; cursor: pointer; text-align: start; font: inherit; color: inherit; } .list-picker-item-button:hover .list-picker-item-title { color: var(--font-dos--color); } .list-picker-item-button:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--outline-color); border-radius: var(--block-border-radius-s); } .list-picker-item-title { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-picker-item-meta { flex-shrink: 0; font-size: var(--font-size-s); color: var(--font-muted--color); } .list-picker-submit-label { letter-spacing: -0.01em; } .modal { --modal-motion-scale-start: 0.95; --modal-max-width: 28rem; --modal-max-height: min(80svh, 36rem); --modal-viewport-gutter: var(--container-gutter-s); --modal-body-focus-gutter: calc(var(--element--focus-outline-width) + var(--element--focus-outline-offset)); width: min(calc(100dvw - (var(--modal-viewport-gutter) * 2)), var(--modal-max-width)); max-width: calc(100dvw - (var(--modal-viewport-gutter) * 2)); max-height: min(var(--modal-max-height), calc(100dvh - (var(--modal-viewport-gutter) * 2))); padding: 0; margin: auto; border: 0; overflow: visible; border-radius: 0; background: transparent; color: inherit; white-space: normal; font-size: var(--font-size-m); line-height: var(--line-height-m); opacity: 0; transition: opacity var(--duration-normal) ease; } .modal[open] { opacity: 1; } .modal[open].is-closing { opacity: 0; } @starting-style { .modal[open] { opacity: 0; } } .modal:focus, .modal:focus-visible { outline: none; } .modal-pointer-focus-restore:focus-visible { outline: none; } .modal::backdrop { background-color: transparent; transition: background-color var(--duration-normal) ease; } .modal[open]::backdrop { background-color: var(--bg-frost--color); } .modal[open].is-closing::backdrop { background-color: transparent; } .modal-surface { position: relative; display: flex; flex-direction: column; gap: var(--block-gap-m); box-sizing: border-box; width: 100%; max-width: 100%; padding: var(--block-padding-l); background-color: var(--bg-surface-1-elevated); border-radius: var(--block-border-radius-xl); box-shadow: var(--shadow-l); outline: 1px solid var(--border-window--color); outline-offset: -1px; overflow: hidden; transform: scale(var(--modal-motion-scale-start)); transform-origin: center; transition: transform var(--duration-normal) ease; min-width: 0; max-height: inherit; min-height: 0; } .modal[open] .modal-surface { transform: scale(1); } .modal[open].is-closing .modal-surface { transform: scale(var(--modal-motion-scale-start)); pointer-events: none; } @starting-style { .modal[open] .modal-surface { transform: scale(var(--modal-motion-scale-start)); } } @supports not selector(:focus-visible) { .modal-pointer-focus-restore:focus { outline: none; } } .modal-header, .modal-footer { flex: 0 0 auto; min-width: 0; } .modal-header { padding-inline-end: var(--px-48); } .modal-header, .modal-header-copy, .modal-body { display: flex; flex-direction: column; } .modal-header-copy, .modal-body, .modal-body > * { min-width: 0; max-width: 100%; } .modal-body :where(*) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .modal-header-copy, .modal-body { gap: var(--block-gap-m); } .modal-body { flex: 1 1 auto; min-height: 0; padding: var(--modal-body-focus-gutter); margin: calc(var(--modal-body-focus-gutter) * -1); overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; } .modal-body-scroll { overflow-y: auto; } .modal-action-form { display: contents; } .modal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--block-gap-m) var(--group-gap-m); align-items: start; } .modal-form-grid > * { min-width: 0; } .modal-form-grid > :is(.input-wrapper, .select-wrapper) { max-width: none; } .modal-form-grid-full { grid-column: 1 / -1; } .modal-close { position: absolute; top: var(--block-padding-s); right: var(--block-padding-s); z-index: 1; } .modal-media { margin: calc(var(--block-padding-l) * -1) calc(var(--block-padding-l) * -1) 0; overflow: hidden; border-radius: var(--block-border-radius-l) var(--block-border-radius-l) 0 0; } .modal-media-image { display: block; width: 100%; height: 14rem; object-fit: cover; } .modal-title, .modal-description, .modal-body > p { margin: 0; overflow-wrap: anywhere; } .modal-title { font-size: var(--font-size-l); line-height: var(--px-28); letter-spacing: -.01em; } .modal-description { color: var(--font-muted--color); } .modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--group-gap-m); } .modal-footer-center { justify-content: center; } .modal-action-start { order: -1; margin-inline-end: auto; } .modal-layout-centered-alert { .modal-surface { min-height: 15rem; } .modal-header { display: flex; align-items: center; margin-inline: calc(var(--block-padding-l) * -1); padding-inline-end: 0; flex: 1 1 auto; } .modal-header-copy { display: flex; flex: 1 1 auto; justify-content: center; width: 100%; align-items: center; text-align: center; padding-inline: calc(var(--block-padding-l) * 2); padding-top: var(--block-padding-m); } .modal-title { max-width: none; } .modal-body:empty { display: none; } .modal-footer { margin-top: auto; } } .modal-layout-wide { --modal-max-width: 42rem; } .modal-layout-tall { --modal-max-height: min(90svh, 48rem); } @media (max-width: 40rem) { .modal-form-grid { grid-template-columns: minmax(0, 1fr); } .modal-form-grid-full { grid-column: auto; } } .destructive-delete-modal { .modal-surface { background-color: var(--bg-danger--color); color: var(--font-on-danger--color); } .modal-title, .modal-body { color: var(--font-on-danger--color); } .modal-title { padding-inline-end: var(--px-48); overflow-wrap: anywhere; } } .destructive-delete-confirmation-form { margin-top: var(--block-gap-m); } .destructive-delete-confirmation-input .input-label { align-items: flex-start; max-width: 100%; white-space: normal; } .destructive-delete-confirmation-input .input-label > span:first-child { min-width: 0; overflow-wrap: anywhere; } .notifications-trigger-wrap { position: relative; display: inline-flex; } .notifications-trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--element-l--height); height: var(--element-l--height); padding: 0; border: 0; border-radius: var(--radius-full); background-color: var(--bg-frost--color); color: var(--font-uno--color); cursor: pointer; outline: solid var(--element--border-width) transparent; outline-offset: var(--element-field--rest-outline-offset); transition: background-color var(--duration-fast), color var(--duration-fast), outline-color var(--duration-fast); &:hover, &[aria-expanded="true"] { background-color: var(--bg-item-hover--color); } &:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--outline-color); outline-offset: var(--element-field--focus-outline-offset); } } .notifications-trigger .btn-icon-left { width: var(--px-24); height: var(--px-24); } .notifications-trigger-badge { position: absolute; top: var(--px-2); right: var(--px-2); min-width: var(--px-16); height: var(--px-16); padding-inline: var(--px-4); border-radius: var(--radius-full); background-color: var(--bg-invert--color); color: var(--font-invert--color); font-size: var(--font-size-xs); font-weight: 600; line-height: var(--px-16); text-align: center; } .popover-surface.notifications-panel { --popover-surface-min-width: 39rem; --popover-surface-max-width: 44rem; --popover-surface-padding: var(--block-padding-m); padding-block-end: 0; } .notifications-center { display: flex; flex-direction: column; gap: var(--block-gap-s); min-width: 0; } .notifications-center-header { display: flex; align-items: center; justify-content: space-between; gap: var(--group-gap-l); min-width: 0; } .notifications-center-heading { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--group-gap-s); min-width: 0; } .notifications-center-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--group-gap-m); min-width: 0; } .notifications-center-title, .notifications-empty { margin: 0; } .notifications-center-title { color: var(--font-uno--color); font-size: var(--font-size-l); font-weight: 600; letter-spacing: 0; line-height: var(--line-height-m); } .notifications-center-title--hidden { position: absolute; width: var(--px-1); height: var(--px-1); padding: 0; margin: var(--px-n1); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .notifications-empty, .notifications-entry-meta { color: var(--font-muted--color); font-size: var(--font-size-xs); line-height: var(--line-height-xs); } .notifications-mark-all-form { flex: 0 0 auto; margin: 0; } .notifications-mark-all { white-space: nowrap; } .notifications-list { display: flex; flex-direction: column; gap: var(--px-1); max-height: min(38rem, calc(100vh - var(--app-header-height) - (var(--container-gutter-s) * 2))); min-width: 0; margin: 0; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--font-muted--color) 55%, transparent) transparent; list-style: none; } .notifications-list::-webkit-scrollbar { width: var(--px-6); } .notifications-list::-webkit-scrollbar-thumb { border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--font-muted--color) 45%, transparent); } .notifications-center--page .notifications-list { max-height: none; overflow-y: visible; } .space-section-notifications-surface { padding: var(--block-padding-l); border-radius: var(--block-border-radius-l); background-color: var(--bg-surface-1); } .notifications-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--group-gap-m); min-width: 0; min-height: var(--px-56); padding: var(--px-6) var(--px-8); border-radius: var(--radius-s); background-color: transparent; transition: background-color var(--duration-fast), color var(--duration-fast); &:hover, &:focus-within { background-color: var(--bg-transp--color-hover); } } .notifications-entry.is-unread { background-color: var(--bg-primary-soft--color); &:hover, &:focus-within { background-color: var(--bg-primary-soft--color-hover); } } .notifications-entry-link { display: flex; align-items: flex-start; gap: var(--group-gap-s); min-width: 0; padding: var(--px-4) 0; border-radius: var(--radius-xs); color: var(--font-uno--color); text-decoration: none; &:hover, &:active { color: var(--font-uno--color); } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: var(--outline-offset); } } .notifications-entry-link--static { cursor: default; } .notifications-entry-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--group-gap-m); min-width: 0; } .notifications-entry-sentence, .notifications-entry-resource-title, .notifications-entry-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .notifications-entry-sentence.inline-composition { --inline-composition--line-height: var(--px-20); display: -webkit-box; max-height: calc(var(--inline-composition--line-height) * 2); font-size: var(--font-size-s); -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; } .notifications-center--page .notifications-entry-sentence.inline-composition { --inline-composition--line-height: var(--line-height-m); font-size: var(--font-size-m); } .notifications-entry-meta { display: flex; align-items: center; gap: var(--group-gap-m); min-width: 0; overflow: hidden; } .notifications-entry-resource { display: inline-flex; flex: 1 1 auto; align-items: center; gap: var(--group-gap-s); min-width: 0; color: var(--font-cuatro--color); font-weight: 500; } .notifications-entry-resource-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--px-14); height: var(--line-height-xs); color: var(--font-siete--color); & > .icon { width: var(--px-14); height: var(--px-14); } } .notifications-entry-resource-title, .notifications-entry-time { white-space: nowrap; } .notifications-entry-time { flex: 0 0 auto; } .notifications-entry-dismiss-form { display: flex; flex: 0 0 auto; align-items: center; margin: 0; } .notifications-entry-dismiss { display: inline-flex; align-items: center; justify-content: center; width: var(--element-s--height); height: var(--element-s--height); padding: 0; border: 0; border-radius: var(--radius-full); background-color: transparent; color: var(--font-muted--color); cursor: pointer; opacity: 0; pointer-events: none; transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast); & > .icon { width: var(--px-16); height: var(--px-16); } &:hover { color: var(--font-uno--color); outline: none; } &:focus-visible { color: var(--font-uno--color); outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: var(--outline-offset); } } .notifications-entry:hover .notifications-entry-dismiss, .notifications-entry:focus-within .notifications-entry-dismiss { opacity: 1; pointer-events: auto; } @supports not selector(:focus-visible) { .notifications-trigger:focus { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--outline-color); outline-offset: var(--element-field--focus-outline-offset); } .notifications-entry-link:focus { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: var(--outline-offset); } .notifications-entry-dismiss:focus { opacity: 1; pointer-events: auto; color: var(--font-uno--color); outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: var(--outline-offset); } } @media (max-width: 520px) { .popover-surface.notifications-panel { --popover-surface-min-width: calc(100vw - (var(--container-gutter-s) * 2)); --popover-surface-max-width: calc(100vw - (var(--container-gutter-s) * 2)); --popover-surface-padding: var(--block-padding-m); } .notifications-center-header { align-items: flex-start; flex-direction: column; gap: var(--block-gap-s); } .notifications-mark-all-form { width: 100%; } .notifications-mark-all { width: 100%; } } @media (hover: none), (pointer: coarse) { .notifications-entry-dismiss { opacity: 1; pointer-events: auto; } } /* Core */ .popover-shell { position: relative; display: inline-flex; } .popover-surface { --popover-surface-min-width: 14rem; --popover-surface-max-width: 20rem; --popover-surface-padding: var(--block-gap-s); position: absolute; top: calc(100% + var(--px-6)); left: 0; z-index: var(--z-popover); min-width: var(--popover-surface-min-width); max-width: min(var(--popover-surface-max-width), calc(100vw - (var(--container-gutter-s) * 2))); padding: var(--popover-surface-padding); border-radius: var(--block-border-radius-xl); background-color: var(--bg-surface-1-elevated); outline: 1px solid var(--border-window--color); outline-offset: -1px; box-shadow: var(--shadow-l); } .popover-surface--animated { opacity: 0; transform: scale(0.95); transform-origin: top left; transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease; &.is-open { opacity: 1; transform: scale(1); } &.is-closing { opacity: 0; transform: scale(0.95); pointer-events: none; } } .popover-surface--animated[data-popover-placement="up"] { transform-origin: bottom left; } .popover-surface--animated[data-popover-placement="up-end"] { transform-origin: bottom right; } .popover-surface--animated[data-popover-placement="down-end"] { transform-origin: top right; } .popover-surface--animated[data-popover-placement="right"] { transform-origin: top left; } .popover-surface--animated[data-popover-placement="left"] { transform-origin: top right; } @starting-style { .popover-surface--animated.is-open { opacity: 0; transform: scale(0.95); } } @media (prefers-reduced-motion: reduce) { .popover-surface--animated { transition-duration: 1ms; } } .popover-surface.is-portal { position: fixed; top: 0; left: 0; } .popover-surface--rich { --popover-surface-min-width: 20rem; --popover-surface-max-width: 30rem; } .popover-surface--spacious { --popover-surface-padding: var(--group-padding-l); } .popover-shell--up .popover-surface { top: auto; right: auto; bottom: calc(100% + var(--px-6)); left: 0; } .popover-shell--right .popover-surface { top: 0; right: auto; bottom: auto; left: calc(100% + var(--px-6)); } .popover-shell--left .popover-surface { top: 0; right: calc(100% + var(--px-6)); bottom: auto; left: auto; } .popover-shell--down-end .popover-surface { right: 0; left: auto; } /* Slots */ .popover-content { display: flex; flex-direction: column; align-items: stretch; gap: var(--block-gap-s); width: 100%; min-width: 0; } .popover-content > .btn, .popover-content > form > .btn { display: flex; width: 100%; } .popover-header { display: flex; flex-direction: column; gap: var(--group-gap-m); min-width: 0; } .popover-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--group-gap-m); min-width: 0; margin-top: var(--block-gap-s); } /* List + items */ .popover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--group-gap-xs); width: 100%; min-width: 0; overflow-x: hidden; } .popover-list--scroll { --popover-list-scroll-max-height: 12rem; max-height: var(--popover-list-scroll-max-height); overflow-y: auto; &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--outline-color); border-radius: var(--radius-xs); } } .popover-list--s .popover-item { min-height: var(--element-s--height); padding-inline: var(--element-s--padding-inline); font-size: var(--element-s--font-size); line-height: var(--element-s--line-height); } .popover-item { display: flex; align-items: center; width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--element-m--height); padding-inline: var(--px-10); border: none; border-radius: var(--radius-xs); background-color: transparent; text-align: left; cursor: pointer; margin: 0; font-size: var(--font-size-m); line-height: var(--element-m--line-height); color: var(--font-uno--color); &:not(:disabled):hover { background-color: var(--bg-dos--color-hover); color: var(--font-uno--color); } &:disabled, &[aria-disabled="true"] { color: var(--font-disabled--color); cursor: default; background-color: transparent; } &.is-selected { font-weight: 500; background-color: var(--bg-transp--color); } &:not(:disabled):focus-visible { background-color: var(--bg-dos--color-hover); color: var(--font-uno--color); outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: calc(var(--outline-width) * -1); } } .popover-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @supports not selector(:focus-visible) { .popover-item:not(:disabled):focus { background-color: var(--bg-dos--color-hover); color: var(--font-uno--color); outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: calc(var(--outline-width) * -1); } } /* Table editor consumer */ .table-editor-popup { --popover-surface-min-width: 14rem; --popover-surface-max-width: 18rem; overflow-y: auto; } .table-editor-popup[data-editor-type="assignees"] { --popover-surface-min-width: 18rem; --popover-surface-max-width: 20rem; } .table-editor-popup[data-cell-type="multi"] .popover-list--scroll { --popover-list-scroll-max-height: 16rem; } .radio-wrapper { display: flex; flex-direction: column; gap: var(--px-4); width: fit-content; max-width: 100%; } .radio-wrapper-inline { display: inline-flex; width: auto; } .radio { --radio--size: var(--control-radio--size); --radio--dot-size: var(--control-radio--dot-size); display: flex; align-items: center; gap: var(--control--label-gap); min-height: var(--control--hit-area-min); min-width: var(--control--hit-area-min); padding: var(--control--hit-padding); width: fit-content; max-width: 100%; position: relative; cursor: pointer; user-select: text; font-size: var(--element-m--font-size); color: var(--font-uno--color); &:has(.radio-input:disabled) { cursor: not-allowed; color: var(--font-disabled--color); } } .radio-s { --radio--size: var(--px-14); --radio--dot-size: var(--px-6); font-size: var(--element-s--font-size); } .radio-l { --radio--size: var(--px-20); --radio--dot-size: var(--px-8); font-size: var(--element-l--font-size); } .radio-contrast { --control--checked-bg: var(--control--contrast-bg); --control--checked-bg-hover: var(--control--contrast-bg-hover); --control--checked-mark-color: var(--control--contrast-mark-color); } .radio-input { position: absolute; opacity: 0; inline-size: var(--px-1); block-size: var(--px-1); margin: 0; padding: 0; } .radio-control { display: flex; align-items: center; justify-content: center; inline-size: var(--radio--size); block-size: var(--radio--size); outline: solid var(--control--border-width) var(--control--border-color); outline-offset: var(--control--rest-outline-offset); border-radius: var(--radius-full); transition: var(--motion-transition-interactive-fast), var(--motion-transition-outline-fast); flex-shrink: 0; } .radio-dot { inline-size: var(--radio--dot-size); block-size: var(--radio--dot-size); border-radius: var(--radius-full); background-color: var(--control--checked-mark-color); opacity: 0; transform: scale(0.5); transition: var(--motion-transition-interactive-fast); } .radio:hover .radio-input:not(:disabled):not(:checked) + .radio-control { outline-color: var(--control--border-color-hover); } .radio-input:checked + .radio-control { background-color: var(--control--checked-bg); outline-color: transparent; } .radio:hover .radio-input:not(:disabled):checked + .radio-control { background-color: var(--control--checked-bg-hover); } .radio-input:checked + .radio-control .radio-dot { opacity: 1; transform: scale(1); } .radio-input:focus-visible + .radio-control { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } .radio-input:checked:focus-visible + .radio-control { outline-offset: var(--control--focus-outline-offset-checked); } .radio-input:disabled + .radio-control { outline-color: var(--control--disabled-bg); } .radio-input:disabled + .radio-control .radio-dot { background-color: var(--control--disabled-mark-color); } .radio-input:disabled:checked + .radio-control { background-color: var(--control--disabled-bg); outline-color: transparent; } .radio-label { display: inline-flex; align-items: center; flex-wrap: wrap; color: inherit; line-height: var(--radio--size); } .radio--error .radio-control { outline-color: var(--control--error-color); } .radio--error:hover .radio-input:not(:disabled):not(:checked) + .radio-control { outline-color: var(--control--error-color-hover); } .radio--error .radio-input:checked + .radio-control { background-color: var(--control--error-bg); } .radio--error:hover .radio-input:not(:disabled):checked + .radio-control { background-color: var(--control--error-bg-hover); } @supports not selector(:focus-visible) { .radio-input:focus + .radio-control { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } .radio-input:checked:focus + .radio-control { outline-offset: var(--control--focus-outline-offset-checked); } } .resource-identity { --resource-id-font-size: var(--text-m--font-size); --resource-id-line-height: var(--text-m--line-height); --resource-id-icon-size: calc(var(--resource-id-line-height) - var(--px-2)); --resource-id-status-icon-size: calc(var(--resource-id-line-height) - var(--px-6)); --resource-id-icon-color: var(--font-siete--color); --resource-id-key-color: var(--font-muted--color); --resource-id-title-color: var(--font-uno--color); --resource-id-title-color-hover: var(--font-uno--color); --resource-id-underline-color-hover: var(--link-neutral--underline-color-hover); display: inline; color: var(--font-uno--color); font-size: var(--resource-id-font-size); line-height: var(--resource-id-line-height); text-decoration: none; &:any-link, &:any-link:visited, &:any-link:hover, &:any-link:active { color: var(--font-uno--color); } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } } .resource-identity--split { display: inline-flex; align-items: center; gap: var(--element--gap); max-width: 100%; min-width: 0; } .resource-identity-s { --resource-id-font-size: var(--text-s--font-size); --resource-id-line-height: var(--text-s--line-height); --resource-id-status-icon-size: calc(var(--resource-id-line-height) - var(--px-4)); } .resource-identity-l { --resource-id-font-size: var(--text-l--font-size); --resource-id-line-height: var(--text-l--line-height); --resource-id-icon-size: var(--px-28); --resource-id-status-icon-size: calc(var(--resource-id-line-height) - var(--px-8)); } .resource-identity--row { display: flex; align-items: flex-start; gap: var(--element--gap); min-width: 0; padding-block: var(--px-5); } .resource-identity-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--resource-id-icon-size); height: var(--resource-id-line-height); line-height: inherit; vertical-align: top; color: var(--resource-id-icon-color); } .resource-identity--row .resource-identity-icon { flex: 0 0 auto; } .resource-identity--split .resource-identity-icon { flex: 0 0 auto; text-decoration: none; } .resource-identity--primary { --resource-id-title-color: var(--link-uno--color); --resource-id-title-color-hover: var(--link-uno--color-hover); --resource-id-underline-color-hover: var(--link-uno--underline-color); } .resource-identity-icon-svg { display: block; width: var(--resource-id-icon-size); height: var(--resource-id-icon-size); } .resource-identity-icon-svg[class*="icon--task-status-"] { width: var(--resource-id-status-icon-size); height: var(--resource-id-status-icon-size); } .resource-identity-icon-control { appearance: none; min-width: var(--element-s--height); min-height: var(--element-s--height); border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; text-decoration: none; &:hover, &:focus-visible { color: var(--font-primary--color-hover); } &:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element--focus-outline-color); outline-offset: var(--element--focus-outline-offset); border-radius: var(--radius-xs); } } .resource-identity-main { display: inline-flex; align-items: center; gap: var(--element--gap); min-width: 0; color: inherit; text-decoration: none; &:visited { color: inherit; } &:hover, &:active { color: inherit; } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } } .resource-identity:any-link:is(:hover, :active) .resource-identity-title, .resource-identity .resource-identity-main:is(:hover, :active) .resource-identity-title { color: var(--resource-id-title-color-hover); } .resource-identity-key { margin-inline-end: 0.1em; color: var(--resource-id-key-color); white-space: nowrap; } .resource-identity--row .resource-identity-key { flex: 0 0 auto; margin-inline-end: 0; } .resource-identity-title { overflow-wrap: anywhere; color: var(--resource-id-title-color); } .resource-identity--underline .resource-identity-title { text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: text-decoration-color var(--duration-fast) linear; } .resource-identity--row .resource-identity-title { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .resource-identity--row.resource-identity--one-line .resource-identity-title { display: block; text-overflow: ellipsis; white-space: nowrap; } .resource-identity--row .resource-identity-main { min-width: 0; } .resource-identity--underline:any-link:is(:hover, :active) .resource-identity-title, .resource-identity--underline .resource-identity-main:is(:hover, :active) .resource-identity-title { text-decoration-color: var(--resource-id-underline-color-hover); } @supports not selector(:focus-visible) { .resource-identity:focus { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } .resource-identity-icon-control:focus { color: var(--font-primary--color-hover); outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element--focus-outline-color); outline-offset: var(--element--focus-outline-offset); border-radius: var(--radius-xs); } .resource-identity-main:focus { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--element--focus-outline-color); } } .resource-list-header { flex-wrap: wrap; align-items: flex-start; min-width: 0; } .resource-list-header-title { flex: 1 1 12rem; min-width: 0; } .resource-list-header-actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; margin-inline-start: auto; } @media (max-width: 520px) { .resource-list-header-actions { width: 100%; margin-inline-start: 0; justify-content: flex-start; } } /* Inline composition */ .inline-composition { --inline-composition--line-height: var(--line-height-m); line-height: var(--inline-composition--line-height); overflow-wrap: anywhere; } .inline-composition .identity-inline { --identity--line-height: var(--inline-composition--line-height); } .inline-composition .resource-identity { --resource-id-line-height: var(--inline-composition--line-height); } /* Resource row */ .resource-row { display: flex; align-items: center; min-width: 0; min-height: var(--element-m--height); } .resource-row-link { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; padding-inline: var(--px-8); min-height: var(--element-m--height); color: var(--font-uno--color); /* to recolor link */ text-decoration: none; border-radius: var(--block-border-radius-s); transition: background-color var(--duration-fast) linear; &:visited, &:hover, &:active { color: var(--font-uno--color); text-decoration: none; } &:hover, &:active { background-color: var(--element--bg-transp--color-hover); } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); outline-color: var(--outline-color); } } .resource-row-title { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .resource-row-meta { flex-shrink: 0; min-width: 4rem; text-align: end; font-size: var(--font-size-xs); font-family: var(--font-family-mono); color: var(--font-cinco--color); } .resource-row-detach { flex-shrink: 0; } .select-wrapper { --select--height: var(--element-m--height); --select--icon-size: var(--element-m--icon-size); --select--padding-inline: var(--element-m--padding-inline); --select--font-size: var(--element-m--font-size); --select--line-height: var(--element-m--line-height); display: flex; flex-direction: column; width: 100%; gap: 0; } .select-wrapper-s { --select--height: var(--element-s--height); --select--icon-size: var(--element-s--icon-size); --select--padding-inline: var(--element-s--padding-inline); --select--font-size: var(--element-s--font-size); --select--line-height: var(--element-s--line-height); } .select-wrapper-l { --select--height: var(--element-l--height); --select--icon-size: var(--element-l--icon-size); --select--padding-inline: var(--element-l--padding-inline); --select--font-size: var(--element-l--font-size); --select--line-height: var(--element-l--line-height); } .select-wrapper-inline { width: auto; } .select-container { position: relative; display: flex; align-items: center; } .select { display: block; width: 100%; height: var(--select--height); padding-inline: var(--select--padding-inline); padding-inline-end: calc(var(--select--padding-inline) + var(--select--icon-size) + var(--element--gap)); font-size: var(--select--font-size); line-height: var(--select--line-height); appearance: none; /* lint-allow: field-chrome-none — removes the native border; base controls own the shared outline */ border: none; option { color: var(--font-uno--color); } &:not(:disabled):has(option[value=""]:checked) { color: var(--element--placeholder-color); font-weight: 400; } } .select-chevron { position: absolute; right: var(--select--padding-inline); display: inline-flex; align-items: center; justify-content: center; width: var(--select--icon-size); height: var(--select--icon-size); color: var(--font-tres--color); pointer-events: none; svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: var(--element--icon-stroke-width); } } .segmented-control { display: inline-flex; align-items: center; gap: var(--element--gap); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .segmented-control::-webkit-scrollbar { display: none; } .segmented-control-item { color: var(--font-uno--color); background-color: transparent; } .segmented-control-item:hover:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-transp--color-hover); } .segmented-control-item:active:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-transp--color-active); } .segmented-control-item--button { background-color: var(--element--bg-color); } .segmented-control-item--button:hover:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-color-hover); } .segmented-control-item--button:active:not(:disabled):not(.is-disabled) { background-color: var(--element--bg-color-active); } .segmented-control-item[aria-pressed="true"]:not(:disabled):not(.is-disabled) { background-color: var(--bg-invert--color); color: var(--font-invert--color); } .segmented-control-item[aria-pressed="true"]:hover:not(:disabled):not(.is-disabled) { background-color: var(--bg-invert--color-hover); color: var(--font-invert--color); } .segmented-control-item[aria-pressed="true"]:active:not(:disabled):not(.is-disabled) { background-color: var(--bg-invert--color-active); color: var(--font-invert--color); } .segmented-control-equal { inline-size: 100%; overflow: hidden; } .segmented-control-equal .segmented-control-item { flex: 1 1 0; min-inline-size: 0; } .settings-autosave-status { color: var(--font-cinco--color); font-size: var(--font-size-xs); line-height: 1.2; } .settings-autosave-status.is-error { color: var(--font-danger--color); } .settings-autosave-status[hidden] { display: none; } /* Settings section */ .settings-accordion { gap: var(--block-gap-xs); } .settings-section { align-self: stretch; width: 100%; display: flex; flex-direction: column; gap: var(--section-gap-m); padding: var(--block-padding-m); padding-block: var(--block-padding-s); border-radius: var(--block-border-radius-l); background-color: transparent; transition: padding var(--duration-normal) ease-out, background-color var(--duration-normal) ease-out; } .settings-accordion > .settings-section.is-open { background-color: var(--bg-surface-1); padding-block: var(--block-padding-l); } .settings-section-help { width: min(100%, 600px); margin: 0; color: var(--font-dos--color); font-size: var(--font-size-l); line-height: 1.5; } .settings-section:has(> .collapsible-section-body > .settings-section-help:first-child), .settings-section:has(> .collapsible-section-body > :first-child > .settings-section-help:first-child) { gap: var(--block-gap-s); } .switch-wrapper { display: flex; flex-direction: column; gap: var(--px-4); width: fit-content; max-width: 100%; } .switch-wrapper-inline { display: inline-flex; width: auto; } .switch { --switch--height: var(--control-switch--height); --switch--width: var(--control-switch--width); --switch--padding: var(--control-switch--padding); --switch--thumb-size: var(--control-switch--thumb-size); display: inline-flex; align-items: center; gap: var(--control--label-gap); min-height: var(--control--hit-area-min); min-width: var(--control--hit-area-min); padding-block: var(--control--hit-padding); padding-inline: 0; width: fit-content; max-width: 100%; cursor: pointer; user-select: text; color: var(--font-uno--color); font-size: var(--element-m--font-size); &:has(.switch-input:disabled) { cursor: not-allowed; color: var(--font-disabled--color); } } .switch-s { --switch--height: var(--px-14); --switch--padding: var(--px-2); --switch--width: calc(var(--switch--height) * 1.6); --switch--thumb-size: calc(var(--switch--height) - var(--switch--padding) * 2); font-size: var(--element-s--font-size); } .switch-l { --switch--height: var(--px-20); --switch--padding: var(--px-3); --switch--width: calc(var(--switch--height) * 1.6); --switch--thumb-size: calc(var(--switch--height) - var(--switch--padding) * 2); font-size: var(--element-l--font-size); } .switch-contrast { --control--checked-bg: var(--control--contrast-bg); --control--checked-bg-hover: var(--control--contrast-bg-hover); --control--checked-mark-color: var(--control--contrast-mark-color); } .switch-danger { --control--checked-bg: var(--control--danger-bg); --control--checked-bg-hover: var(--control--danger-bg-hover); } .switch-input { position: absolute; opacity: 0; inline-size: var(--px-1); block-size: var(--px-1); margin: 0; padding: 0; } .switch-track { position: relative; display: inline-flex; align-items: center; inline-size: var(--switch--width); block-size: var(--switch--height); padding: var(--switch--padding); border-radius: var(--radius-full); background-color: var(--control-switch--track-bg); outline: solid var(--control--border-width) transparent; outline-offset: var(--control--rest-outline-offset); transition: var(--motion-transition-interactive-fast), var(--motion-transition-outline-fast); flex-shrink: 0; } .switch-thumb { inline-size: var(--switch--thumb-size); block-size: var(--switch--thumb-size); border-radius: var(--radius-full); background-color: var(--control--mark-color); transform: translateX(0); transition: var(--motion-transition-interactive-fast); } .switch:hover .switch-input:not(:disabled):not(:checked) + .switch-track { background-color: var(--control-switch--track-bg-hover); } .switch-input:checked + .switch-track { background-color: var(--control--checked-bg); } .switch:hover .switch-input:not(:disabled):checked + .switch-track { background-color: var(--control--checked-bg-hover); } .switch-input:checked + .switch-track .switch-thumb { background-color: var(--control--checked-mark-color); transform: translateX(calc(var(--switch--width) - var(--switch--thumb-size) - var(--switch--padding) * 2)); } .switch-input:focus-visible + .switch-track { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } .switch-input:disabled + .switch-track { background-color: var(--control--disabled-bg); } .switch-input:disabled + .switch-track .switch-thumb { background-color: var(--control--disabled-mark-color); } .switch-label { display: inline-flex; align-items: center; flex-wrap: wrap; color: inherit; line-height: var(--switch--height); } .switch--error .switch-track { outline-color: var(--control--error-color); } .switch--error:hover .switch-input:not(:disabled):not(:checked) + .switch-track { outline-color: var(--control--error-color-hover); } .switch--error .switch-input:checked + .switch-track { background-color: var(--control--error-bg); } .switch--error:hover .switch-input:not(:disabled):checked + .switch-track { background-color: var(--control--error-bg-hover); } @supports not selector(:focus-visible) { .switch-input:focus + .switch-track { outline-width: var(--control--focus-outline-width); outline-style: var(--control--focus-outline-style); outline-color: var(--control--focus-outline-color); outline-offset: var(--control--focus-outline-offset); } } .tabs-wrapper { display: inline-flex; max-width: 100%; } .tabs { display: inline-flex; align-items: center; max-width: 100%; background-color: transparent; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .tabs-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-inline-size: fit-content; background-color: transparent; color: var(--font-muted--color); cursor: pointer; text-decoration: none; user-select: none; transition: color var(--duration-fast); &:hover:not(:disabled):not(.is-disabled), &:active:not(:disabled):not(.is-disabled), &.is-active { color: var(--font-uno--color); } &:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--element--focus-outline-color); z-index: 2; } &:disabled, &.is-disabled, &[aria-disabled="true"] { color: var(--font-disabled--color); cursor: not-allowed; } } .tabs-plain { gap: 0; .tabs-tab { block-size: var(--element-m--height); padding-inline: var(--element-m--padding-inline); border-radius: 0; font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); font-weight: 500; } .tabs-tab:first-child { padding-inline-start: 0; } } .tabs-plain.tabs-s { .tabs-tab { block-size: var(--element-s--height); padding-inline: var(--element-s--padding-inline); font-size: var(--element-s--font-size); line-height: var(--element-s--line-height); } .tabs-tab:first-child { padding-inline-start: 0; } } .tabs-text { gap: var(--group-gap-l); .tabs-tab { min-inline-size: 0; padding-inline: 0; border-radius: 0; font-family: var(--font-family-mono); font-size: var(--font-size-s); line-height: var(--px-20); font-weight: 500; text-transform: uppercase; color: var(--font-cinco--color); &:hover:not(:disabled):not(.is-disabled), &:active:not(:disabled):not(.is-disabled), &.is-active { color: var(--font-uno--color); } &:disabled, &.is-disabled { color: var(--font-disabled--color); } } } .tabs-text.tabs-s { gap: var(--group-gap-m); .tabs-tab { font-size: var(--font-size-xs); line-height: var(--px-16); } } .tabs-underline { position: relative; gap: var(--group-gap-l); .tabs-tab { block-size: var(--element-m--height); padding-inline: 0; border-radius: 0; font-size: var(--element-m--font-size); line-height: var(--element-m--line-height); font-weight: 500; } } .tabs-underline.tabs-s { gap: var(--group-gap-l); .tabs-tab { block-size: var(--element-s--height); font-size: var(--element-s--font-size); line-height: var(--element-s--line-height); } } /* exception: DP/no-visible-lines — underline is the requested active navigation indicator. */ .tabs-underline:not(.is-ready) .tabs-tab.is-active::after, .tabs-underline-indicator { position: absolute; inset-block-end: 0; block-size: var(--px-1); background-color: var(--font-uno--color); pointer-events: none; } .tabs-underline:not(.is-ready) .tabs-tab.is-active::after { content: ""; inset-inline: 0; } .tabs-underline-indicator { inset-inline-start: 0; inline-size: var(--tabs-indicator-inline-size, 0); opacity: 0; transform: translateX(var(--tabs-indicator-inline-start, 0)); } .tabs-underline.is-ready .tabs-underline-indicator { opacity: 1; transition: inline-size var(--motion-transition-switch), transform var(--motion-transition-switch); } .tabs-tab-button { appearance: none; border: 0; padding-block: 0; font-family: inherit; } @supports not selector(:focus-visible) { .tabs-tab:focus { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--element--focus-outline-color); z-index: 2; } } /* Task params */ .task-param-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--group-gap-s); min-width: 0; } .task-param-control { --task-param-control--height: var(--element-m--height); --task-param-control--padding-inline: calc(var(--element-m--padding-inline) * 0.75); --task-param-control--font-size: var(--element-m--font-size); --task-param-control--line-height: var(--element-m--line-height); --task-param-control--icon-size: var(--element-m--icon-size); --task-param-control--optical-compensation: 0.25em; --task-param-control--bg: transparent; --task-param-control--bg-hover: var(--element--bg-transp--color-hover); --task-param-control--bg-active: var(--element--bg-transp--color-active); --task-param-control--pill-bg: var(--bg-dos--color); --task-param-control--pill-bg-hover: var(--bg-dos--color-hover); --task-param-control--badge-bg: var(--bg-dos--color); --task-param-control--badge-bg-hover: var(--bg-dos--color-hover); --task-param-control--badge-bg-active: var(--bg-dos--color-active); --task-param-control--color: var(--font-dos--color); --task-param-control--focus-color: var(--element--focus-outline-color); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--element--gap); flex-shrink: 0; min-width: 0; box-sizing: border-box; height: var(--task-param-control--height); min-height: var(--task-param-control--height); padding-inline: var(--task-param-control--padding-inline); appearance: none; border: none; border-radius: var(--radius-full); background-color: var(--task-param-control--bg); color: var(--task-param-control--color); font: inherit; font-size: var(--task-param-control--font-size); line-height: var(--task-param-control--line-height); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast); &:hover:not(:disabled):not(.is-disabled) { background-color: var(--task-param-control--bg-hover); } &:active:not(:disabled):not(.is-disabled) { background-color: var(--task-param-control--bg-active); } &:focus-visible { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--task-param-control--focus-color); } &:disabled, &.is-disabled { color: var(--font-disabled--color); cursor: not-allowed; background-color: transparent; } &[hidden] { display: none; } } .task-param-control-has-left-icon:not([data-task-param-presentation="icon"]), .task-param-control:has(> .task-param-control-value > .resource-identity > .resource-identity-icon:first-child):not([data-task-param-presentation="icon"]) { padding-inline-end: calc(var(--task-param-control--padding-inline) + var(--task-param-control--optical-compensation)); } .task-param-control-has-right-icon:not([data-task-param-presentation="icon"]) { padding-inline-start: calc(var(--task-param-control--padding-inline) + var(--task-param-control--optical-compensation)); } .task-param-control-s { --task-param-control--height: var(--element-s--height); --task-param-control--padding-inline: var(--element-s--padding-inline); --task-param-control--font-size: var(--element-s--font-size); --task-param-control--line-height: var(--element-s--line-height); --task-param-control--icon-size: var(--element-s--icon-size); } .task-param-control-m { --task-param-control--height: var(--element-m--height); --task-param-control--padding-inline: var(--element-m--padding-inline); --task-param-control--font-size: var(--element-m--font-size); --task-param-control--line-height: var(--element-m--line-height); --task-param-control--icon-size: var(--element-m--icon-size); } .task-param-control-l { --task-param-control--height: var(--element-l--height); --task-param-control--padding-inline: var(--element-l--padding-inline); --task-param-control--font-size: var(--element-l--font-size); --task-param-control--line-height: var(--element-l--line-height); --task-param-control--icon-size: var(--element-l--icon-size); } .task-param-control-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--task-param-control--icon-size); height: var(--task-param-control--icon-size); flex-shrink: 0; & svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: var(--element--icon-stroke-width); } } .task-param-control-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .task-param-control-label { color: var(--font-cinco--color); } .task-param-control-value { display: inline-flex; align-items: center; gap: var(--group-gap-s); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-param-control[data-task-param-tone="muted"] { --task-param-control--color: var(--font-cinco--color); } .task-param-control[data-task-param-tone="status"] { --task-param-control--color: var(--font-uno--color); } .task-param-control[data-task-param-tone="danger-soft"] { --task-param-control--color: var(--font-danger--color); --task-param-control--bg-hover: var(--bg-danger-soft--color-hover); --task-param-control--bg-active: var(--bg-danger-soft--color-active); --task-param-control--pill-bg: var(--bg-danger-soft--color); --task-param-control--pill-bg-hover: var(--bg-danger-soft--color-hover); --task-param-control--badge-bg: var(--bg-danger-soft--color); --task-param-control--badge-bg-hover: var(--bg-danger-soft--color-hover); --task-param-control--badge-bg-active: var(--bg-danger-soft--color-active); } .task-param-control[data-task-param-tone="danger"] { --task-param-control--color: var(--font-danger--color); --task-param-control--bg-hover: var(--bg-danger-soft--color-hover); --task-param-control--bg-active: var(--bg-danger-soft--color-active); --task-param-control--pill-bg: var(--bg-danger-soft--color); --task-param-control--pill-bg-hover: var(--bg-danger-soft--color-hover); --task-param-control--badge-bg: var(--bg-danger-soft--color); --task-param-control--badge-bg-hover: var(--bg-danger-soft--color-hover); --task-param-control--badge-bg-active: var(--bg-danger-soft--color-active); font-weight: 500; } .task-param-control[data-task-param-state="empty"] { --task-param-control--color: var(--font-cinco--color); } .task-param-control[data-task-param-presentation="pill"] { --task-param-control--bg: var(--task-param-control--pill-bg); --task-param-control--bg-hover: var(--task-param-control--pill-bg-hover); } .task-param-control[data-task-param-presentation="badge"] { --task-param-control--bg: var(--task-param-control--badge-bg); --task-param-control--bg-hover: var(--task-param-control--badge-bg-hover); --task-param-control--bg-active: var(--task-param-control--badge-bg-active); max-width: min(100%, var(--px-240)); } .task-param-control[data-task-param-presentation="text"] { --task-param-control--padding-inline: 0; --task-param-control--bg-hover: transparent; --task-param-control--bg-active: transparent; border-radius: var(--radius-xs); } .task-param-control[data-task-param-presentation="icon"] { width: var(--task-param-control--height); min-width: var(--task-param-control--height); padding-inline: 0; } .task-param-control[data-task-param-presentation="icon"] .task-param-control-value, .task-param-control[data-task-param-presentation="icon"] .task-param-control-label { position: absolute; width: var(--px-1); height: var(--px-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @supports not selector(:focus-visible) { .task-param-control:focus:not(:disabled):not(.is-disabled) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-offset: var(--element--focus-outline-offset); outline-color: var(--task-param-control--focus-color); } } .textarea-wrapper { --textarea--height: calc(var(--element-m--height) * var(--element--multiline-size-factor)); --textarea--padding-inline: var(--element-m--padding-inline); --textarea--padding-block: calc((var(--element-m--height) - var(--element-m--line-height)) / 2); --textarea--font-size: var(--element-m--font-size); --textarea--line-height: var(--element-m--line-height); display: flex; flex-direction: column; width: 100%; gap: 0; } .textarea-wrapper-s { --textarea--height: calc(var(--element-s--height) * var(--element--multiline-size-factor)); --textarea--padding-inline: var(--element-s--padding-inline); --textarea--padding-block: calc((var(--element-s--height) - var(--element-s--line-height)) / 2); --textarea--font-size: var(--element-s--font-size); --textarea--line-height: var(--element-s--line-height); } .textarea-wrapper-l { --textarea--height: calc(var(--element-l--height) * var(--element--multiline-size-factor)); --textarea--padding-inline: var(--element-l--padding-inline); --textarea--padding-block: calc((var(--element-l--height) - var(--element-l--line-height)) / 2); --textarea--font-size: var(--element-l--font-size); --textarea--line-height: var(--element-l--line-height); } .textarea-wrapper-inline { width: auto; } .textarea { display: block; width: 100%; min-height: var(--textarea--height); padding-inline: var(--textarea--padding-inline); padding-block: var(--textarea--padding-block); font-size: var(--textarea--font-size); line-height: var(--textarea--line-height); font-weight: 400; resize: vertical; &:disabled { resize: none; } &::placeholder { color: var(--element--placeholder-color); font-weight: 400; } &:disabled::placeholder { color: var(--font-disabled--color); } } .textarea-filled { border: none; background-color: var(--bg-dos--color); outline: none; box-shadow: none; &:hover:not(:disabled) { background-color: var(--bg-dos--color-hover); outline: none; box-shadow: none; } &:active:not(:disabled) { background-color: var(--bg-dos--color-active); outline: none; box-shadow: none; } &:focus:not(:disabled) { outline: none; box-shadow: none; } &:focus-visible:not(:disabled):not(:read-only) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); box-shadow: none; } &:read-only { outline: none; box-shadow: none; } &:read-only:focus-visible { outline: none; } &:disabled { background-color: var(--bg-disabled--color); } } @supports not selector(:focus-visible) { .textarea-filled:focus:not(:disabled):not(:read-only) { outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); box-shadow: none; } .textarea-filled:focus:read-only { outline: none; box-shadow: none; } } .toast-container { --toast--container-offset: var(--px-20); position: fixed; bottom: var(--toast--container-offset); inset-inline-end: var(--toast--container-offset); z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: var(--group-gap-m); width: 22rem; pointer-events: none; } @media (max-width: 30rem) { .toast-container { --toast--container-offset: var(--px-12); inset-inline: var(--toast--container-offset); width: auto; } } .toast { --toast-progress: 100%; position: relative; display: flex; align-items: flex-start; gap: var(--group-gap-m); padding: var(--block-padding-m); background-color: color-mix(in srgb, var(--bg-surface-1-elevated) 78%, transparent); border-radius: var(--radius-l); outline: 1px solid var(--border-window--color); outline-offset: -1px; /* exception: shadow on floating layer — allowed per DESIGN_PRINCIPLES.md §4 */ box-shadow: var(--shadow-l); font-size: var(--font-size-s); line-height: var(--element-s--line-height); pointer-events: auto; animation: toast-enter var(--duration-slow) ease-out forwards; &.is-dismissing { animation: toast-exit var(--duration-slow) ease-in forwards; } } @supports (backdrop-filter: blur(1px)) { .toast { backdrop-filter: blur(10px); } } .toast-icon { flex-shrink: 0; width: var(--element-s--icon-size); height: var(--element-s--icon-size); } .toast-message { flex: 1; min-width: 0; word-break: break-word; } .toast-action { flex-shrink: 0; &[hidden] { display: none; } } .toast-dismiss { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; } .toast-destructive-action { display: inline-flex; &[hidden] { display: none; } } .toast-timer { position: absolute; inset: calc(var(--element--border-width) * -2); border-radius: var(--radius-full); color: var(--font-siete--color); pointer-events: none; } .toast.has-timer .toast-timer { background: conic-gradient(currentColor var(--toast-progress), transparent 0); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - var(--element--border-width) * 2), black 0 ); mask: radial-gradient( farthest-side, transparent calc(100% - var(--element--border-width) * 2), black 0 ); animation: toast-countdown var(--toast-duration, 2s) linear forwards; } .toast:has(.toast-destructive-action:not([hidden])) .toast-timer { color: var(--font-danger--color); } .toast.is-paused .toast-timer { animation-play-state: paused; } /* Variant colors */ .toast--info { color: var(--font-uno--color); } .toast--success { color: var(--font-success--color); & .toast-message { color: var(--font-uno--color); } } .toast--warning { color: var(--font-warning--color); & .toast-message { color: var(--font-uno--color); } } .toast--error { color: var(--font-danger--color); & .toast-message { color: var(--font-uno--color); } } /* Animations */ @keyframes toast-enter { from { transform: translateX(calc(100% + var(--toast--container-offset))); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-exit { from { transform: translateX(0); opacity: 1; } to { transform: translateX(calc(100% + var(--toast--container-offset))); opacity: 0; } } @property --toast-progress { syntax: ""; inherits: false; initial-value: 100%; } @keyframes toast-countdown { to { --toast-progress: 0%; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; opacity: 1; &.is-dismissing { animation: none; opacity: 0; } } .toast-timer { animation: none; } } /* Tooltip */ .tooltip-trigger { position: relative; } .tooltip { position: absolute; z-index: var(--z-tooltip); color: var(--font-cinco--color); font-size: var(--font-size-xs); line-height: var(--line-height-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-normal) ease-out, transform var(--duration-normal) ease-out; } .tooltip--top { inset-block-end: 100%; inset-inline-start: 50%; margin-block-end: var(--px-4); transform: translateX(-50%) translateY(var(--px-4)); } .tooltip--bottom { inset-block-start: 100%; inset-inline-start: 50%; margin-block-start: var(--px-4); transform: translateX(-50%) translateY(calc(-1 * var(--px-4))); } .tooltip-trigger:hover > .tooltip, .tooltip-trigger:focus-within > .tooltip { opacity: 1; } .tooltip-trigger:hover > .tooltip--top, .tooltip-trigger:focus-within > .tooltip--top { transform: translateX(-50%) translateY(0); } .tooltip-trigger:hover > .tooltip--bottom, .tooltip-trigger:focus-within > .tooltip--bottom { transform: translateX(-50%) translateY(0); } .workspace-search { position: relative; width: clamp(10rem, 25vw, 38rem); min-width: 0; } .workspace-search-form { position: relative; min-width: 0; } .workspace-search-input { appearance: none; width: 100%; height: var(--element-l--height); padding-inline: var(--element-l--padding-inline) calc(var(--element-l--padding-inline) + var(--element-s--height)); /* lint-allow: field-chrome-none — removes the native border; this rule owns the shared outline below */ border: 0; border-radius: var(--radius-full); background-color: var(--bg-frost--color); color: var(--font-uno--color); font-size: var(--element-l--font-size); line-height: var(--element-l--line-height); outline: solid var(--element--border-width) var(--element-field--border-color); outline-offset: var(--element-field--rest-outline-offset); transition: background-color var(--duration-fast), outline-color var(--duration-fast); &:hover { outline-color: var(--element-field--border-color-hover); } &:focus-visible { background-color: var(--bg-surface-1-elevated); outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } } .workspace-search-input::-webkit-search-cancel-button { display: none; } .workspace-search-clear-button { position: absolute; top: 50%; right: calc((var(--element-l--height) - var(--element-s--height)) / 2); color: var(--font-muted--color); transform: translateY(-50%); } .workspace-search-clear-button.is-hidden, .workspace-search-clear-button[hidden] { display: none; } .workspace-search-panel { position: absolute; top: calc(100% + var(--px-6)); left: 50%; z-index: var(--z-popover); display: flex; flex-direction: column; gap: var(--px-16); width: min(38rem, calc(100vw - (var(--container-gutter-s) * 2))); min-height: min( 400px, calc(100svh * 2 / 3), calc(100svh - var(--app-header-height) - var(--container-gutter-s)) ); max-height: min( calc(100svh * 2 / 3), calc(100svh - var(--app-header-height) - var(--container-gutter-s)) ); padding: var(--block-gap-m); padding-top: calc(var(--block-gap-m) * .75); overflow: hidden; border-radius: var(--block-border-radius-xl); background-color: var(--bg-surface-1-elevated); outline: 1px solid var(--border-window--color); outline-offset: -1px; opacity: 0; box-shadow: var(--shadow-xl); transform: translateX(-50%) scale(0.95); transform-origin: top center; transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease; } .workspace-search-panel.is-open { opacity: 1; transform: translateX(-50%) scale(1); } .workspace-search-panel.is-closing { opacity: 0; transform: translateX(-50%) scale(0.95); pointer-events: none; } .workspace-search-panel[hidden] { display: none; } @starting-style { .workspace-search-panel.is-open { opacity: 0; transform: translateX(-50%) scale(0.95); } } .workspace-search-controls { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--group-gap-s); min-width: 0; } .workspace-search-type-tabs, .workspace-search-recent-switch { max-width: 100%; } .workspace-search-type-tabs { flex: 1 1 auto; min-width: 0; } .workspace-search-recent-switch { flex: 0 0 auto; margin-inline-start: auto; } .workspace-search-status { flex: 0 0 auto; min-height: var(--line-height-s); margin: 0; color: var(--font-muted--color); font-size: var(--font-size-s); line-height: var(--line-height-s); } .workspace-search-results { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--block-gap-m); min-width: 0; min-height: 0; overflow-y: auto; /* Bottom fade overlays rows only while more content is scrollable below. */ &::after { content: ""; position: sticky; bottom: 0; flex: 0 0 auto; height: var(--px-28); margin-top: calc((var(--px-28) + var(--block-gap-m)) * -1); background: linear-gradient(to top, var(--bg-surface-1-elevated), transparent); opacity: 0; transition: opacity var(--duration-fast); pointer-events: none; } &.is-overflowing::after { opacity: 1; } } .workspace-search-create-footer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--px-4); align-items: start; flex: 0 0 auto; min-width: 0; margin-inline: calc(calc(var(--block-gap-m) * -1)); margin-bottom: calc(calc(var(--block-gap-m) * -1)); margin-top: var(--px-12); padding: var(--px-6); background-color: var(--bg-dos--color); } .workspace-search-create-footer[hidden] { display: none; } .workspace-search-create-form { margin: 0; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; } /* Action rows, not links; programmatic focus needs plain :focus for Safari. */ .workspace-search-create-row { display: inline-flex; align-items: center; gap: var(--group-gap-s); width: auto; max-width: 100%; min-width: 0; overflow: hidden; padding: var(--px-6) var(--element-s--padding-inline); border: 0; border-radius: var(--radius-xs); background-color: transparent; color: var(--font-muted--color); font-family: inherit; font-size: var(--font-size-s); line-height: var(--line-height-s); text-align: left; cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast); &:hover, &:focus, &:focus-visible { background-color: var(--bg-invert--color); color: var(--font-invert--color); outline: none; } &:active { background-color: var(--bg-invert--color-active); color: var(--font-invert--color); } } .workspace-search-create-row-icon { display: block; flex: 0 0 auto; width: var(--element-s--icon-size); height: var(--element-s--icon-size); opacity: 0.75; } .workspace-search-create-row-text { display: flex; flex: 1 1 auto; align-items: baseline; gap: var(--px-4); min-width: 0; overflow: hidden; } .workspace-search-create-row-action { flex: 0 0 auto; } .workspace-search-create-row-query { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--font-uno--color); text-overflow: ellipsis; white-space: nowrap; } .workspace-search-create-row:hover .workspace-search-create-row-query, .workspace-search-create-row:focus .workspace-search-create-row-query, .workspace-search-create-row:focus-visible .workspace-search-create-row-query, .workspace-search-create-row:active .workspace-search-create-row-query { color: var(--font-invert--color); } .workspace-search-create-error { grid-column: 1 / -1; margin: 0; color: var(--font-danger--color); font-size: var(--font-size-xs); line-height: var(--line-height-s); } .workspace-search-group { display: flex; flex-direction: column; gap: var(--group-gap-s); min-width: 0; } .workspace-search-group-title { margin: 0; padding-inline: 0; color: var(--font-uno--color); font-size: var(--font-size-xl); line-height: 1.1; font-weight: 700; } .workspace-search-list { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; } .workspace-search-list > li:has(.workspace-search-more) { margin-top: var(--px-8); } .workspace-search-result { display: flex; flex-direction: column; gap: var(--px-2); min-width: 0; width: calc(100% + var(--element-s--padding-inline)); margin-inline-start: calc(var(--element-s--padding-inline) * -1); padding: var(--px-6) var(--element-s--padding-inline); border-radius: var(--radius-xs); color: var(--font-uno--color); text-decoration: none; font-weight: 500; position: relative; &:hover, &.is-active { outline: none; color: var(--font-uno--color); text-decoration: none; } &:focus-visible { outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: calc(var(--outline-width) * -1); color: var(--font-uno--color); text-decoration: none; } &:hover .workspace-search-result-title, &:focus-visible .workspace-search-result-title, &.is-active .workspace-search-result-title { text-decoration: underline; text-decoration-color: var(--link-neutral--underline-color-hover); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } } .workspace-search-more { --btn--padding-inline: var(--px-8); } .workspace-search-result-with-leading-icon { flex-direction: row; align-items: flex-start; gap: var(--px-8); } .workspace-search-result-recent { flex-direction: row; align-items: flex-start; gap: var(--px-8); } .workspace-search-result-status-icon, .workspace-search-result-resource-icon, .workspace-search-result-history-icon { display: flex; flex: 0 0 auto; width: var(--element-s--icon-size); height: var(--line-height-m); align-items: center; color: var(--font-siete--color); line-height: var(--line-height-m); padding-top: var(--px-2); & > .icon { width: var(--element-s--icon-size); height: var(--element-s--icon-size); } } .workspace-search-result-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--px-4); min-width: 0; } .workspace-search-result-title, .workspace-search-result-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-search-result-title { font-size: var(--font-size-m); line-height: var(--line-height-m); } .workspace-search-result-meta, .workspace-search-result-snippet { color: var(--font-muted--color); font-size: var(--font-size-xs); line-height: var(--line-height-s); text-decoration: none; } .workspace-search-result-snippet { display: -webkit-box; overflow: hidden; white-space: normal; line-height: var(--px-14); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .workspace-search-mark { padding-inline: var(--px-1); border-radius: var(--px-2); background-color: var(--bg-mark--color); color: inherit; } :root[data-theme="dark"] .workspace-search-mark { background-color: color-mix(in srgb, var(--bg-warning--color) 28%, transparent); color: var(--font-uno--color); } @supports not selector(:focus-visible) { .workspace-search-input:focus { background-color: var(--bg-surface-1-elevated); outline-width: var(--element--focus-outline-width); outline-style: var(--element--focus-outline-style); outline-color: var(--element-field--focus-outline-color); outline-offset: var(--element-field--focus-outline-offset); } .workspace-search-result:focus { background-color: var(--bg-item-hover--color); color: var(--font-uno--color); outline-width: var(--outline-width); outline-style: var(--outline-style); outline-color: var(--outline-color); outline-offset: calc(var(--outline-width) * -1); } .workspace-search-result:focus .workspace-search-result-title { text-decoration: underline; text-decoration-color: var(--link-neutral--underline-color-hover); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } } @media (max-width: 720px) { .workspace-search { flex: 1 1 auto; width: 100%; } } :root[data-debug="on"] * { outline: 1px solid var(--debug-outline--color); }