@layer ui.components{.ui-segmented{border-radius:var(--radius-button);background-color:var(--bg-secondary);border:0;min-width:0;margin:0}.ui-segment{min-height:calc(var(--touch-target) - 4px);border-radius:max(2px, calc(var(--radius-button) - 2px));color:var(--text-muted);background-color:#0000}.ui-segment:has(input:checked){color:var(--text-primary);background-color:var(--surface);box-shadow:var(--shadow-card)}.ui-segment:has(input:focus-visible){box-shadow:0 0 0 2px var(--bg-primary), 0 0 0 4px var(--action)}.ui-segmented:disabled .ui-segment{cursor:not-allowed;opacity:var(--opacity-disabled)}.ui-segmented[data-variant=outline]{border:.5px solid color-mix(in srgb, var(--text-primary) 40%, transparent);border-radius:var(--radius-input);background-color:var(--surface);gap:0;padding:0}.ui-segmented[data-variant=outline] .ui-segment{border-radius:var(--radius-input);min-height:36px;padding-inline:28px;font-size:16px;font-weight:500}.ui-segmented[data-variant=outline] .ui-segment:has(input:checked){background-color:var(--bg-tertiary);box-shadow:none}.ui-segmented[data-variant=cream]{border:1px solid var(--border-faint);border-radius:var(--radius-pill);background-color:var(--bg-primary);gap:0;width:100%;padding:0;display:flex}.ui-segmented[data-variant=cream] .ui-segment{gap:var(--space-sm);min-height:0;padding:var(--space-md) var(--space-xl);color:var(--text-muted);letter-spacing:-.01em;transition:background-color var(--duration-fast) ease;border-radius:70px;flex:1;font-size:14px;font-weight:500;line-height:18px}.ui-segmented[data-variant=cream] .ui-segment:has(input:checked){background-color:var(--bg-tertiary);color:var(--text-ink);box-shadow:none;font-weight:600}.ui-segmented[data-variant=tabs]{border:1px solid var(--border-field);background-color:var(--surface);border-radius:12px;gap:0;width:auto;padding:0;display:inline-flex}.ui-segmented[data-variant=tabs] .ui-segment{min-height:0;color:var(--text-secondary);border-radius:12px;padding:10px 32px;font-size:16px;font-weight:500;line-height:22.8px}.ui-segmented[data-variant=tabs] .ui-segment:has(input:checked){background-color:var(--bg-primary);color:var(--text-secondary);box-shadow:none}.ui-segmented[data-variant=cream] .ui-segment__hint{letter-spacing:0;font-size:12px;font-weight:500;line-height:16px;display:none}@media (min-width:768px){.ui-segmented[data-variant=cream]{width:auto;display:inline-flex}.ui-segmented[data-variant=cream] .ui-segment{flex:none}}@media (min-width:1024px){.ui-segmented[data-variant=cream] .ui-segment__hint{display:block}}}
